my vue editor

éditeur my-vue

Un éditeur de texte riche basé sur Vue2.x
中文文档

Démo

Cliquez ici pour voir la démo
Plus de démo, veuillez vous référer à l'exemple de répertoire

Introduction

Notre éditeur est basé sur le développement secondaire de l'éditeur Vue-HTML5. Grâce à son auteur PeakTai d'avoir fourni un plug-in de l'éditeur de texte riche concis, sur la base de laquelle nous avons réécrit la méthode native et étendu la fonctionnalité.

Installer

 npm install my - vue - editor

Introduit comme un plug-in

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

Introduction mondiale

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

Installé par la variable globale MyVueEditor

 Vue . use ( myVueEditor , options )

Utiliser

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

Configuration

Articles	Taper	Description
nom	Chaîne	Nom du composant personnalisé, la valeur par défaut est mon éditeur
modules	Tableau	Les modules doivent utiliser
icônes	Objet	Couvrant l'icône du module spécifié
commandes	Objet	Commande personnalisée
raccourci	Objet	Raccourci personnalisé
modules extensibles	Tableau	Module personnalisé
Tout nom de module intégré	Objet	Écraser les propriétés du module intégré correspondant

exemple

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

Événement

Nom de l'événement	Description
changement	Déclencher lorsque le contenu de l'éditeur change, le paramètre est des données de contenu à jour
ImageUpload	Déclenchez lors du téléchargement d'images, les paramètres incluent les données correspondantes de l'image ， ReplacerCafterUpLoadFinish: utilisé pour remplacer l'attribut SRC de IMG du format Base64 à l'URL renvoyé par le serveur lorsque le téléchargement est réussi） DeleteImgwenuploadFail: Utilisé pour supprimer l'image actuelle lorsque le téléchargement échoue

Modifier le module intégré

Ajoutez un paramètre avec le nom d'un module intégré car sa clé, couvrira les propriétés d'origine du module intégré (voir tous les modules intégrés et leurs éléments de configuration dans le répertoire SRC / Modules）））

Prenez le module d'image comme exemple

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

Module Cutom

Étendre le module avec l'élément de configuration ExtendModules Nous fournissons des éléments de configuration du module commun

Article	Taper	Description
nom	Chaîne	nom du module
icône	Chaîne	ClassName de l'icône du module ， L'icône Fontawesome est utilisée par défaut
exclure	Tableau des chaînes	modules désactivés lorsque le module actuel est inspecté Lorsque la valeur est «tout» signifie désactiver tous les modules incluent le module actuel Lorsque la valeur est'all_but_mySelf ', signifie désactivé tous les modules mais le module actuel Lorsque la valeur est le type de tableau, le nom du module d'entrée à désactiver
inspecter	Fonction	Inspect du module ， Lorsque le curseur est dans la liste, le module de liste est mis en surbrillance, c'est-à-dire que le module de liste est inspecté, qui est basé sur son étiquette UL comme base de test Le premier argument à la fonction est une méthode nommée ADD, qui a appelé à ajouter la base d'inspection du module. Lorsqu'il y a plusieurs bases d'inspection, veuillez appeler le chaînage Le premier paramètre de la méthode ADD indique le chemin à tester. Le style est facultatif «tag» et «attribut» Lorsque le paramètre 1 est «tag», le paramètre 2 passe dans une chaîne de nom de balise Lorsque le paramètre 1 est «Style», le paramètre 2 est un objet avec Stylename comme clé et style STYLE comme valeur. Remarque Stylename Utilisez le formulaire de bosse （Ex: FontSize） ， Lorsqu'il y a plusieurs valeurs de style, veuillez utiliser la forme du tableau Lorsque le paramètre 1 est `` Attribut '', le paramètre 2 est un objet dont la clé est le nom d'attribut et la valeur d'attribut est la valeur, et notez que si une valeur est souhaitée, transmettez dans '' （ex ： Add ('Attribut', {'Data-Todo': ''})）
maître	Fonction	Que faire lorsque vous cliquez sur le module Le paramètre 1 est une instance de main-handler, à travers laquelle pouvez-vous obtenir l'instance Vue de l'éditeur actuel et la méthode pour fonctionner Nous ne recommandons pas de plage d'exploitation directement dans le gestionnaire, mais nous devons encapsuler l'action de plage en tant que commande, appelant la commande via la méthode Execcommand sous l'instance de l'éditeur dans le gestionnaire
languette	Instance Vue	Les modules conventionnels utilisent les gestionnaires pour gérer les clics, et si vous souhaitez implémenter l'interface utilisateur (liste déroulante des modules de police) ou une logique plus complexe (commutation de gauche à droite des modules d'alignement), utilisez l'onglet
init	Fonction	Correspond au cycle de vie des composants de l'éditeur créé, le paramètre 1 est l'instance de l'éditeur. Notez que la méthode Execcommand ne peut pas être utilisée pour le moment
monté	Fonction	Correspond au cycle de vie des composants de l'éditeur monté, le paramètre 1 est l'instance de l'éditeur.
mis à jour	Fonction	Correspond au cycle de vie des composants de l'éditeur mis à jour, le paramètre 1 est l'instance de l'éditeur.
détruit	Fonction	Correspond au cycle de vie des composants de l'éditeur Beforestroy, le paramètre 1 est l'instance de l'éditeur.