jodit vue

Jodit Vue

Vue -Wrapper für den Jodit -Editor

Wie man benutzt

Verwenden Sie Version 2.* für Vue 2

Verwenden Sie Version 3.* für Vue 3

Installieren Sie Jodit Vue :

 npm install jodit-vue --save
// or with Yarn
yarn add jodit-vue

Importieren und benutzen

Da diese Komponente nur ein Wrapper ist, müssen Sie die css des Jodit-Editors in Ihre App aufnehmen, damit sie ordnungsgemäß funktioniert. Wenn Sie vue-cli zum Erstellen Ihrer App oder ein anderes Build-System verwenden, können Sie sie direkt importieren oder ein link -Tag mit der vom Jodit-Editor- Paket bereitgestellten css Datei hinzufügen.

 import 'jodit/build/jodit.min.css'
import Vue from 'vue'
import JoditVue from 'jodit-vue'

Vue . use ( JoditVue )

Anstatt Vue.use(JoditVue) zu verwenden, können Sie die Komponente lokal verwenden

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

< script >
import ' jodit/build/jodit.min.css '
import { JoditEditor } from ' jodit-vue '

export default {
    name : ' app ' ,

    components : { JoditEditor },

    data () {
        return {
            content : ' <h1>Hello Jodit Vue</h1> '
        }
    }
}
</ script >

Sie können es auch überprüfen und auf Codesanbox testen.

Verwenden ohne Build -System

Wenn Sie kein Build -System in Ihrer App verwenden, können Sie Jodit Vue auch ohne Probleme verwenden, überprüfen und testen Sie es auf dieser JSFIDDLE .

Komponenteneigenschaften

Wenn Sie nur das v-model für die Komponente übergeben, werden alle Editorfunktionen geladen. Wenn Sie ihn anpassen möchten, können Sie dies mit den unten aufgeführten Eigenschaften tun, aber alle sind nicht erforderlich, nur wenn Sie Ihren Editor anpassen möchten, dass Sie sie benötigen:

Eigentum	Typ	Standardwert	Beschreibung
Knöpfe	Array	null	Die Tasten, die Sie in der Symbolleiste anzeigen möchten, wenn dies nicht bereitgestellt wird, werden alle Tasten angezeigt
Extrabuttons	Array	null	Wenn Sie benutzerdefinierte Schaltflächen erstellen und anzeigen müssen, können Sie ein Array mit Ihren benutzerdefinierten Schaltflächen an diese Eigenschaft übergeben
Konfiguration	Objekt	{}	Das Konfigurationsobjekt, das alle anderen Konfigurationen für den Editor enthält
Plugins	Array	[]	Wenn Sie benutzerdefinierte Plugins erstellen müssen, können Sie eine Array von Plugins an diese Eigenschaft übergeben

Buttons Eigenschaft

Wenn Sie die Schaltflächen für den Editor zur Verfügung stellen, müssen Sie ein Array mit den Tasten zur Verfügung stellen, die Sie anzeigen möchten. Die Button -Namen finden Sie hier . Sie können auch a | passieren einen Teiler zwischen den Tasten legen.

< template >
    < div id = " app " >
        < jodit-editor v-model = " content " :buttons = " buttons " />
    </ div >
</ template >

< script >
import ' jodit/build/jodit.min.css '
import { JoditEditor } from ' jodit-vue '

export default {
    name : ' app ' ,

    components : { JoditEditor },

    data () {
        return {
            content : ' <h1>Hello Jodit Vue</h1> ' ,
            buttons : [ ' source ' , ' image ' , ' | ' , ' bold ' , ' underline ' , ' italic ' ]
        }
    }
}
</ script >

Eigenschaft zusätzlicher Knöpfe

Wenn Sie dem Editor benutzerdefinierte Schaltflächen erstellen müssen, können Sie diese erstellen und der Komponente ein Array zur Verfügung stellen

< template >
    < div id = " app " >
        < jodit-editor v-model = " content " :buttons = " buttons " :extra-buttons = " customButtons " />
    </ div >
</ template >

< script >
import ' jodit/build/jodit.min.css '
import { JoditEditor } from ' jodit-vue '

export default {
    name : ' app ' ,

    components : { JoditEditor },

    data () {
        return {
            content : ' <h1>Hello Jodit Vue</h1> ' ,
            buttons : [ ' source ' , ' image ' , ' | ' , ' bold ' , ' underline ' , ' italic ' ],
            customButtons : [
                {
                    name : ' insertDate ' ,
                    iconURL : ' http://xdsoft.net/jodit/logo.png ' ,
                    exec : function ( editor ) {
                        editor . selection . insertHTML (( new Date ). toDateString ());
                    }
                }
            ]
        }
    }
}
</ script >

Um benutzerdefinierte Schaltflächen zu erstellen, überprüfen Sie die Jodit -Editor -Dokumente

Konfigurationseigenschaft

Mit dieser Konfiguration können Sie alle anderen hier gefundenen Konfigurationen übergeben, um Ihren Editor anzupassen

Plugins -Eigenschaft

Mit Plugins -Eigenschaft können Sie ein Array von Plugin -Objekten mit Namen und Rückruf übergeben, die bei der Initialisierung von Jodit initialisiert werden. Plugins werden global initialisiert und werden zu allen Fällen des Jodit -Editors hinzugefügt. Zum Beispiel:

< template >
    < div id = " app " >
        < jodit-editor v-model = " content " :plugins = " plugins " />
    </ div >
</ template >

< script >
import ' jodit/build/jodit.min.css '
import { JoditEditor } from ' jodit-vue '

export default {
    name : ' app ' ,

    components : { JoditEditor },

    data () {
        return {
            content : ' <h1>Hello Jodit Vue</h1> ' ,
            plugins : [
              {
                name : ' example ' ,
                callback : function ( editor ) {
                  editor . events . on ( ' afterInit ' , function () {
                    console . warn ( ' Example plugin has beed initialized, check Jodit documentation for more details. ' )
                  })
                }
              }
            ]
        }
    }
}
</ script >

Zum Hinzufügen von Plugins Jodit Vue verwendet Jodit.plugins.add api. Überprüfen Sie die Jodit -Dokumentation und Beispiele zum Implementieren von Plugins.

Credits

• Wendell Adriel
• Alle Mitwirkenden