my vue editor

My-Vue-Editor

Um editor de texto rico baseado em vue2.x
中文文档

Demonstração

Clique aqui para ver a demonstração
Mais demonstração, consulte o diretório de exemplo

Introdução

Nosso editor é baseado no desenvolvimento secundário do Vue-Html5-Editor. Graças ao seu autor Peaktai, por fornecer um plug-in conciso do editor de texto rico, com base no qual reescrevemos o método nativo e estendemos a funcionalidade.

Instalar

 npm install my - vue - editor

Apresentado como um plug-in

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

Introdução global

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

Instalado pela variável global MyVueEditor

 Vue . use ( myVueEditor , options )

Usar

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

Configuração

Unid	Tipo	Descrição
nome	Corda	Nome do componente personalizado, o padrão é meu editor my-vue
módulos	Variedade	Os módulos precisam usar
ícones	Objeto	Cobrindo o ícone do módulo especificado
comandos	Objeto	Comando personalizado
atalho	Objeto	Atalho personalizado
estendmodules	Variedade	Módulo personalizado
Qualquer nome de módulo embutido	Objeto	Substitua as propriedades do módulo interno correspondente

exemplo

 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

Nome do evento	Descrição
mudar	Acionar quando o conteúdo do editor muda, o parâmetro está atualizado por dados de conteúdo
ImageUpload	Acionar ao fazer upload de imagens, os parâmetros incluem os dados correspondentes da imagem ， SubstituaRCAfterUploadfinish: Usado para substituir o atributo SRC do IMG do formato Base64 ao URL retornado pelo servidor quando o upload for bem -sucedido) DeleteImgWhenuploadFail: usado para excluir a imagem atual quando o upload falha

Modificar o módulo interno

Adicione um parâmetro com o nome de um módulo embutido como a chave, abordará as propriedades originais do módulo interno (consulte todos os módulos embutidos e seus itens de configuração no diretório SRC/Modules)

Pegue o módulo de imagem como um exemplo

 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

Estender o módulo com o item de configuração do ExtendModules, fornecemos alguns itens de configuração de módulos comuns

Item	Tipo	Descrição
nome	Corda	nome do módulo
ícone	Corda	ClassName do ícone do módulo ， O ícone do Fontawesome é usado por padrão
excluir	Array da string	módulos desativados quando o módulo atual é inspecionado Quando o valor é 'tudo' significa desativar todos os módulos incluem módulo atual Quando o valor é'l_but_myself ', significa desativado todos os módulos, mas o módulo atual Quando o valor é tipo de matriz, o nome do módulo de entrada a ser desativado
inspecionar	Função	Módulo Inspecionar ， Quando o cursor está na lista, o módulo da lista é destacado, ou seja, o módulo da lista é inspecionado, que é baseado em seu rótulo UL como uma base de teste O primeiro argumento à função é um método chamado Add, que chamado para adicionar a base de inspeção do módulo. Quando houver várias bases de inspeção, ligue para o encadeamento O primeiro parâmetro do método Add indica qual caminho para testar. O opcional é 'tag' 'estilo' e 'atributo' Quando o parâmetro 1 é 'tag', o parâmetro 2 passa em uma string de nome de tag Quando o parâmetro 1 é 'estilo', o parâmetro 2 é um objeto com estilenome como chave e estilo de estilo como valor. Nota Stylename Use o formulário da corcunda （Ex: Fontsize） ， Quando houver múltiplos estilos, use a forma de matriz Quando o parâmetro 1 é 'atributo', o parâmetro 2 é um objeto cuja chave é o nome do atributo e o valor do atributo é o valor e observe que, se algum valor for desejado, passe em '' （Ex ： Add ('atributo', {'data-todo': ''})）
manipulador	Função	O que fazer quando você clica no módulo O parâmetro 1 é a instância de manipulador de alcance, através da qual você pode obter a instância do vue do editor atual e o método para operar o intervalo Não recomendamos o intervalo de operação diretamente no manipulador, mas devemos encapsular a ação do alcance como um comando, chamando o comando através do método ExecCommand sob a instância do editor no manipulador
guia	Instância de vue	Os módulos convencionais usam manipuladores para lidar com cliques e, se você deseja implementar a interface do usuário (lista suspensa de módulos de fonte) ou lógica mais complexa (comutação da esquerda para a direita de módulos alinhados), use a guia
init	Função	Corresponde ao ciclo de vida do componente do editor criado, o parâmetro 1 é a instância do editor. Observe que o método ExecCommand não pode ser usado no momento
montado	Função	Corresponde ao ciclo de vida do componente do editor montado, o parâmetro 1 é a instância do editor.
atualizado	Função	Corresponde ao ciclo de vida do componente do editor atualizado, o parâmetro 1 é a instância do editor.
destruído	Função	Corresponde ao ciclo de vida do componente do editor BeforeDestroy, o parâmetro 1 é a instância do editor.