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 >