my vue editor

my-vue-editor

Ein reicher Texteditor basierend auf Vue2.x
中文文档

Demo

Klicken Sie hier, um Demo zu sehen
Weitere Demo finden Sie im Beispielverzeichnis

Einführung

Unser Editor basiert auf der Sekundärentwicklung von Vue-HTML5-Eduitor. Dank des Autors Peaktai für die Bereitstellung eines präzisen, reichhaltigen Texteditors, auf deren Grundlage wir die native Methode neu geschrieben und die Funktionalität erweitert haben.

Installieren

 npm install my - vue - editor

Als Plug-In eingeführt

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

Globale Einführung

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

Installiert vom globalen variablen MyVueEditor

 Vue . use ( myVueEditor , options )

Verwenden

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

Konfiguration

Artikel	Typ	Beschreibung
Name	Saite	Benutzerdefinierter Komponentenname, der Standard ist my-vue-Eduitor
Module	Array	Module müssen verwenden
Ikonen	Objekt	Abdeckung des Symbols des angegebenen Moduls
Befehle	Objekt	Benutzerdefinierte Befehl
Abkürzung	Objekt	Benutzerdefinierte Verknüpfung
ExtendModules	Array	Benutzerdefiniertes Modul
Jeder integrierte Modulname	Objekt	Überschreiben Sie die Eigenschaften des entsprechenden integrierten Moduls

Beispiel

 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~~' )
     }
  } ]
} ) 

Ereignis

Ereignisname	Beschreibung
ändern	Trigger Wenn sich der Editorinhalt ändert, ist der Parameter aktuelle Inhaltsdaten beträgt
ImageUpload	Trigger beim Hochladen von Bildern enthalten Parameter die entsprechenden Daten des Bildes ， ersetztesrcAfterUploadfinish: Wird zum Ersetzen des SRC -Attributs von IMG vom Base64 -Format an die vom Server zurückgegebene URL verwendet, wenn der Upload erfolgreich ist） DeleteImgWhenUploadfail: Zum Löschen des aktuellen Bildes, wenn der Upload fehlschlägt

Ändern Sie das integrierte Modul

Fügen Sie einen Parameter mit dem Namen eines integrierten Moduls als Schlüssel hinzu und decken die ursprünglichen Eigenschaften des integrierten Moduls ab (siehe alle integrierten Module und deren Konfigurationselemente im Verzeichnis SRC/Modules）

Nehmen Sie das Bildmodul als Beispiel

 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
  }
} ) 

Cutom -Modul

Erweitern Sie das Modul mit dem ExtendModules -Konfigurationselement. Wir bieten einige gemeinsame Modulkonfigurationselemente an

Artikel	Typ	Beschreibung
Name	Saite	Name des Moduls
Symbol	Saite	Der Klassenname des Modulsymbols ， Das FontAwesome -Symbol wird standardmäßig verwendet
ausschließen	String -Array	Deaktivierte Module, wenn das aktuelle Modul inspiziert wird Wenn Wert "alle" bedeutet, dass alle Module das aktuelle Modul enthalten Wenn der Wert'all_But_Myself 'ist, bedeutet dies alle Module, aber das aktuelle Modul Wenn der Wert der Array ist, wird ein Eingabemodulname deaktiviert
überprüfen	Funktion	Modul inspizieren ， Wenn sich der Cursor in der Liste befindet, wird das Listenmodul hervorgehoben, dh das Listenmodul wird inspiziert, das auf seiner UL -Etikett als Testbasis basiert Das erste Argument für die Funktion ist eine Methode mit dem Namen Add, die zum Hinzufügen der Inspektionsbasis des Moduls aufgerufen wurde. Wenn es mehrere Inspektionsbasen gibt, rufen Sie bitte die Verkettung an Der erste Parameter der Add -Methode gibt an, welchen Pfad zu testen ist. Das optionale ist "Tag" -Stil und "Attribut" Wenn Parameter 1 'Tag' ist, übergibt Parameter 2 in eine Tag -Name -Zeichenfolge Wenn Parameter 1 "Stil" ist, ist Parameter 2 ein Objekt mit Stiftungsname als Schlüssel und StyleValue als Wert. HINWEIS STYLENAME Verwenden Wenn Parameter 1 'Attribut' ist, ist Parameter 2 ein Objekt, dessen Schlüssel zu Attributname und Attributwert Wert ist.
Handler	Funktion	Was tun, wenn Sie auf das Modul klicken? Parameter 1 ist eine Range-Handler Wir empfehlen den Betriebsbereich nicht direkt im Handler, sondern sollten die Bereichsaktion als Befehl zusammenfassen und den Befehl über die ExecCommand -Methode unter der Editor -Instanz im Handler aufrufen
Tab	Vue -Instanz	Herkömmliche Module verwenden Handler zum Umgang mit Klicks. Wenn Sie die Benutzeroberfläche (Dropdown-Liste der Schriftartmodule) oder eine komplexere Logik (links nach rechts Switching von Ausrichtungsmodulen) verwenden möchten, verwenden Sie die Registerkarte "Links nach rechts". Verwenden Sie die Registerkarte
init	Funktion	Entspricht dem Lebenszyklus der Editor -Komponenten, der Parameter 1 erstellt wurde, ist die Editorinstanz. Beachten Sie, dass die ExecCommand -Methode zu diesem Zeitpunkt nicht verwendet werden kann
montiert	Funktion	Entspricht dem Mounten des Lebenszyklus von Editor Component, der Parameter 1 ist die Editorinstanz.
aktualisiert	Funktion	Entspricht dem aktualisierten Lebenszyklus der Editor -Komponenten, der Parameter 1 ist die Editorinstanz.
zerstört	Funktion	Entspricht dem Lebenszyklus der Editor -Komponenten, der voredestroy vorgenommen wurde, der Parameter 1 ist die Editorinstanz.