tinyMCE自訂添加圖片外掛程式，tinymce自訂外掛程式

tinyMCE自訂添加圖片外掛程式，tinymce自訂外掛程式

需求：

在富文字編輯器中插入圖片，圖片來自使用者可以自己上傳的圖片庫。

 

本來可以用比較噁心的方式，也就是直接用tinyMCE內建的插入圖片外掛程式來實現。噁心是因為這個圖片外掛程式需要使用者填入圖片的url。

想來想去，雖然是內部管理平台產品1期，但作為一個21世紀的程式猿做這樣的事兒太low了，而且也怕被同事圍毆，還是看了看tinyMCE的外掛程式文檔以及官方的image外掛程式。

 

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, '<img alt="Smiley face" height="42" width="42" src="' + r + '"/>');            });        }    });});

 

寫完並測試後覺得挺簡單的，基本只要execCommand就搞定圖片插入了。

本來還擔心圖片的縮放功能是image自己實現的，測試後發現完全不用擔心了：插入進去的圖片已經可以縮放調整大小了，贊！

 

調用頁面的js

    var imageSelector;
    var imageSelectedCallback = null;
    function showImageSelector(cb){
        imageSelectedCallback = cb;
        imageSelector = new ImageSelector('#imageSelectorDiv', {}, function(type, data){  // 初始化圖片選擇彈窗
        });
        $('#imageSelectorPop').modal({keyboard: true, backdrop: 'static'});
    }

    function insertImage(){
        if(imageSelector.selectedItems.length == 0)
            return ;

        imageSelectedCallback(imageSelector.selectedItems[0].url);   // 調用外掛程式內部回調把圖片插入到編輯器中
        $('#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 | link imageSelector',            imageSelectorCallback: showImageSelector,  // 點擊編輯器上的圖片按鈕後的回調方法            setup: function(editor) {                                  editor.on('init', function(e) {        // tinyMCE初始化完成事件                    tinyMCE.editors[0].setContent('<%-topic.content%>');  // 設定之前編輯的內容                });            }        });

 

基本上是外掛程式外部和內部都保留對方的一個callback，雙方在事件發生時互相調用。