vue中富文字編輯器wang editor的使用

2021-10-07 22:16:36 字數 2100 閱讀 7693

npm安裝哦

「wangeditor」: 「^3.1.1」

在引入元件時

import wangeditor from


"./wangeditor"


;"detailtext"


class


="wang"


>


<


/wang-editor>
元件富文字編輯器的**

"html"


>


="editor"


>


"*******"


class


="*******"


>


<


/div>


"editor"


class


="text"


>


<


/div>


<


/div>


<


/template>


import


efrom


"wangeditor"


;import


"wangeditor/release/wangeditor.min.css"


;export


default;}


, model:


, props:


, isclear:},


watch:},


value:


function


(value)}}


,mounted()


, methods:


;// 自定義 header


this


.editor.customconfig.uploadfilename =


"file"


;// 後端接受上傳檔案的引數名


this


.editor.customconfig.uploadimgparams =


;this


.editor.customconfig.uploadimgmaxsize =2*


1024


*1024


;// 將大小限制為 2m


this


.editor.customconfig.uploadimgmaxlength =6;


// 限制一次最多上傳 6 張


this


.editor.customconfig.uploadimgtimeout =3*


60*1000


;// 設定超時時間


// 配置選單


this


.editor.customconfig.menus =


["head"


,// 標題


"bold"


,// 粗體


"fontsize"


,// 字型大小


"fontname"


,// 字型


"italic"


,// 斜體


"underline"


,// 下劃線


"strikethrough"


,// 刪除線


"forecolor"


,// 文字顏色


"backcolor"


,// 背景顏色


"link"


,// 插入鏈結


"list"


,// 列表


"justify"


,// 對齊方式


"quote"


,// 引用


"table"


,// **


"undo"


,// 撤銷


"redo"


// 重複];


this


.editor.customconfig.


onchange


= html =>


;// 建立富文字編輯器


this


.editor.


create()


;}}}


;<


/script>


"css"


>


.editor 


.******* 


.text 


<


/style>

vue中富文字編輯器的安裝及使用

匯入富文字編輯器 import vuequilleditor from vue quill editor 匯入富文字編輯器對應的樣式 import quill dist quill.core.css import quill dist quill.snow.css import quill dist...

vue獲取編輯器純文字 vue富文字編輯器

工具欄配置 const options bold italic underline strike 加粗 斜體 下劃線 刪除線 blockquote code block 引用 塊 1 2 級標題 有序 無序列表 上標 下標 縮排 文字方向 字型大小 標題 字型顏色 字型背景顏色 字型種類 對齊方式 ...

文字編輯器

include stdio.h include string.h include stdlib.h define len sizeof struct linetable struct linetable main 輸出並加入行號 display struct linetable head else ...