Ueditor试炼之修改上传图片功能

富文本编辑器真是一个老生常谈的话题，对于我们这种小公司，没有办法自己去重新写一个，也没必要去造这种轮子，所以就挑了一个ueditor来放进项目里。

ueditor自带的上传图片功能是和后端耦合在一起的，对于各家公司的项目有前后分离的情况，并不适用，所以就只能把ueditor的源码改掉。

下面就介绍下修改上传图片的步骤。

首先，我们要找到

editorui["simpleupload"]

这个方法，方法里定义了ui变量，也就是toolbar里面上传图片的按钮，是一个editorui.Button实例。

var name = 'simpleupload',
    ui = new editorui.Button({
         className:'edui-for-' + name,
         title:editor.options.labelMap[name] || editor.getLang("labelMap." + name) || '',
         onclick: function () {
            console.log(123)
            var ImageUploadService = angular.element(document.body).injector().get('ImageUploadService')
            // 一些操作
            var embed = '<img src="***">';
            editor.execCommand('insertHtml', embed);
            
        },
        theme:editor.options.theme,
         showText:false
 });

之后改掉onClick方法就行了。

公司的框架是Angular，所以还要

angular.element(document.body).injector().get('ImageUploadService')

才能调用到上传图片的service，

在onClick中要定义个img标签的字符串变量，再调用execCommand方法，放进当前editor对象中，才能真正的插入图片。

最后在

editor.addListener('selectionchange', function (type, causeByUi, uiReady) {
    var state = editor.queryCommandState(name);
    if (state == -1) {
         // ui.setDisabled(true);
         ui.setChecked(false);
    } else {
        if (!uiReady) {
            ui.setDisabled(false);
            ui.setChecked(state);
        }
    }
});

要把

ui.setDisabled(true);

这个注释掉，上传图片的禁用逻辑已经和原来ueditor的后端耦合的逻辑不同了。