jodit vue下载 - jodit vue源代码下载

jodit vue

其他资源

1.0.0

下载

Jodit Vue

Jodit编辑器的Vue包装器

如何使用

使用版本2。*对于VUE 2
使用版本3

安装Jodit Vue ：

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

导入并使用

由于此组件只是包装器，因此您需要在应用程序中包含Jodit编辑器的css ，以使其正常工作，如果您使用vue-cli来创建应用程序，或者其他构建系统可以直接导入它或使用Jodit Editor包提供的css文件添加link标签。

 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`	您要在工具栏上显示的按钮，如果不提供此按钮，将显示所有按钮
额外	大批	`null`	如果您需要创建和显示自定义按钮，则可以将带有自定义按钮的数组传递到此属性
config	目的	`{}`	具有编辑器的所有其他配置的配置对象
插件	大批	`[]`	如果您需要创建自定义插件，则可以将插件数组传递给此属性

按钮属性

在提供要在编辑器上显示的按钮时，您将需要提供一个要显示的按钮。按钮名称可以在此处找到。您也可以通过A |将分隔线放在按钮之间。

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