需求：

在富文本编辑器中插入图片，图片来自用户可以自己上传的图片库。

 

本来可以用比较恶心的方式，也就是直接用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, '');            });        }    });});

 

写完并测试后觉得挺简单的，基本只要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，双方在事件发生时互相调用。