Tinymce: How to display a popover dynamic toolbar; -
i have following simple script html:
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script> <script src="//cdn.tinymce.com/4/tinymce.min.js"></script> <!-- tinymce dependency --> <script> tinymce.pluginmanager.add('imageclick',(editor)=>{ editor.on('click',function(event){ const element = event.target; //add code open internal toolbar }) }) tinymce.init({ selector:'textarea', skin: 'lightgray', theme: 'modern', plugins: 'link image paste autolink media lists imageclick', toolbar: ['bold italic underline | alignleft aligncenter alignright alignjustify | link media image | undo redo '], }); </script> </head> <body> <textarea>next, free tinymce cloud api key!</textarea> </body> </html>
now want display custom toolbar on image custom provided buttons. similar https://www.tinymce.com/docs/plugins/imagetools/ have no idea how that.
do have idea how programmatically create custom toolbars on specific html elements in tinymce?
the functionality provides editor.addcontexttoolbar
can find related documentation on:
https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#addcontexttoolbar
in other words recomended way develop plugin is:
tinymce.pluginmanager.add('imageclick',function(editor){ var lastselectedimage=undefined; function addevents() { editor.on('click', function (e) { if (lastselectedimage && lastselectedimage.src != e.element.src) { lastselectedimage = undefined; } // set lastselectedimage if (iseditableimage(e.element)) { lastselectedimage = e.element; } }); } function iseditableimage(img) { var selectormatched = editor.dom.is(img, 'img:not([data-mce-object],[data-mce-placeholder])'); return selectormatched; } function addtoolbars() { var toolbaritems = editor.settings.myimagetools_toolbar; if (!toolbaritems) { toolbaritems = 'alignleft aligncenter alignright alignjustify'; } editor.addcontexttoolbar( iseditableimage, toolbaritems ); } addtoolbars() addevents() })
based on source code of imagetools plugin.
tip:
you can have access plugin source code download dev package of tinymce:
unziping && ^location_you_unziped/tinymce/src/plugins^
in order have , base plugins on ones tinymce provides.
Comments
Post a Comment