TinyMCE custom add image plug-in, tinymce custom plug-in
Requirements:
Insert an image in the Rich Text Editor. The image is from the image library that you can upload on your own.
You can use the built-in tinyMCE plug-in to insert images. This image plug-in requires users to enter the image url.
I want to come and think about it. Although it was the first phase of the internal management platform product, it was too low to do this as a 21 st century program, and I was afraid that I would be surrounded by my colleagues, I still looked at the tinyMCE plug-in documentation and the official image plug-in.
Plugin. js
tinymce.PluginManager.add('imageSelector', function(editor, url) { // Add a button that opens a window editor.addButton('imageSelector', { icon: 'image', tooltip:"select image from image lib", onclick: function() { editor.settings.imageSelectorCallback(function(r){ console.log('inserting image to editor: '+ r); editor.execCommand('mceInsertContent', false, ''); }); } });});
After writing and testing, I thought it was quite simple. I just needed execCommand to insert the image.
I was worried that the image scaling function was implemented by the image itself. After the test, I found that I don't have to worry about it. The inserted image can be scaled and adjusted!
Call the js of the page
Var imageSelector;
Var imageSelectedCallback = null;
Function showImageSelector (cb ){
ImageSelectedCallback = cb;
ImageSelector = new ImageSelector ('# imageSelectorDiv', {}, function (type, data) {// select a pop-up window for initializing the image
});
$ ('# ImageSelectorPop'). modal ({keyboard: true, backdrop: 'static '});
}
Function insertImage (){
If (imageSelector. selectedItems. length = 0)
Return;
ImageSelectedCallback (imageSelector. selectedItems [0]. url); // call the internal callback of the plug-in to insert the image to the editor.
$ ('# ImageSelectorPop'). modal ('hide ');
}
Tinymce. init ({selector: '. richeditor', width: 820, height: 200, plugins: ['advlist autolink lists linkImageSelectorHr ', 'visualblocks visualchars Code', 'textcolor colorpicker textpattern'], toolbar: 'styleselect | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outigindent link |ImageSelector', ImageSelectorCallback: showImageSelector, // callback method after clicking the image button in the editor setup: function (editor) {editor. on ('init ', function (e) {// tinyMCE events completed during initialization tinyMCE. editors [0]. setContent ('<%-topic. content %> '); // set the edited content });}});
Basically, both the external and internal interfaces of the plug-in retain a callback from the other party. Both parties call each other when an event occurs.