jodit vue

Jodit vue

Vue Wrapper para el editor de Jodit

Cómo usar

Use la versión 2.* para Vue 2

Use la versión 3.* para Vue 3

Instalar Jodit Vue :

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

Importarlo y usarlo

Dado que este componente es solo un envoltorio, debe incluir el css del editor Jodit en su aplicación para que funcione correctamente, si está utilizando vue-cli para crear su aplicación, u otro sistema de compilación, puede importarlo directamente o agregar una etiqueta de link con el archivo css proporcionado por el paquete del editor Jodit .

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

Vue . use ( JoditVue )

En lugar de usar Vue.use(JoditVue) puede usar el componente localmente

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

También puede verificarlo y probarlo en CodesanBox .

Usando sin un sistema de compilación

Si no usa un sistema de compilación en su aplicación, también puede usar Jodit Vue sin problemas, verificarlo y probarlo en este JSFIDDLE .

Propiedades de componentes

Si pasa solo el v-model para el componente, cargará todas las funciones del editor, si desea personalizarlo, puede hacerlo con sus propiedades que se enumeran a continuación, pero no todas son necesarias, solo si desea personalizar su editor que las necesitará:

Propiedad	Tipo	Valor predeterminado	Descripción
botones	Formación	null	Los botones que desea mostrar en la barra de herramientas, si esto no se proporciona, se mostrarán todos los botones
extrabutton	Formación	null	Si necesita crear y mostrar botones personalizados, puede pasar una matriz con sus botones personalizados a esta propiedad
configuración	Objeto	{}	El objeto de configuración que tiene todas las otras configuraciones para el editor
complementos	Formación	[]	Si necesita crear complementos personalizados, puede pasar la matriz de complementos a esta propiedad

Propiedad de botones

Al proporcionar los botones para mostrar en el editor, deberá proporcionar una matriz con los botones que desea mostrar. Los nombres de los botones se pueden encontrar aquí . También puedes pasar un | para poner un divisor entre los botones.

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

Propiedad de botones adicionales

Si necesita crear botones personalizados para el editor, puede crearlos y proporcionar al componente una matriz

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

Para crear botones personalizados, consulte los documentos del editor de Jodit

Propiedad de configuración

Esta configuración le permite pasar todas las otras configuraciones que se encuentran aquí para personalizar su editor.

Propiedad de complementos

La propiedad Plugins le permite pasar la matriz de objetos de complemento con nombre y devolución de llamada que se inicializará cuando Jodit se inicialice. Los complementos se inicializan a nivel mundial y se agregará a todas las instancias del editor Jodit. Por ejemplo:

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

Para agregar complementos, Jodit Vue usa Jodit.plugins.add API. Verifique la documentación de Jodit y los ejemplos cómo implementar complementos.

Créditos

• Wendell Adriel
• Todos los contribuyentes