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

Source: Internet
Author: User

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.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.