jodit vue

Jodit Vue

Vue Wrapper para o editor Jodit

Como usar

Use a versão 2.* para Vue 2

Use a versão 3.* para Vue 3

Instale Jodit Vue :

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

Importar e usar

Como esse componente é apenas um invólucro, você precisa incluir o css do editor Jodit em seu aplicativo para que ele funcione corretamente, se estiver usando vue-cli para criar seu aplicativo ou outro sistema de compilação, você pode importá-lo diretamente ou adicionar uma tag link com o arquivo css fornecido pelo pacote Jodit Editor .

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

Vue . use ( JoditVue )

Em vez de usar Vue.use(JoditVue) você pode usar o 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 >

Você também pode verificar e testá -lo na CodesanBox .

Usando sem um sistema de construção

Se você não usar um sistema de compilação no seu aplicativo, também poderá usar o Jodit Vue sem problemas, verifique e teste -o neste JSFIDDLE .

Propriedades dos componentes

Se você passar apenas o v-model para o componente, ele carregará todos os recursos do editor; se desejar personalizá-lo, poderá fazê-lo com suas propriedades listadas abaixo, mas todas elas não são necessárias, apenas se você deseja personalizar seu editor que precisará deles:

Propriedade	Tipo	Valor padrão	Descrição
botões	Variedade	null	Os botões que você deseja mostrar na barra de ferramentas, se isso não for fornecido, todos os botões serão mostrados
extrabutões	Variedade	null	Se você precisar criar e exibir botões personalizados, poderá passar uma matriz com seus botões personalizados para esta propriedade
Config	Objeto	{}	O objeto de configuração que tem todas as outras configurações para o editor
plugins	Variedade	[]	Se você precisar criar plugins personalizados, pode passar a matriz de plugins para esta propriedade

Propriedade dos botões

Ao fornecer os botões para mostrar no editor, você precisará fornecer uma matriz com os botões que deseja mostrar. Os nomes dos botões podem ser encontrados aqui . Você também pode passar um | para colocar um divisor entre os botões.

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

Propriedade dos botões extras

Se você precisar criar botões personalizados para o editor, poderá criá -los e fornecer ao componente uma 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 criar botões personalizados, verifique os documentos do Editor Jodit

Propriedade de configuração

Esta configuração permite que você passe todas as outras configurações encontradas aqui para personalizar seu editor

Propriedade dos plugins

A propriedade Plugins permite passar a matriz de objetos de plug -in com nome e retorno de chamada que serão inicializados quando o Jodit for inicializado. Os plugins são inicializados globalmente e serão adicionados a todas as instâncias do Jodit Editor. Por exemplo:

< 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 adicionar plugins, o Jodit Vue usa a API Jodit.plugins.add . Verifique a documentação e exemplos do Jodit como implementar plugins.

Créditos

• Wendell Adriel
• Todos os colaboradores