This repository has been archived by the owner on Apr 30, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Features/TinyMce): customize editor via JSON config file (#158)
* feat(Feature/TinyMCE): Added Styleformats and Toolbars configuration * feat(Feature/TinyMce): Added JSON files * refactor(Feature/TinyMce): Removed Extra Toolbar * feat(Feature/TinyMCE): Added Styleformats and Toolbars configuration * feat(Feature/TinyMce): Added JSON files * refactor(Feature/TinyMce): Removed Extra Toolbar * refactor(Feature/TinyMce): Refactored and Resolved Comments from Github * fix(TinyMce Feature README): Updated README * fix(TinyMCE Feature): Fixed major bug, added json for blockformats * feat(TinyMce Feature): Refactored Code * refactor(Features/TinyMce): load from single config file, remove feature options * chore(Components/BlockWysiwyg): remove wrong files after rebase * refactor(Features/TinyMce): remove customToolbar value * refactor(Features/TinyMce): move getConfig calls outside separate functions and remove now unneeded * refactor(Features/TinyMce): shorten getBlockFormats function (and make it work again) * docs(Features/TinyMce): adjust code comments * refactor(Features/TinyMce): use array_map in toolbar filter * docs(Features/TinyMce): remove unnecessary comment (already explained in readme) * docs(Features/TinyMce): adjust readme to reflect current state of the feature removed editor config section because it doesn't explain everything correctly
- Loading branch information
Dome
authored and
Doğa Gürdal
committed
May 18, 2017
1 parent
238eb09
commit faeebb7
Showing
4 changed files
with
216 additions
and
177 deletions.
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,149 +1,87 @@ | ||
| # TinyMCE (Flynt Feature) | ||
|
|
||
| Cleans up TinyMCE Buttons to show all relevant buttons on the first bar. | ||
|
|
||
| ### Editor Toolbar | ||
|
|
||
| The MCE Buttons that show up by default are specified by the `mce_buttons` filter in `functions.php` file. | ||
| You can modify that filter for all the Wysiwyg toolbars (all over your project). | ||
|
|
||
| ```php | ||
| <?php | ||
|
|
||
| // First Bar | ||
|
|
||
| add_filter('mce_buttons', function ($buttons) { | ||
| return [ | ||
| 'formatselect', | ||
| 'styleselect', | ||
| 'bold', | ||
| 'italic', | ||
| 'underline', | ||
| 'strikethrough', | ||
| '|', | ||
| 'bullist', | ||
| 'numlist', | ||
| '|', | ||
| 'outdent', | ||
| 'indent', | ||
| 'blockquote', | ||
| 'hr', | ||
| '|', | ||
| 'alignleft', | ||
| 'aligncenter', | ||
| 'alignright', | ||
| 'alignjustify', | ||
| '|', | ||
| 'link', | ||
| 'unlink', | ||
| '|', | ||
| 'forecolor', | ||
| 'wp_more', | ||
| 'charmap', | ||
| 'spellchecker', | ||
| 'pastetext', | ||
| 'removeformat', | ||
| '|', | ||
| 'undo', | ||
| 'redo', | ||
| 'wp_help', | ||
| 'fullscreen', | ||
| 'wp_adv', // toogle second bar button | ||
| ]; | ||
| }); | ||
|
|
||
| // Second Bar | ||
| add_filter('mce_buttons_2', function ($buttons) { | ||
| return []; | ||
| }); | ||
| Cleans up TinyMCE Buttons to show all relevant buttons on the first bar. Adds an easy to configure way to change these defaults (via JSON file). | ||
|
|
||
| ## Updating global TinyMce settings using the JSON config | ||
| By updating the `Features/TinyMce/config.json` file you can easily add new **Block Formats**, **Style Formats** and **Toolbars** for all Wysiwyg editors in your project. | ||
|
|
||
| ## Editor Toolbars | ||
|
|
||
| The MCE Buttons that show up by default are specified by the `toolbars` section in the `Features/TinyMce/config.json` file. | ||
| You can modify the settings for all Wysiwyg toolbars (all over your project). | ||
|
|
||
| ```json | ||
| { | ||
| "toolbars": { | ||
| "default": [ | ||
| [ | ||
| "formatselect", | ||
| "styleselect", | ||
| "bold", | ||
| "italic", | ||
| "underline", | ||
| "strikethrough", | ||
| "|", | ||
| "bullist", | ||
| "numlist", | ||
| "|", | ||
| "link", | ||
| "unlink", | ||
| "|", | ||
| "wp_more", | ||
| "pastetext", | ||
| "removeformat", | ||
| "|", | ||
| "undo", | ||
| "redo", | ||
| "fullscreen" | ||
| ] | ||
| ] | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| Do your modifications there by adding/deleting the buttons you need. | ||
| You can also reactivate the second bar if needed. | ||
|
|
||
| To show the toggle visibilty button of the Second Bar you need to add the this button to the __First Bar__ `'wp_adv'` | ||
| To show the toggle visibilty button of the Second Bar you need to add this button to the __First Bar__ `'wp_adv'` | ||
|
|
||
| NB: If you want to change the toolbar specifically to one Wysiwig acf field, check out the readme file of the Wysiwyg component for the instructions. | ||
| You can call any toolbar defined in this section inside your ACF configuration in lowercase: | ||
|
|
||
| ### Block Formats Configuration | ||
| **Example**:<br> | ||
| `"toolbar": "customtoolbar"` | ||
|
|
||
| You can configure the block formats in the `'formatselect'` button. | ||
| ## Block Formats | ||
|
|
||
| ```php | ||
| <?php | ||
| You can configure the block formats in the `blockformats` section in the `Features/TinyMce/config.json` file. | ||
|
|
||
| add_filter('tiny_mce_before_init', function($init) { | ||
| $init['block_formats'] = 'Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Address=address;Pre=pre'; | ||
| return $init; | ||
| }); | ||
| ```json | ||
| { | ||
| "blockformats": { | ||
| "Paragraph": "p", | ||
| "Heading 1": "h1", | ||
| "Heading 2": "h2", | ||
| "Heading 3": "h3", | ||
| "Heading 4": "h4", | ||
| "Heading 5": "h5", | ||
| "Heading 6": "h6" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### Editor Styles | ||
|
|
||
| You can also create new **styles**, globally by modifying the TinyMce Feature, by adding the `styleselect` pulldown menu to the button list: | ||
|
|
||
| ```php | ||
| <?php | ||
|
|
||
| add_filter('mce_buttons', function ($buttons) { | ||
| return [ | ||
| 'formatselect', | ||
| 'styleselect', | ||
| 'bold', | ||
| 'italic', | ||
| 'underline', | ||
| 'strikethrough', | ||
| '|', | ||
| 'bullist', | ||
| 'numlist', | ||
| '|', | ||
| 'link', | ||
| 'unlink', | ||
| '|', | ||
| 'wp_more', | ||
| 'pastetext', | ||
| 'removeformat', | ||
| '|', | ||
| 'undo', | ||
| 'redo', | ||
| 'fullscreen', | ||
| ]; | ||
| }); | ||
| ## Editor Styles | ||
|
|
||
| You can also create new **styles** globally, but first you need the `styleselect` in the active toolbar to be able to register your own custom styles. | ||
| Once that it is done, you can add custom styles simply by editing the `styleformats` section: | ||
|
|
||
| ```json | ||
| { | ||
| "styleformats": [ | ||
| { | ||
| "title": "Button Primary", | ||
| "classes": "a.btn.btn-primary", | ||
| "selector": "a" | ||
| } | ||
| ] | ||
| } | ||
| ``` | ||
|
|
||
| You need the `styleselect` in place to be able to register your own custom styles. | ||
| Once that it is done, use the `tiny_mce_before_init` filter to build your configuration parameters which you will inject your custom styles: | ||
|
|
||
| ```php | ||
| <?php | ||
|
|
||
| add_filter('tiny_mce_before_init', function($init_array) { | ||
| $style_formats = array( | ||
| array( | ||
| 'title' => 'Highlight Text', | ||
| 'selector' => 'p', | ||
| 'classes' => 'primary-font' | ||
| ), | ||
| array( | ||
| 'title' => 'Brand Colour (Turquoise)', | ||
| 'inline' => 'span', | ||
| 'classes' => 'color-highlight' | ||
| ) | ||
| ); | ||
| $init_array['style_formats'] = json_encode($style_formats); | ||
| return $init_array; | ||
| }); | ||
| ``` | ||
|
|
||
| ### Editor Stylesheet | ||
|
|
||
| You can link a custom stylesheet to the TinyMce editor with the `add_editor_style` function. | ||
|
|
||
| Go to the **TinyMce Feature** `functions.php` file: | ||
|
|
||
| ```php | ||
| <?php | ||
|
|
||
| add_editor_style('Features/TinyMce/customEditorStyle.css'); | ||
| ``` | ||
|
|
||
| Call the `add_editor_style` function and pass as a parameter your stylesheet file path (that we called `customEditorStyle.css` here). This file must be present inside this `TinyMce` feature. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| { | ||
| "blockformats": { | ||
| "Paragraph": "p", | ||
| "Heading 1": "h1", | ||
| "Heading 2": "h2", | ||
| "Heading 3": "h3", | ||
| "Heading 4": "h4", | ||
| "Heading 5": "h5", | ||
| "Heading 6": "h6" | ||
| }, | ||
| "styleformats": [ | ||
| { | ||
| "title": "Button Primary", | ||
| "classes": "a.btn.btn-primary", | ||
| "selector": "a" | ||
| } | ||
| ], | ||
| "toolbars": { | ||
| "default": [ | ||
| [ | ||
| "formatselect", | ||
| "styleselect", | ||
| "bold", | ||
| "italic", | ||
| "underline", | ||
| "strikethrough", | ||
| "|", | ||
| "bullist", | ||
| "numlist", | ||
| "|", | ||
| "link", | ||
| "unlink", | ||
| "|", | ||
| "wp_more", | ||
| "pastetext", | ||
| "removeformat", | ||
| "|", | ||
| "undo", | ||
| "redo", | ||
| "fullscreen" | ||
| ] | ||
| ], | ||
| "full": [ | ||
| [ | ||
| "formatselect", | ||
| "styleselect", | ||
| "bold", | ||
| "italic", | ||
| "underline", | ||
| "blockquote", | ||
| "|", | ||
| "bullist", | ||
| "numlist", | ||
| "|", | ||
| "link", | ||
| "unlink", | ||
| "|", | ||
| "pastetext", | ||
| "removeformat", | ||
| "|", | ||
| "undo", | ||
| "redo", | ||
| "fullscreen" | ||
| ] | ||
| ], | ||
| "basic": [ | ||
| [ | ||
| "bold", | ||
| "italic", | ||
| "underline", | ||
| "blockquote", | ||
| "bullist", | ||
| "numlist", | ||
| "alignleft", | ||
| "aligncenter", | ||
| "alignright", | ||
| "undo", | ||
| "redo", | ||
| "link", | ||
| "unlink", | ||
| "fullscreen" | ||
| ] | ||
| ] | ||
| } | ||
| } |
Oops, something went wrong.