jodit vue скачать - загрузить исходный код jodit vue

jodit vue

Другие ресурсы

1.0.0

Скачать

Джодит Вью

Vue warper для редактора Jodit

Как использовать

Используйте версию 2.* для Vue 2
Используйте версию 3.* для Vue 3

Установите Jodit Vue :

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

Импортируйте и используйте его

Поскольку этот компонент является всего лишь оберткой, вам необходимо включить css редактора Jodit в ваше приложение, чтобы он работал должным образом, если вы используете vue-cli для создания вашего приложения, или другую систему сборки, вы можете импортировать его или добавить тег link в файл css , предоставленную пакетом Jodit Editor .

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

Vue . use ( JoditVue )

Вместо использования Vue.use(JoditVue) вы можете использовать компонент локально

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

Вы также можете проверить и проверить его в CodeSanbox .

Использование без системы сборки

Если вы не используете систему сборки в своем приложении, вы также можете использовать Jodit Vue без проблем, проверить и проверить ее на этом jsfiddle .

Свойства компонентов

Если вы передаете только v-model для компонента, он загрузит все функции редактора, если вы хотите настроить ее, вы можете сделать это со своими свойствами, которые перечислены ниже, но все они не требуются, только если вы хотите настроить свой редактор, что вам понадобится: они вам понадобятся: все они вам понадобятся:

Свойство	Тип	Значение по умолчанию	Описание
кнопки	Множество	`null`	Кнопки, которые вы хотите показать на панели инструментов, если это не предоставлено, все кнопки будут показаны
extrabuttons	Множество	`null`	Если вам нужно создать и отобразить пользовательские кнопки, вы можете передать массив с помощью пользовательских кнопок в это свойство
конфигурация	Объект	`{}`	Объект конфигурации, у которого есть все остальные конфигурации для редактора
плагины	Множество	`[]`	Если вам нужно создать пользовательские плагины, вы можете передать массив плагинов в это свойство

Кнопки свойства

При предоставлении кнопок, чтобы показать в редакторе, вам нужно будет предоставить массив с помощью кнопок, которые вы хотите показать. Имена кнопок можно найти здесь . Вы также можете пройти | поместить разделитель между кнопками.

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

Дополнительные кнопки свойства

Если вам нужно создать пользовательские кнопки для редактора, вы можете создать их и предоставить компонент массив

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

Чтобы создать пользовательские кнопки, проверьте документы редактора Jodit

Свойство конфигурации

Эта конфигурация позволяет передать все остальные конфигурации, найденные здесь , чтобы настроить ваш редактор

Свойство плагинов

Свойство плагинов позволяет вам пройти массив объектов плагинов с именем и обратным вызовом, которые будут инициализированы при инициализировании Jodit. Плагины инициализируются по всему миру, и они будут добавлены ко всем случаям редактора Jodit. Например:

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