tinyMCE自定义添加图片插件

最新推荐文章于 2023-09-28 15:05:13 发布

weixin_30735745

最新推荐文章于 2023-09-28 15:05:13 发布

阅读量780

点赞数

原文链接：http://www.cnblogs.com/jasonxuli/p/5127826.html

版权

需求：

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

本来可以用比较恶心的方式，也就是直接用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%>');  // 设置之前编辑的内容
                });
            }
        });