I have the following simple script with 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 to open the 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, get a free TinyMCE Cloud API key!</textarea>
</body>
</html>
Now I want to display a custom toolbar over the image with some custom provided buttons. Similar to https://www.tinymce.com/docs/plugins/imagetools/ but I have no idea how to do that.
Do you have any Idea how programmatically to create custom toolbars over specific html elements in tinymce?
The functionality that provides that is the editor.addContextToolbar where you can find related documentation on:
https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#addcontexttoolbar
In other words a recomended way to develop your 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 up the 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 the source code of imagetools plugin.
You can have access to plugin source code by download the dev package of tinymce:
Unziping it && look into ^location_you_unziped/tinymce/src/plugins^ in order to have a look and base your plugins over the ones that tinymce provides.