For a long time, cloning WYSIWYG fields is a big trouble. The WYSIWYG field is a WordPress editor field which is built on TinyMCE editor, a very popular rich text editor for the web. It allows you to add content, format the content, insert rich media into the content such as images, videos, audios or any HTML code and even shortcodes added by WordPress plugins. As a WYSIWYG editor, you will see how the content actual look right after you enter it in the editor.
Like other custom fields, WYSIWYG was supported by the Meta Box plugin since the beginning day. But it didn’t have the clone feature as other fields until recently. The clone feature allows users to add more inputs to the current field (in some other plugins, this feature is called repeatable field). This is very useful when you don’t know how many inputs the field should have and you want users to have the option to add more inputs or remove existing ones.
For example, you have a custom post type “book” and you want users to enter the name of chapters for each book. It’s best to have a cloned input for “chapter”.
Back to the WYSIWYG, many users have been requesting the clone feature for WYSIWYG. But we actually didn’t make a good development process. The reasons the clone feature didn’t work for it are so many and here are the main ones:
- The output of WYSIWYG editor is not generated by HTML, but WordPress’s function
- A cloned HTML structure of the editor is created and appended to the DOM. Of course, it doesn’t work right away;
- The HTML IDs and classes of elements (media buttons, toolbar, etc.) are replaced with an appropriated ones;
- The HTML of the editor is removed (it actually is an iframe and couldn’t be just updated to work); and
And it works!
Here is how it looks like:
In order to add clone feature to your WYSIWYG field, simply set
'clone' => true for the field, just like other fields.
If you’re using Group extension, we also made a new update for the extension which supports WYSIWYG in cloned groups as well. So you can have a group of some fields like this for a product in a bundle:
- Title (text)
- Short description (WYSIWYG)
- Image (image_advanced)
And set the group clone if you want to add more products to the bundle. It would work with the version 1.0.6 of the Meta Box Group extension. Please update it if you haven’t done.
Although it took us countless hours of work, but winning a technical challenge is really a good moment in a developer’s life. We hope you enjoy it. And in case you want to add any suggestion or question, please let us know on Github.