The function of modifying and uploading pictures in the Ueditor trial

The rich text editor is really a common topic. For a small company like us, there is no way to re-write one by ourselves, and there is no need to build this kind of wheel, so we chose a ueditor to put it into the project.

The uploading picture function that comes with ueditor is coupled with the back-end. It is not applicable to the cases where the projects of various companies are separated before and after, so the source code of ueditor can only be changed.

The following describes the steps to modify the uploaded image.

First, we have to find

editorui["simpleupload"]

In this method, the ui variable is defined in the method, that is, the button for uploading pictures in the toolbar, which is an instance of 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')
            // some operations
            var embed = '<img src="***">';
            editor.execCommand('insertHtml', embed);
            
        },
        theme:editor.options.theme,
         showText:false
 });

Then change the onClick method.

The company's framework is Angular, so

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

In order to call the service for uploading pictures,

In onClick, you need to define a string variable of the img tag, and then call the execCommand method and put it into the current editor object to actually insert the picture.

Finally in

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);
        }
    }
});

to put

ui.setDisabled(true);

With this comment out, the disabling logic for uploading images is different from the back-end coupling logic of the original ueditor.