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  height="42" width="42" src='/images/loading.gif' data-original="' + r + '"/>');      });    }  });});

function insertImage(){ imageSelectedCallback(imageSelector.selectedItems[0].url); // 调用插件内部回调把图片插入到编辑器中

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：tinyMCE自定义添加图片插件

关键词：图片