my vue editor
1.0.0
Vue2.xに基づく豊富なテキストエディター
中文文档
デモを見るにはここをクリックしてください
その他のデモの例を参照してください。ディレクトリを参照してください
編集者は、Vue-HTML5-Editorの二次開発に基づいています。簡潔なリッチテキストエディタープラグインを提供してくれた著者のPeaktaiに感謝します。これに基づいて、ネイティブ方法を書き直し、機能を拡張しました。
npm install my - vue - editorプラグインとして導入されています
import Vue from 'vue'
import myVueEditor from 'my-vue-editor'
Vue . use ( myVueEditor , options )グローバル紹介
< script src =" serverpath/vue.js " > </ script >
< script src =" serverpath/dist/my-vue-editor.js " > </ script >グローバル変数MyVueEditorによってインストールされます
Vue . use ( myVueEditor , options )使用
< my-vue-editor :content =" content " @change =' ctnChange ' @imageUpload =' imageUpload ' > </ my-vue-editor > | アイテム | タイプ | 説明 |
|---|---|---|
| 名前 | 弦 | カスタムコンポーネント名、デフォルトはMy-Vue-Editorです |
| モジュール | 配列 | モジュールは使用する必要があります |
| アイコン | 物体 | 指定されたモジュールのアイコンをカバーします |
| コマンド | 物体 | カスタムコマンド |
| ショートカット | 物体 | カスタムショートカット |
| extendmodules | 配列 | カスタムモジュール |
| 内蔵モジュール名 | 物体 | 対応する内蔵モジュールのプロパティを上書きします |
Vue . use ( myVueEditor , {
// Overlay built-in module's icon
icons : {
image : 'iui-icon iui-icon-pic' ,
indent : 'iui-icon iui-icon-insert'
} ,
// Modules in use
modules : [
'font' ,
'bold' ,
'italic' ,
'underline' ,
'linethrough' ,
'ul' ,
'indent' ,
'align' ,
'image' ,
'quote' ,
'todo' ,
// This is a custom module
'customSave'
] ,
// Overlay image module's configuration
image : {
maxSize : 5120 * 1024 ,
imgOccupyNewRow : true ,
compress : {
width : 1600 ,
height : 1600 ,
quality : 0.8
}
} ,
// Overlay font module's configuration
font : {
config : {
'xx-large' : {
fontSize : 6 ,
name : 'H1'
} ,
'medium' : {
fontSize : 3 ,
name : 'H2'
} ,
'small' : {
fontSize : 2 ,
name : 'H3'
} ,
default : 'medium'
} ,
// Modify the font module's module inspect mechanism to inspect via style and tag name
inspect ( add ) {
add ( 'style' , {
fontSize : [ 'xx-large' , 'x-large' , 'large' , 'medium' , 'small' ]
} ) . add ( 'tag' , 'font' )
}
} ,
// Overlay ul module's configuration
ul : {
// When the ul module is inspected, disabled all but itself
exclude : 'ALL_BUT_MYSELF' ,
// When the ul module is clicked, execute the following method
handler ( rh ) {
console . log ( 'i am ul!' )
rh . editor . execCommand ( 'insertUnorderedList' )
}
} ,
// When the ul module is inspected, disabled image, todo and ul module
quote : {
exclude : [ 'image' , 'todo' , 'ul' ]
} ,
// Customize an command named getAllTexts that prints out all the text nodes under the current range object
commands : {
getAllTexts ( rh , arg ) {
console . log ( rh . getAllTextNodeInRange ( ) )
}
} ,
shortcut : {
// Custom a shortcut key, when you press the command + s, execute the save function
saveNote : {
metaKey : true ,
keyCode : 83 ,
handler ( editor ) {
save ( )
}
}
} ,
// Customize a module, a alert pops up when you click on the module icon
extendModules : [ {
name : 'smile' ,
icon : 'iui iui-icon-smile'
handler ( rh ) {
alert ( 'smile~~' )
}
} ]
} ) | イベント名 | 説明 |
|---|---|
| 変化 | エディターのコンテンツが変更されたときにトリガー、パラメーターは最新のコンテンツデータです |
| ImageUpload | 画像をアップロードするときにトリガーすると、パラメーターには画像の対応するデータが含まれます。 fallceSrcafteruploadfinish：アップロードが成功したときにサーバーが返すbase64形式からIMGのSRC属性を交換するために使用 deleteimghenuploadfail：アップロードが失敗したときに現在の画像を削除するために使用されます |
ビルトインモジュールの名前をキーにしたパラメーターを追加すると、組み込みモジュールの元のプロパティをカバーします（SRC/Modulesディレクトリのすべての組み込みモジュールとその構成項目を参照してください。
Vue . user ( myVueEditor , {
image : {
// Modify the image module's icon
icon : 'iui-pic' ,
// Cover the original compression parameters, so that the image is not compressed when uploaded
compress : null ,
// Can not upload the same image repeatedly
canUploadSameImage : false
}
} ) extendmodules構成アイテムでモジュールを拡張すると、いくつかの共通モジュール構成項目を提供します
| アイテム | タイプ | 説明 |
|---|---|---|
| 名前 | 弦 | モジュールの名前 |
| アイコン | 弦 | モジュールアイコンのクラス名、fontawesomeアイコンはデフォルトで使用されます |
| 除外します | 文字列配列 | 現在のモジュールが検査されたときに無効モジュール 値が「ALL」の場合、すべてのモジュールには現在のモジュールが含まれます 値が'all_but_myself 'である場合、現在のモジュール以外のすべてのモジュールを無効にすることを意味します 値が配列のタイプである場合、無効になる入力モジュール名 |
| 検査します | 関数 | モジュールでは、カーソルがリストにあるときに、リストモジュールが強調表示されます。つまり、リストモジュールが検査されます。これは、テストベースとしてのULラベルに基づいています。 関数の最初の引数は、モジュールの検査基準を追加するように呼ばれるADDという名前のメソッドです。複数の検査ベースがある場合は、チェーンに電話してください ADDメソッドの最初のパラメーターは、どのパスをテストするかを示します。オプションは「タグ」スタイルと「属性」です パラメーター1が「タグ」の場合、パラメーター2はタグ名の文字列に渡されます パラメーター1が「スタイル」の場合、パラメーター2はキーとしてStylename、StyleValueが値としてのオブジェクトです。注スタイレナームはこぶを使用します（Ex：fontsize）、複数のスタイルバリューがある場合は、配列の形式を使用してください パラメーター1が「属性」の場合、パラメーター2はキーが属性名と属性値が値であるオブジェクトであり、任意の値が必要な場合は、 '' ex：add（ '属性'、{'data-todo'： ''}）に渡すことに注意してください。 |
| ハンドラ | 関数 | モジュールをクリックしたときの対処方法 パラメーター1は範囲ハンドラーインスタンスです。これにより、現在のエディターのVueインスタンスと動作範囲を動作させる方法を取得できますか ハンドラーで直接操作することはお勧めしませんが、範囲のアクションをコマンドとしてカプセル化する必要があります。 |
| タブ | Vueインスタンス | 従来のモジュールはクリックを処理するためにハンドラーを使用し、UI（フォントモジュールのドロップダウンリスト）またはより複雑なロジック（Alignモジュールの左から右への切り替え）を実装する場合は、タブを使用します |
| init | 関数 | 作成されたエディターコンポーネントライフサイクルに対応し、パラメーター1はエディターインスタンスです。 ExecCommandメソッドは現時点では使用できないことに注意してください |
| 取り付けられています | 関数 | マウントされたエディターコンポーネントのライフサイクルに対応し、パラメーター1はエディターインスタンスです。 |
| 更新 | 関数 | 更新されたエディターコンポーネントのライフサイクルに対応し、パラメーター1はエディターインスタンスです。 |
| 破壊された | 関数 | エディターコンポーネントのライフサイクルに対応し、パラメーター1はエディターインスタンスです。 |
