jodit vue

Jodit Vue

Vue Wrapper pour l'éditeur Jodit

Comment utiliser

Utilisez la version 2. * pour Vue 2

Utilisez la version 3. * pour Vue 3

Installer Jodit Vue :

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

Importer et l'utiliser

Étant donné que ce composant est juste un wrapper, vous devez inclure le css de l' éditeur JODIT sur votre application pour qu'il fonctionne correctement, si vous utilisez vue-cli pour créer votre application ou un autre système de construction, vous pouvez l'importer directement ou ajouter une balise link avec le fichier css fourni par le package d'éditeur JODIT .

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

Vue . use ( JoditVue )

Au lieu d'utiliser Vue.use(JoditVue) vous pouvez utiliser le composant localement

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

Vous pouvez également le vérifier et le tester sur codesanbox .

En utilisant sans système de construction

Si vous n'utilisez pas de système de build sur votre application, vous pouvez également utiliser Jodit Vue sans problème, vérifiez et testez sur ce jsfiddle .

Propriétés des composants

Si vous ne transmettez que le v-model pour le composant, il chargera toutes les fonctionnalités de l'éditeur, si vous souhaitez le personnaliser, vous pouvez le faire avec ses propriétés qui sont répertoriées ci-dessous, mais toutes ne sont pas requises, simplement si vous souhaitez personnaliser votre éditeur dont vous en aurez besoin:

Propriété	Taper	Valeur par défaut	Description
boutons	Tableau	null	Les boutons que vous souhaitez afficher sur la barre d'outils, si cela n'est pas fourni, tous les boutons seront affichés
extrabuttons	Tableau	null	Si vous devez créer et afficher des boutons personnalisés, vous pouvez passer un tableau avec vos boutons personnalisés à cette propriété
configurer	Objet	{}	L'objet config qui a toutes les autres configurations pour l'éditeur
plugins	Tableau	[]	Si vous devez créer des plugins personnalisés, vous pouvez passer un tableau de plugins à cette propriété

Propriété des boutons

Lorsque vous fournissez les boutons à afficher sur l'éditeur, vous devrez fournir un tableau avec les boutons que vous souhaitez montrer. Les noms de bouton peuvent être trouvés ici . Vous pouvez également passer un | pour mettre un diviseur entre les boutons.

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

Propriété de boutons supplémentaires

Si vous devez créer des boutons personnalisés à l'éditeur, vous pouvez les créer et fournir au composant un tableau

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

Pour créer des boutons personnalisés, consultez les documents de l'éditeur Jodit

Propriété de configuration

Cette configuration vous permet de passer toutes les autres configurations trouvées ici pour personnaliser votre éditeur

Propriété des plugins

La propriété des plugins vous permet de passer le tableau d'objets de plugin avec nom et rappel qui sera initialisé lorsque jodit est initialisé. Les plugins sont initialisés à l'échelle mondiale et il ajoutera à toutes les instances de l'éditeur de Jodit. Par exemple:

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

Pour ajouter des plugins, Jodit Vue utilise Jodit.plugins.add API. Vérifiez la documentation JODIT et les exemples de la façon d'implémenter les plugins.

Crédits

• Wendell Adriel
• Tous les contributeurs