Vue utiliza la configuración de texto enriquecido de Ueditor

UEditor es un editor de texto enriquecido javascript de Baidu, con funciones potentes, el siguiente es el proceso de introducción en el proyecto vue

1. Descargue vue-ueditor-wrap:  

Nota: La descarga de este complemento es fácil de usar para vue, tiene la ventaja del enlace de datos bidireccional y la operación es relativamente conveniente.

El primer paso, primero dependencias de descarga

npm y vue-ueditor-wrap -S

El segundo paso es introducirlo en el proyecto (lo presenté en la página requerida, no hay una presentación global)

importar VueUeditorWrap desde  ' vue-ueditor-wrap '

El tercer paso es registrar el componente.

importar VueUeditorWrap desde  ' vue-ueditor-wrap '

El cuarto paso es usar componentes en la plantilla

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

2. Descargue el paquete comprimido oficial proporcionado por ueditor:

  Dirección de descarga: https://ueditor.baidu.com/website/download.html

3. Coloque el paquete comprimido oficial descargado en estático o público:

Si el proyecto usa la versión vue-cil2.0, se colocará en estática, si es la versión vue-cil3.0, se colocará en la carpeta pública

 

 4, modifique la referencia

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

editorConfig: { 
        autoHeightEnabled: false , // El compilador no está 
        respaldado automáticamente por el contenido initialFrameHeight: 350 , // La altura inicial del contenedor 
        initialFrameWith: " 100% " , 
        serverUrl: " /api/ueditor/net/controller.ashx " , // Dirección del archivo de 
        carga UEDITOR_HOME_URL: " / UEditor / " , // Ruta de almacenamiento del archivo de recursos de UEditor 
      },

En este punto, la configuración está completa

En vista de la segunda página de entrada se informará " ueditor TypeError: No se puede establecer la propiedad 'innerHTML' de nulo" "

Este problema puede ser modificado por el código fuente de ueditor ueditor.all.js

 UE.getEditor = function (id, opt) {

      // El siguiente es el código fuente: primero ve a la página para encontrar si hay un objeto de editor instanciado,

      // Si no, crea un nuevo editor.

      // De lo contrario, devuelve directamente el editor encontrado en la página.

      // Recuerda el error anterior No se puede establecer la propiedad 'innerHTML' de nulo (en lugar de indefinido, y la consola no tiene una instanciación del editor de salida 2 completada),

      // ¡Entonces solo hay una verdad! Es decir, cuando llegas a la página del editor una vez, el editor ya existe, y los editores existentes naturalmente no desencadenarán el evento listo, por lo que naturalmente el setContent en el evento listo no se puede activar para desinstalar Incidente

      // var editor = instancias [id];

      // if (! editor) {

      // editor = instancias [id] = nuevo UE.ui.Editor (opt);

      // editor.render (id);

      //}

      // regresar editor;

      // Lo siguiente es modificado para resolver el problema: 'No se puede establecer la propiedad' innerHTML 'de null' genera un nuevo objeto ueditor directamente de acuerdo con la identificación transmitida por js

      UE.delEditor (id);

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

      editor.render (id);

      editor de retorno;

    };

    UE.delEditor = function (id) {

      editor var;

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

        editor.key && editor.destroy ();

        eliminar instancias [id];

      }

    };