TinyMCE custom add image plug-in, tinymce custom plug-in

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.