Tinymce: Create a custom Toolbar outside of the editor as shown in the diagram

Question

Please click on the link to view the UX I am trying to achieve

I need some direction on how do I go about achieving the above. The idea is to show the plus icon next to cursor and user can easily click on it and insert items of their choice. I feel it's a great UX!

Any help is highly appreciated!

Answer 1

You can use the .setContent() method to programmatically add content to the editor: https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/#setcontent https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#setcontent

Here is a Tiny Fiddle demonstration: http://fiddle.tinymce.com/5vhaab

In that Fiddle, I have also disabled the menubar and toolbar by setting them to false. https://www.tiny.cloud/docs/configure/editor-appearance/#menubar https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar

Additionally, you can programmatically trigger other editor commands from outside of the editor itself using the .execCommand() method: https://www.tiny.cloud/docs/api/tinymce/tinymce.editorcommands/#execcommand

Here is a list of available commands: https://www.tiny.cloud/docs/advanced/editor-command-identifiers/