Vue uses Ueditor rich text configuration

UEditor is a javascript rich text editor of Baidu, with powerful functions, the following is the introduction process in the vue project

1. Download vue-ueditor-wrap:  

Note: Downloading this plug-in is easy to use for vue, has the advantage of two-way data binding, and the operation is relatively convenient.

The first step, first download dependencies

npm and vue-ueditor-wrap -S

The second step is to introduce it into the project (I introduced it to the required page, there is no global introduction)

import VueUeditorWrap from 'vue-ueditor-wrap'

The third step is to register the component

import VueUeditorWrap from 'vue-ueditor-wrap'

The fourth step is to use components in the template

<template>
  <div>
    <VueUeditorWrap/>
  </div>
</template>

2. Download the official compressed package provided by ueditor:

  Download address: https://ueditor.baidu.com/website/download.html

3. Put the downloaded official compressed package under static or public:

If the project uses vue-cil2.0 version, it will be placed in static, if it is vue-cil3.0 version, it will be placed in the public folder

 

 4, modify the reference

<VueUeditorWrap :config="editorConfig" v-model="formData.Remark" />

editorConfig: { 
        autoHeightEnabled: false , // The compiler is not automatically propped up by the content 
        initialFrameHeight: 350 , // The initial container height 
        initialFrameWith: " 100% " , 
        serverUrl: " /api/ueditor/net/controller.ashx " , // Upload file address 
        UEDITOR_HOME_URL: " / UEditor / " , // Storage path of UEditor resource file 
      },

At this point, the configuration is complete

In view of the second entry page will report " ueditor TypeError: Cannot set property 'innerHTML' of null" "

This problem can be modified by ueditor source code ueditor.all.js

 UE.getEditor = function(id, opt) {

      // The following is the source code. First go to the page to find if there is an instantiated editor object,

      // If not, create a new editor.

      // Otherwise, directly return the editor found on the page.

      // Reminiscent of the previous error Cannot set property 'innerHTML' of null (instead of undefined, and the console does not have output editor 2 instantiation completed),

      // Then there is only one truth! That is, when you come to the editor page once, the editor already exists, and the existing editors will naturally not trigger the ready event, so naturally the setContent in the ready event cannot be triggered to be uninstalled. Incident.

      // var editor = instances[id];

      // if (!editor) {

      //     editor = instances[id] = new UE.ui.Editor(opt);

      //     editor.render(id);

      // }

      // return editor;

      // The following is a modified one to solve the problem: 'Cannot set property' innerHTML 'of null' generates a brand-new ueditor object directly according to the id transmitted by js

      UE.delEditor(id);

      var editor = new UE.ui.Editor (opt);

      editor.render(id);

      return editor;

    };

    UE.delEditor = function(id) {

      var editor;

      if ((editor = instances[id])) {

        editor.key && editor.destroy();

        delete instances[id];

      }

    };