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，雙方在事件發生時互相調用。