umeditor stepping on the pit

umeditor is the mini version of Baidu's rich text editor ueditor. It is lightweight and has good functions. The advantage is that it loads quickly, and it seems to be only 183k. But this maintenance is really not very good,

Or no one maintains it at all, and github has mentioned many issues that no one has solved.

Let's talk about the main pits encountered in the process of use

1. Loading order problem when loading with requireJs

First, umeditor.js needs to be written by define

define("umeditor", ["umeditor.config", "jquery"], function() {
    /*!
     * UEditor Mini version
     * version: 1.2.2
     * build: Wed Mar 19 2014 17:14:25 GMT+0800 (China Standard Time)
     */

    (function($){

        UMEDITOR_CONFIG = window.UMEDITOR_CONFIG || {};
        window.UM = {
            plugins : {},

            commands : {},

            I18N : {},

            version : "1.2.2"
        };

....................................

})

umeditor.config.js configuration root path

/**
     * Editor resource file root path. What it means is: take the editor instantiated page as the current path, and point to the path of the editor resource file (ie, the folder such as dialog).
     * In view of the various path problems that many students have when using the editor, it is strongly recommended that you use "relative path relative to the root directory of the website" for configuration.
     * "relative path relative to the root directory of the website" is a path starting with a slash in the form of "/myProject/umeditor/".
     * If there are multiple pages in the site that are not at the same level and need to instantiate the editor and reference the same UEditor, the URL here may not apply to the editor of each page.
     * Therefore, UEditor provides a root path that can be configured separately for editors on different pages. Specifically, write the following code at the top of the page that needs to instantiate the editor. Of course, you need to make the URL here equal to the corresponding configuration.
     * window.UMEDITOR_HOME_URL = "/xxxx/xxxx/";
     */
    var curWwwPath = window.document.location.href;
    var pathName = window.document.location.pathname;
    var pos = curWwwPath.indexOf(pathName);
    var localhostPath = curWwwPath.substring(0, pos);
    //The absolute path where the file is located is used when accessing static resource files
    window.UMEDITOR_HOME_URL=localhostPath+"/core/util/umeditor/";

　However, an error will be reported after packaging. Here you can add i18n and other things to umeditor.js. If some things are not used, such as link, video, img, map can be commented out

then add dependencies

paths: {
        //required
        "umeditor": "../../../../../core/util/umeditor/umeditor",
        "dialog": "../../../../../core/service/dialog",
        "umeditor.config": "../../../../../core/util/umeditor/umeditor.config"
    },
 shim: {
        //This part is that the public plugin must be loaded or the plugin that is used very frequently
        "umeditor":{
            deps: ["umeditor.config", "jquery"],
        }
    }

　2. Initialization, the second time it comes in, it is gone

UM.delEditor('editor');
  $scope.um = UM.getEditor('editor');

　　This is because when calling UE.getEditor('_editor') to initialize UEditor, it is first obtained from the container instances where the editor is placed, and an Editor is instantiated without an instance.

3. The editor does not render when the window pops up

Solution: When the pop-up window pops up, add a timer to delay loading the editor

umeditor stepping on the pit

Guess you like