TINYMCE Custom Add Image Plugin

Demand:

Insert a picture in the rich text editor from a picture library that users can upload themselves.

Could have been used in a more disgusting way, that is, directly with the TINYMCE to insert the image plug-in to achieve. Nausea is because this image plugin requires the user to fill in the image URL.

Want to go, although is the internal management platform product 1, but as a 21st century program ape do such things too low, but also afraid of being a colleague, or look at TINYMCE plug-in documents and the official image plugin.

Plugin.js

TinyMCE. Pluginmanager.add ('Imageselector‘,function(Editor, url) {//Add a button that opens a windowEditor.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 feel quite simple, basically as long as the execcommand on the picture inserted.

Originally also worried about the image zoom function is the image of its own implementation, after the test found that there is no need to worry about: inserted into the picture has been able to scale the size of the adjustment, like!

Invoke JS on the page

    var imageselector;
    var imageselectedcallback = null;
    function Showimageselector (CB) {
        Imageselectedcallback = CB;
        Imageselector = new Imageselector (' #imageSelectorDiv ', {}, function (type, data) {  //Initialize Picture selection pop-up window
        });
        $ (' #imageSelectorPop '). Modal ({keyboard:true, backdrop: ' Static '});
    }

    function Insertimage () {
        if (ImageSelector.selectedItems.length = = 0)
            return;

        Imageselectedcallback (Imageselector.selecteditems[0].url);   Call the plug-in internal callback to insert a picture into the editor
        $ (' #imageSelectorPop '). Modal (' hide ');
    }

Tinymce.init ({selector:'. Richeditor ', Width:820, Height:200,plugins: [' Advlist autolink lists link imageselector hr,                ' Visualblocks visualchars code ',                ' TextColor colorpicker Textpattern '], toolbar:' Styleselect | ForeColor BackColor | Bold Italic | AlignLeft aligncenter alignright alignjustify | Bullist numlist outdent Indent | LinkImageselector‘,imageselectorcallback: showimageselector,//callback method after clicking the Picture button on the editorSetup:function(editor) {Editor.on (' Init ',function(e) {//TinyMCE initialization Complete event tinymce.editors[0].setcontent (' <%-topic.content%> '));            Set the previously edited content}); }        });

Basically, the plug-in and inside both keep a callback of each other, and both sides call each other when the event occurs.

TINYMCE Custom Add Image Plugin