vue2 editor
Release 2.6.6
使いやすく、しかし強力でカスタマイズ可能なリッチなテキストエディターがquill.jsとvue.jsを搭載した
ノートをリリースします
糸またはnpmを使用できます
npm install vue2-editorまたは
yarn add vue2-editor // Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor" ;
// Advanced Use - Hook into Quill's API for Custom Functionality
import { VueEditor , Quill } from "vue2-editor" ; vue2-editor/nuxtをnuxt.config.jsのモジュールセクションに追加します
{
modules: [ "vue2-editor/nuxt" ] ;
}コンテンツの不一致に関するVueからの警告を表示しないようにするには、 VueEditorコンポーネントをclient-onlyコンポーネントに包む必要があります。
< client-only >
< VueEditor />
</ client-only > | 名前 | タイプ | デフォルト | 説明 |
|---|---|---|---|
| カスタムモジュール | 配列 | - | 登録するQuillモジュールを宣言します |
| 無効 | ブール | 間違い | Editorを無効にするためにTrueに設定します |
| 編集 | 物体 | - | デフォルト構成にマージするためのオブジェクトを提供します（フォーマット、カスタムクイルモジュール、ECTの追加） |
| editortoolbar | 配列 | **テーブルには長すぎます。以下のツールバーの例を参照してください | カスタムツールバーを使用します |
| id | 弦 | Quill Container | IDを設定します（同じビューで複数のエディターが必要な場合に必要です） |
| プレースホルダー | 弦 | - | 編集者のプレースホルダーテキスト |
| usecustomimagehandler | ブール | 間違い | デフォルトの変換をbase64に使用する代わりに、画像アップロードを処理する |
| Vモデル | 弦 | - | バインドしたいコンテンツまたはデータプロパティにvモデルを設定します |
| 名前 | パラメーター | 説明 |
|---|---|---|
| ぼやけ | クイル | blurイベントで放出されました |
| 集中 | クイル | focusイベントに排出されました |
| 画像アドレス | ファイル、編集者、カーソルロケーション | useCustomImageHandlerが真であり、写真がエディターに追加されているときに放出されます |
| 画像が削除されました | ファイル、編集者、カーソルロケーション | useCustomImageHandlerが真であり、写真が削除されたときに放出されます |
| 選択チェンジ | 範囲、オールドレンジ、ソース | Quillのselection-changeイベントで放出されました |
| テキスト変更 | デルタ、オールデルタ、ソース | Quillのtext-changeイベントで放出されました |
< template >
< div id = " app " >
< vue-editor v-model = " content " ></ vue-editor >
</ div >
</ template >
< script >
import { VueEditor } from " vue2-editor " ;
export default {
components : {
VueEditor
},
data () {
return {
content : " <h1>Some initial content</h1> "
};
}
};
</ script >カスタムイメージハンドラーを使用することを選択した場合、AA写真が選択されたときにイベントが放出されます。以下では、3つのパラメーターが渡されていることを確認できます。
この例に加えて、実際のサーバーを使用してこの新機能を示す例を作成しました。
< template >
< div id = " app " >
< vue-editor
id = " editor "
useCustomImageHandler
@image-added = " handleImageAdded "
v-model = " htmlForEditor "
>
</ vue-editor >
</ div >
</ template >
< script >
import { VueEditor } from " vue2-editor " ;
import axios from " axios " ;
export default {
components : {
VueEditor
},
data () {
return {
htmlForEditor : " "
};
},
methods : {
handleImageAdded : function ( file , Editor , cursorLocation , resetUploader ) {
// An example of using FormData
// NOTE: Your key could be different such as:
// formData.append('file', file)
var formData = new FormData ();
formData . append ( " image " , file);
axios ({
url : " https://fakeapi.yoursite.com/images " ,
method : " POST " ,
data : formData
})
. then ( result => {
const url = result . data . url ; // Get url from response
Editor . insertEmbed (cursorLocation, " image " , url);
resetUploader ();
})
. catch ( err => {
console . log (err);
});
}
}
};
</ script >< template >
< div id = " app " >
< button @click = " setEditorContent " >Set Editor Contents</ button >
< vue-editor v-model = " htmlForEditor " ></ vue-editor >
</ div >
</ template >
< script >
import { VueEditor } from " vue2-editor " ;
export default {
components : {
VueEditor
},
data () {
return {
htmlForEditor : null
};
},
methods : {
setEditorContent : function () {
this . htmlForEditor = " <h1>Html For Editor</h1> " ;
}
}
};
</ script >< template >
< div id = " app " >
< vue-editor id = " editor1 " v-model = " editor1Content " ></ vue-editor >
< vue-editor id = " editor2 " v-model = " editor2Content " ></ vue-editor >
</ div >
</ template >
< script >
import { VueEditor } from " vue2-editor " ;
export default {
components : {
VueEditor
},
data () {
return {
editor1Content : " <h1>Editor 1 Starting Content</h1> " ,
editor2Content : " <h1>Editor 2 Starting Content</h1> "
};
}
};
</ script >
< style >
#editor1 ,
#editor2 {
height : 350 px ;
}
</ style >< template >
< div id = " app " >
< vue-editor v-model = " content " :editorToolbar = " customToolbar " ></ vue-editor >
</ div >
</ template >
< script >
import { VueEditor } from " vue2-editor " ;
export default {
components : {
VueEditor
},
data () {
return {
content : " <h1>Html For Editor</h1> " ,
customToolbar : [
[ " bold " , " italic " , " underline " ],
[{ list : " ordered " }, { list : " bullet " }],
[ " image " , " code-block " ]
]
};
}
};
</ script >< template >
< div id = " app " >
< button @click = " saveContent " ></ button >
< vue-editor v-model = " content " ></ vue-editor >
</ div >
</ template >
< script >
import { VueEditor } from " vue2-editor " ;
export default {
components : {
VueEditor
},
data () {
return {
content : " <h3>Initial Content</h3> "
};
},
methods : {
handleSavingContent : function () {
// You have the content to save
console . log ( this . content );
}
}
};
</ script >< template >
< div id = " app " >
< vue-editor v-model = " content " ></ vue-editor >
< div v-html = " content " ></ div >
</ div >
</ template >
< script >
import { VueEditor } from ' vue2-editor '
components : {
VueEditor
},
export default {
data () {
return {
content : ' <h1>Initial Content</h1> '
}
}
}
</ script >Vue2editorでカスタムモジュールを使用する方法は2つあります。これは、カスタムモジュールをインポートして宣言しようとするときにエラーがスローされている場合があり、そのため、実際に懸念をうまく分離していると思うためです。
Vue2editorは、このプロセスを支援するためにQuillを輸出するようになりました。
editorOptionsオブジェクトに必要な構成を追加します< template >
< div id = " app " >
< vue-editor
:editorOptions = " editorSettings "
v-model = " content " >
</ div >
</ template >
< script >
import { VueEditor , Quill } from ' vue2-editor '
import { ImageDrop } from ' quill-image-drop-module '
import ImageResize from ' quill-image-resize-module '
Quill . register ( ' modules/imageDrop ' , ImageDrop)
Quill . register ( ' modules/imageResize ' , ImageResize)
export default {
components : {
VueEditor
},
data () {
return {
content : ' <h1>Initial Content</h1> ' ,
editorSettings : {
modules : {
imageDrop : true ,
imageResize : {}
}
}
}
}
}
</ script >（推奨方法）
customModules小道具を使用して、モジュールの配列を宣言します。editorOptionsオブジェクトのこれらのモジュールに必要な構成を追加します< template >
< div id = " app " >
< vue-editor
:customModules = " customModulesForEditor "
:editorOptions = " editorSettings "
v-model = " content "
>
</ vue-editor >
</ div >
</ template >
< script >
import { VueEditor } from " vue2-editor " ;
import { ImageDrop } from " quill-image-drop-module " ;
import ImageResize from " quill-image-resize-module " ;
export default {
components : {
VueEditor
},
data () {
return {
content : " <h1>Initial Content</h1> " ,
customModulesForEditor : [
{ alias : " imageDrop " , module : ImageDrop },
{ alias : " imageResize " , module : ImageResize }
],
editorSettings : {
modules : {
imageDrop : true ,
imageResize : {}
}
}
};
}
};
</ script >Vue2editorは、開発にPOIを使用するようになりました
yarn dev ：開発モードで例を実行しますyarn docs ：ドキュメントの開発yarn build ：両方の形式でコンポーネントをビルドしますyarn lint ：Run Eslint mit
