jodit vueダウンロード-Jodit jodit vueソースコードのダウンロード

jodit vue

その他のリソース

1.0.0

ダウンロード

Jodit Vue

Jodit編集者のVueラッパー

使い方

バージョン2を使用します。* Vue 2には
バージョン3を使用します。* VUE 3には

Jodit Vueをインストールします：

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

インポートして使用します

このコンポーネントは単なるラッパーであるため、アプリに適切に動作する場合は、アプリにJoditエディタのcssを含める必要があります。Vue vue-cliを使用してアプリを作成する場合、またはJoditエディターパッケージから提供された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	物体	`{}`	エディター用の他のすべての構成を備えた構成オブジェクト
プラグイン	配列	`[]`	カスタムプラグインを作成する必要がある場合は、このプロパティにプラグインの配列を渡すことができます

ボタンプロパティ

編集者に表示するボタンを提供する場合、表示するボタンを備えた配列を提供する必要があります。ボタン名はここにあります。 |に合格することもできますボタンの間に仕切りを配置します。

< 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 Editor Docsを確認してください

構成プロパティ

この構成により、ここにある他のすべての構成に渡すことができます。

プラグインプロパティ

プラグインプロパティを使用すると、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 >