Support Forum
I'm trying to implement visual editor field inside clonable group like this:
<?php
$meta_boxes[] = [
'title' => 'Текстовые триггеры',
'id' => 'text-trigger',
//'description' => 'A custom hero content block',
'type' => 'block',
'icon' => 'awards',
'category' => 'tsm',
'context' => 'side',
'render_template' => get_template_directory() . '/gutenberg/text-trigger.php',
'fields' => [
[
'id' => 'triggers',
'type' => 'group',
'name' => 'Контент',
'clone' => true,
'sort_clone' => true,
'add_button' => '+',
'collapsible' => true,
'group_title' => 'Элемент {#}',
'save_state' => true,
'fields' => [
[
'id' => 'icon',
'type' => 'single_image',
'name' => 'Иконка',
],
[
'id' => 'text',
'type' => 'wysiwyg',
'name' => 'Текст',
'options' => [
'media_buttons' => false,
'teeny' => true,
'textarea_rows' => 10,
],
],
]
],
],
];
And that's what i get (different bugs on load, sorting and adding new):
Hi Jackky, let me check it and will get back to you soon.
Also I have noticed, that opts like 'teeny', my custom hooks on tinymce, like custom formst select, buttons and styles doesn't take effect inside getenberg block. TinyMCE rendering as is. And this issue not only inside clonable group.
Hi Jackky,
I found the problems. It's kind of a complicated thing in Gutenberg, since the editor is generated on demand using JavaScript. So, some PHP options won't be applied. And in that case, the default settings of the editor is applied. I'm afraid I don't have a good solution for it at the moment.
I've checked now how is working classic editor standart block, and it applying all the hooks and styles from my theme
Hello! I'm just wondering: still no solutions for applying custom hooks for tinymce?
Hi Jack,
The developer team is trying to research and fix the issue with the options of the WYSIWYG field in a block. I will let you know if there is any information.
It's not just about options, it's about custom filters like 'tiny_mce_before_init', 'teeny_mce_buttons' etc.
Let me know, please, then get any results. Waiting for fixing it, thank you!
Hi again!
Guys, I'm very-very (really a lot) upset about so log time to find a solution for this. About a year passed, but you didn't make a fix of this issue. I'm really wondering why, because it feels, like you have very low priority to modify and update mb-blocks extension, despite the fact that, in theory, it should be one of the main extension in your bundle stack. I'm really willing you will change your mind about making mb-blocks the most modern and powerful solution of easy-block-building-api's, because such expectations from the product prompted me to buy lifetime developer bundle. Please do not disappoint me and my fellow developers.
As I need ability to customize tinymce editor a lot, yesterday I decide to dive into this problem, trying to figure out where the problem is. I have spend several hours, and finally made a new field, based on default 'wysiwyg' field with some custom improvements and changes. The result works perfect for me and solving all my problems and tasks about that. I really hope that you will review my solution of the problem and fix it in the plugin itself.
NOTE: The code is bad, not refactored and not tested for whole cases, but it works
Here my solution:
You should enqueue modified wysiwyg.js script to the admin area, like as separate file either an inline code. NOTE: the 'rwmb' script dependency handle is required
Here's the js code: https://pastebin.com/kJkCazm5
Next you should register a new extended rwmb field type, that based on default wysiwyg.php class. Just paste the code below into your functions.php theme file, or include it in some other way:
https://pastebin.com/D5R7y0zq
Now you are able to create a new type of field - 'jackky-tinymce', below is my test example (sorry for some weird russian words :)):
[
'id' => 'text',
'type' => 'jackky-tinymce',
'name' => 'Jackky TinyMCE',
'settings' => [ // NOTE: I replaced the 'options' key with the 'settings' key, that contains 2 child keys: 'tinymce', that contains an array of tinymce settings, and 'quicktags' if you need to modify the the textmode tag buttons
'tinymce' => [
'media_buttons' => false,
'drag_drop_upload' => false,
'content_css' => get_template_directory_uri() . '/assets/css/tinymce.min.css', // you can load your custom css file to style the tinymce content like on frontend
'toolbar1' => 'styleselect,bold,italic,bullist,numlist,link,unlink,fullscreen', // set different tinymce settings as usual, like a toolbars buttons
'toolbar2' => 'alignleft,aligncenter,alignright,undo,redo',
'style_formats' => [ // define any nested settings as arrays, like 'style_formats' example
[
'title' => 'Имитация strong',
'inline' => 'span',
'classes' => 'strong'
],
[
'title' => 'Имитация italic',
'inline' => 'span',
'classes' => 'em'
],
[
'title' => 'Тонкий',
'inline' => 'span',
'classes' => 'b300'
],
[
'title' => 'Полу-жирный',
'inline' => 'span',
'classes' => 'b500'
],
[
'title' => 'Экстра-жирный',
'inline' => 'span',
'classes' => 'b900'
],
[
'title' => 'Имитация h1',
'block' => 'div',
'classes' => 'h1'
],
[
'title' => 'Имитация h2',
'block' => 'div',
'classes' => 'h2'
],
[
'title' => 'Имитация h3',
'block' => 'div',
'classes' => 'h3'
],
],
],
'quicktags' => [
'buttons' => 'strong,em,u,link,ul,ol,li'
]
],
]
The result of all of this stuff
With a 'side' context of metabox:
With a standart context:
Also you should add some css to your admin, if you make this field clonable:
.rwmb-jackky-tinymce-clone
{
padding-top: 20px;
}
Thats all. Feel free to use my solution.
Hi Jackky,
Thanks for your code. You did a nice trick on adding a settings param to the field settings and use it to parse on JS side.
Maybe that's that way to go, since in Gutenberg, the hooks for wp_editor
function don't work. I'll investigate into your code more today and try to make an improvement to the current codebase.
Hi Jackky,
I've merged your code into this commit. I don't use another param settings
, since the wp_editor
function already supports tinymce
and quicktag
. So now you can register custom tinyMCE and quicktag settings like this.
This way, it works in both Gutenberg (blocks) and non-Gutenberg environment.
Let me know what you think.
Thanks,
Anh
I think you should make some filters for default settings of tinyMCE. Like as for me: I'm using in most cases very "tinyfied" tinyMCE editor and for cases like this I'm writing some simple helper functions, like 'mb_tinymce_defaults( $extend = false )', that is returns an array of defaults, merged with $extend array if it set