my vue editor
1.0.0
基於vue2.x的豐富文本編輯器
中文文檔
單擊此處查看演示
更多演示請參考示例目錄
我們的編輯基於VUE-HTML5編輯二級開發。感謝其作者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 |
| 模塊 | 大批 | 模塊需要使用 |
| 圖示 | 目的 | 覆蓋指定的模塊的圖標 |
| 命令 | 目的 | 自定義命令 |
| 捷徑 | 目的 | 自定義快捷方式 |
| 擴展模塊 | 大批 | 自定義模塊 |
| 任何內置模塊名稱 | 目的 | 覆蓋相應的內置模塊的屬性 |
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 | 觸發器上傳時，參數包括圖像的相應數據， 替換rcafteruploadfinish：用於替換IMG的SRC屬性從base64格式替換為服務器返回的URL（上傳成功）） deleteimgwhenuploadfail：用於刪除上傳失敗時刪除當前圖片 |
添加一個帶有內置模塊名稱為鍵的參數將涵蓋內置模塊的原始屬性（請參閱SRC/模塊目錄中的所有內置模塊及其配置項目）
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配置項目擴展模塊，我們提供了一些常見的模塊配置項目
| 物品 | 類型 | 描述 |
|---|---|---|
| 姓名 | 細繩 | 模塊的名稱 |
| 圖示 | 細繩 | 模塊圖標的className，默認使用fontawesome圖標 |
| 排除 | 字符串數組 | 檢查當前模塊時禁用模塊 當值為“全”時，都意味著禁用所有模塊包括當前模塊 當值是'all_but_myself'時，是指所有模塊，但當前模塊 當值是數組類型時，要禁用要禁用的輸入模塊名稱 |
| 檢查 | 功能 | 模塊檢查，當光標在列表中時，請突出顯示列表模塊，即檢查列表模塊，該模塊基於其UL標籤作為測試基礎 該函數的第一個參數是一個名為add的方法，該方法呼籲添加模塊的檢查基礎。有多次檢查基礎時，請致電鏈接 添加方法的第一個參數指示測試路徑。可選是“標籤”“樣式”和“屬性” 當參數1為“標籤”時，參數2在標籤名稱字符串中通過 當參數1為“樣式”時，參數2是具有stylename作為鍵和styleValue的對象。注意styleName使用駝峰表格（ex：fontsize），當有多個styleValue時，請使用數組的形式 當參數1為“屬性”時，參數2是一個對象，其鍵是屬性名稱和屬性值是值，並請注意，如果需要任何值，請傳遞'''''''''''''''''aidd（'attibute'，'data-todo'：'''}）） |
| 處理程序 | 功能 | 單擊模塊時該怎麼辦 參數1是Range Handler實例，您可以通過它獲取當前編輯器的VUE實例和操作範圍的方法 我們不建議直接在處理程序中的操作範圍，而應將範圍操作封裝為命令，通過處理程序中的編輯器實例下的ExecCommand方法調用命令 |
| 選項卡 | vue實例 | 常規模塊使用處理程序來處理點擊，如果要實現UI（字體模塊的下拉列表）或更複雜的邏輯（Align模塊的左右切換），請使用選項卡 |
| init | 功能 | 對應於創建的編輯器組件生命週期，參數1是編輯器實例。請注意，目前無法使用ExecCommand方法 |
| 安裝 | 功能 | 對應於已安裝的編輯器組件生命週期，參數1是編輯器實例。 |
| 更新 | 功能 | 對應於已更新的編輯器組件生命週期，參數1是編輯器實例。 |
| 被摧毀 | 功能 | 對應於編輯器組件生命週期beforedestroy，參數1是編輯器實例。 |
