Startseite>Ressourcen zum Erstellen von Websites>Andere Ressourcen
Herunterladen

Vue2Editor

Ein benutzerfreundlicher, aber dennoch leistungsstarker und anpassbarer reicher Texteditor, der von Quill.js und Vue.js betrieben wird

Dokumente anzeigen

Versionshinweise

Installieren

Sie können Garn oder NPM verwenden 

npm install vue2-editor

ODER 

yarn add vue2-editor

Verwendung 

 // Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor" ;

// Advanced Use - Hook into Quill's API for Custom Functionality
import { VueEditor , Quill } from "vue2-editor" ;

Nuxt.js

Fügen Sie vue2-editor/nuxt zu Modulenabschnitt von nuxt.config.js hinzu 

 {
  modules: [ "vue2-editor/nuxt" ] ;
}

Um zu vermeiden, dass Warnungen von Vue vor einem Nichtübereinstimmung inhaltlich sehen, müssen Sie die VueEditor Komponente mit der hier gezeigten client-only Komponente nuxt einwickeln: 

 < client-only >
  < VueEditor />
</ client-only >

Requisiten

Name Typ Standard Beschreibung
CustomModules Array - - Deklary Quills Module zur Registrierung deklarieren
deaktiviert Boolean FALSCH Setzen
Editoroptionen Objekt - - Bietet Objekt zum Zusammenführen in Standardkonfiguration (Formate hinzufügen, benutzerdefinierte Quillsmodule, ect)
editortoolbar Array ** Zu lange für den Tisch. Siehe Beispiel für Symbolleiste unten unten Verwenden Sie eine benutzerdefinierte Symbolleiste
Ausweis Saite Quill-Container Setzen Sie die ID (notwendig, wenn mehrere Redakteure in derselben Ansicht)
Platzhalter Saite - - Platzhaltertext für den Herausgeber
UsecustomimageHandler Boolean FALSCH Behandeln Sie das Bild -Hochladen an, anstatt die Standardkonvertierung in Base64 zu verwenden
V-Model Saite - - Stellen Sie das V-Model auf die Inhalts- oder Dateneigenschaft ein, an die Sie sie binden möchten

Ereignisse

Name Parameter Beschreibung
verwischen Feder Auf blur -Event emittiert
Fokus Feder Ausgegeben auf focus -Event
Bild Datei, Editor, Cursorlocation Emittiert, wenn useCustomImageHandler wahr ist und das Foto zum Herausgeber hinzugefügt wird
Bildauflösend Datei, Editor, Cursorlocation Emittiert, wenn useCustomImageHandler wahr ist und das Foto gelöscht wurde
Auswahlwechsel Reichweite, OldRange, Quelle Auf Quills selection-change emittiert
Textwechsel Delta, Olddelta, Quelle Auf Quills text-change Event emittiert

Beispiele

Beispiel - Basic Setup 

< template >
  < div id = " app " >
    < vue-editor v-model = " content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h1>Some initial content</h1> "
    };
  }
};
</ script >

Beispiel - benutzerdefinierter Bildhandler

Wenn Sie den benutzerdefinierten Bildhandler verwenden, wird ein Ereignis ausgestrahlt, wenn ein Foto ausgewählt ist. Sie können unten sehen, dass 3 Parameter übergeben werden.

  1. Es gibt die zu bearbeitende Datei übergeben, wie Sie benötigen
  2. Die Redakteurinstanz
  3. Die Cursorposition zum Zeitpunkt des Uploads, damit das Bild an der richtigen Position zum Erfolg eingefügt werden kann

Hinweis Zusätzlich zu diesem Beispiel habe ich ein Beispiel für Repo erstellt, das diese neue Funktion mit einem tatsächlichen Server demonstriert. 

< template >
  < div id = " app " >
    < vue-editor
      id = " editor "
      useCustomImageHandler
      @image-added = " handleImageAdded "
      v-model = " htmlForEditor "
    >
    </ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;
import axios from " axios " ;
export default {
  components : {
    VueEditor
  },

  data () {
    return {
      htmlForEditor : " "
    };
  },

  methods : {
    handleImageAdded : function ( file , Editor , cursorLocation , resetUploader ) {
      // An example of using FormData
      // NOTE: Your key could be different such as:
      // formData.append('file', file)

      var formData = new FormData ();
      formData . append ( " image " , file);

      axios ({
        url : " https://fakeapi.yoursite.com/images " ,
        method : " POST " ,
        data : formData
      })
        . then ( result => {
          const url = result . data . url ; // Get url from response
          Editor . insertEmbed (cursorLocation, " image " , url);
          resetUploader ();
        })
        . catch ( err => {
          console . log (err);
        });
    }
  }
};
</ script >

Beispiel - Inhalt nach dem Laden des Seitens festlegen 

< template >
  < div id = " app " >
    < button @click = " setEditorContent " >Set Editor Contents</ button >
    < vue-editor v-model = " htmlForEditor " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      htmlForEditor : null
    };
  },

  methods : {
    setEditorContent : function () {
      this . htmlForEditor = " <h1>Html For Editor</h1> " ;
    }
  }
};
</ script >

Beispiel - Verwenden mehrerer Redakteure 

< template >
  < div id = " app " >
    < vue-editor id = " editor1 " v-model = " editor1Content " ></ vue-editor >
    < vue-editor id = " editor2 " v-model = " editor2Content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      editor1Content : " <h1>Editor 1 Starting Content</h1> " ,
      editor2Content : " <h1>Editor 2 Starting Content</h1> "
    };
  }
};
</ script >

< style >
#editor1 ,
#editor2 {
  height : 350 px ;
}
</ style >

Beispiel - benutzerdefinierte Symbolleiste 

< template >
  < div id = " app " >
    < vue-editor v-model = " content " :editorToolbar = " customToolbar " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h1>Html For Editor</h1> " ,
      customToolbar : [
        [ " bold " , " italic " , " underline " ],
        [{ list : " ordered " }, { list : " bullet " }],
        [ " image " , " code-block " ]
      ]
    };
  }
};
</ script >

Beispiel - Speichern des Inhalts 

< template >
  < div id = " app " >
    < button @click = " saveContent " ></ button >
    < vue-editor v-model = " content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h3>Initial Content</h3> "
    };
  },

  methods : {
    handleSavingContent : function () {
      // You have the content to save
      console . log ( this . content );
    }
  }
};
</ script >

Beispiel - Verwenden Sie eine Live -Vorschau 

< template >
  < div id = " app " >
    < vue-editor v-model = " content " ></ vue-editor >
    < div v-html = " content " ></ div >
  </ div >
</ template >

< script >
import { VueEditor } from ' vue2-editor '

components : {
  VueEditor
},

export default {
  data () {
    return {
      content : ' <h1>Initial Content</h1> '
    }
  }
}
</ script >

So verwenden Sie benutzerdefinierte Federmodule

Es gibt zwei Möglichkeiten, benutzerdefinierte Module mit Vue2Editor zu verwenden. Dies liegt teilweise daran, dass beim Import und Versuch, benutzerdefinierte Module zu deklarieren, Fälle gegeben wurden, und teilweise, weil ich glaube, dass sie die Bedenken tatsächlich gut trennt.

Version 1 - Importieren und registrieren Sie sich selbst

Vue2Editor exportiert jetzt die Feder, um diesen Prozess zu unterstützen.

  1. Importieren Sie Vueeditor auch, importieren Sie auch Feder.
  2. Importieren Sie Ihre benutzerdefinierten Module
  3. Registrieren Sie die benutzerdefinierten Module mit Quill
  4. Fügen Sie die erforderliche Konfiguration zum editorOptions -Objekt hinzu 
< template >
  < div id = " app " >
    < vue-editor
      :editorOptions = " editorSettings "
      v-model = " content " >
  </ div >
</ template >

< script >
  import { VueEditor , Quill } from ' vue2-editor '
  import { ImageDrop } from ' quill-image-drop-module '
  import ImageResize from ' quill-image-resize-module '

  Quill . register ( ' modules/imageDrop ' , ImageDrop)
  Quill . register ( ' modules/imageResize ' , ImageResize)

  export default {
    components : {
      VueEditor
    },
    data () {
      return {
        content : ' <h1>Initial Content</h1> ' ,
        editorSettings : {
          modules : {
            imageDrop : true ,
            imageResize : {}
          }
        }
      }
    }
  }
</ script >

Version 2 - Sie importieren | VUE2EDITOR REGISTERS

(Empfohlen)

  1. Importieren Sie Ihre benutzerdefinierten Module
  2. Verwenden Sie die customModules -Prop, um ein Array von Modul (en) zu deklarieren.
  3. Fügen Sie die erforderliche Konfiguration für diese Module im editorOptions -Objekt unter Modulen hinzu, wie unten angezeigt 
< template >
  < div id = " app " >
    < vue-editor
      :customModules = " customModulesForEditor "
      :editorOptions = " editorSettings "
      v-model = " content "
    >
    </ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;
import { ImageDrop } from " quill-image-drop-module " ;
import ImageResize from " quill-image-resize-module " ;

export default {
  components : {
    VueEditor
  },
  data () {
    return {
      content : " <h1>Initial Content</h1> " ,
      customModulesForEditor : [
        { alias : " imageDrop " , module : ImageDrop },
        { alias : " imageResize " , module : ImageResize }
      ],
      editorSettings : {
        modules : {
          imageDrop : true ,
          imageResize : {}
        }
      }
    };
  }
};
</ script >

Entwicklung

Vue2Editor verwendet jetzt POI für die Entwicklung

  • yarn dev : Beispiel ausführen im Entwicklungsmodus
  • yarn docs : Entwicklung für Dokumente
  • yarn build : Komponente in beiden Formaten erstellen
  • yarn lint : Rennen Sie Eslint

Lizenz

MIT

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle