你的位置:首页 > 网页设计

[网页设计]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,双方在事件发生时互相调用。