my vue editor

my-vue-editor

Un editor de texto rico basado en Vue2.x
中文文档

Manifestación

Haga clic aquí para ver la demostración
Más demostración, consulte el directorio de ejemplo

Introducción

Nuestro editor se basa en el desarrollo secundario Vue-HTML5-editor. Gracias a su autor Peaktai por proporcionar un complemento de editor de texto rico conciso, sobre la base del cual hemos reescrito el método nativo y extendido la funcionalidad.

Instalar

 npm install my - vue - editor

Introducido como un complemento

 import Vue from 'vue'
import myVueEditor from 'my-vue-editor'
Vue . use ( myVueEditor , options )

Introducción global

 < script src =" serverpath/vue.js " > </ script >
< script src =" serverpath/dist/my-vue-editor.js " > </ script >

Instalado por la variable global myVueEditor

 Vue . use ( myVueEditor , options )

Usar

 < my-vue-editor :content =" content " @change =' ctnChange ' @imageUpload =' imageUpload ' > </ my-vue-editor > 

Configuración

Elementos	Tipo	Descripción
nombre	Cadena	Nombre del componente personalizado, el valor predeterminado es my-vue-editor
módulos	Formación	Los módulos deben usar
íconos	Objeto	Cubriendo el icono del módulo especificado
comandos	Objeto	Comando personalizado
atajo	Objeto	Atajo personalizado
Extendmódulos	Formación	Módulo personalizado
Cualquier nombre de módulo incorporado	Objeto	Sobrescribir las propiedades del módulo incorporado correspondiente

ejemplo

 Vue . use ( myVueEditor , {
  // Overlay built-in module's icon
  icons : {
    image : 'iui-icon iui-icon-pic' ,
    indent : 'iui-icon iui-icon-insert'
  } ,
  // Modules in use
  modules : [
    'font' ,
    'bold' ,
    'italic' ,
    'underline' ,
    'linethrough' ,
    'ul' ,
    'indent' ,
    'align' ,
    'image' ,
    'quote' ,
    'todo' ,
    // This is a custom module
    'customSave'
  ] ,
  // Overlay image module's configuration
  image : {
    maxSize : 5120 * 1024 ,
    imgOccupyNewRow : true ,
    compress : {
      width : 1600 ,
      height : 1600 ,
      quality : 0.8
    }
  } ,
  // Overlay font module's configuration
  font : {
    config : {
      'xx-large' : {
        fontSize : 6 ,
        name : 'H1'
      } ,
      'medium' : {
        fontSize : 3 ,
        name : 'H2'
      } ,
      'small' : {
        fontSize : 2 ,
        name : 'H3'
      } ,
      default : 'medium'
    } ,
    // Modify the font module's module inspect mechanism to inspect via style and tag name
    inspect ( add ) {
      add ( 'style' , {
        fontSize : [ 'xx-large' , 'x-large' , 'large' , 'medium' , 'small' ]
      } ) . add ( 'tag' , 'font' )
    }
  } ,
  // Overlay ul module's configuration
  ul : {
    // When the ul module is inspected, disabled all but itself
    exclude : 'ALL_BUT_MYSELF' ,
    // When the ul module is clicked, execute the following method
    handler ( rh ) {
     console . log ( 'i am ul!' )
     rh . editor . execCommand ( 'insertUnorderedList' )  
    }
  } ,
  // When the ul module is inspected, disabled image, todo and ul module
  quote : {
    exclude : [ 'image' , 'todo' , 'ul' ]
  } ,
  // Customize an command named getAllTexts that prints out all the text nodes under the current range object
  commands : {
    getAllTexts ( rh , arg ) {
      console . log ( rh . getAllTextNodeInRange ( ) )
    }
  } ,
  shortcut : {
    // Custom a shortcut key, when you press the command + s, execute the save function
    saveNote : {
      metaKey : true ,
      keyCode : 83 ,
      handler ( editor ) {
        save ( )
      }
    }
  } ,
  // Customize a module, a alert pops up when you click on the module icon
  extendModules : [ {
     name : 'smile' ,
     icon : 'iui iui-icon-smile'
     handler ( rh ) {
      alert ( 'smile~~' )
     }
  } ]
} ) 

Evento

Nombre del evento	Descripción
cambiar	Activar cuando el contenido del editor cambia, el parámetro son datos de contenido actualizado
Imageupload	Desencadenar Al cargar imágenes, los parámetros incluyen los datos correspondientes de la imagen, reemplazarRCAFTERUPLOADFINISH: Se usa para reemplazar el atributo SRC de IMG desde el formato base64 a la URL devuelta por el servidor cuando la carga es exitosa） deleteimgwhenuploadfail: se usa para eliminar la imagen actual cuando falla la carga

Modificar el módulo incorporado

Agregue un parámetro con el nombre de un módulo incorporado como clave, cubrirá las propiedades originales del módulo incorporado (consulte todos los módulos incorporados y sus elementos de configuración en el directorio SRC/Módulos）

Tome el módulo de imagen como ejemplo

 Vue . user ( myVueEditor , {
  image : {
    // Modify the image module's icon
    icon : 'iui-pic' ,
    // Cover the original compression parameters, so that the image is not compressed when uploaded
    compress : null ,
    // Can not upload the same image repeatedly
    canUploadSameImage : false
  }
} ) 

Módulo cutom

Extienda el módulo con el elemento de configuración ExtendModules Proporcionamos algunos elementos de configuración del módulo común

Artículo	Tipo	Descripción
nombre	Cadena	Nombre del módulo
icono	Cadena	El nombre de clase del icono del módulo, el icono FontaWeome se usa de forma predeterminada
excluir	Matriz de cuerdas	módulos deshabilitados Cuando se inspecciona el módulo actual Cuando el valor es 'todos' significa que deshabilitar todos los módulos incluyen el módulo de corriente Cuando el valor es'all_but_myself ', significa deshabilitar todos los módulos pero módulo actual Cuando el valor es un tipo de matriz, el nombre del módulo de entrada se desactivará
inspeccionar	Función	Inspeccionar el módulo, cuando el cursor está en la lista, se resalta el módulo de lista, es decir, se inspecciona el módulo de lista, que se basa en su etiqueta UL como prueba El primer argumento de la función es un método llamado Add, que llamó a agregar la base de inspección del módulo. Cuando hay múltiples bases de inspección, llame al encadenamiento El primer parámetro del método ADD indica qué ruta prueba. La opcional es 'etiqueta' 'estilo' y 'atributo' Cuando el parámetro 1 es 'etiqueta', el parámetro 2 pasa en una cadena de nombre de etiqueta Cuando el parámetro 1 es 'estilo', el parámetro 2 es un objeto con nombre de estilo como clave y stylevalue como valor. NOTA STYLENAME Use el formulario de joroba （EX: FontSize）））））））））））））））））））））））））））））））））））））））））） — Cuando el parámetro 1 es 'atributo', el parámetro 2 es un objeto cuyo clave es el nombre del atributo y el valor del atributo es el valor, y tenga en cuenta que si se desea un valor, pase en '' （ex ： add ('atributo', {'data-todo': ''})）
entrenador de animales	Función	Qué hacer cuando hace clic en el módulo El parámetro 1 es una instancia de manejo de rango, a través de la cual puede obtener la instancia VUE del editor actual y el método para operar el rango No recomendamos el rango operativo directamente en el controlador, pero debemos encapsular la acción de rango como un comando, llamando al comando a través del método ExecCommand en la instancia del editor en el controlador
pestaña	Instancia de vue	Los módulos convencionales usan controladores para manejar los clics, y si desea implementar la interfaz de usuario (lista desplegable de módulos de fuente) o lógica más compleja (conmutación de izquierda a derecha de módulos alineados), use pestaña
inicio	Función	Corresponde al ciclo de vida del componente del editor creado, el parámetro 1 es la instancia del editor. Tenga en cuenta que el método ExecCommand no se puede usar en este momento
montado	Función	Corresponde al ciclo de vida del componente del editor montado, el parámetro 1 es la instancia del editor.
actualizado	Función	Corresponde al ciclo de vida del componente del editor actualizado, el parámetro 1 es la instancia del editor.
destruido	Función	Corresponde al ciclo de vida del componente del editor BeForDestroy, el parámetro 1 es la instancia del editor.