類似於上圖
我們使用元件引入
首先建立乙個vue檔案
wangzi.vue
然後將下列**複製到檔案中
"html"
>
="editor"
>
"*******"
class
="*******"
>
<
/div>
"editor"
class
="text"
>
<
/div>
<
/div>
<
/template>
import
efrom
'wangeditor'
export
default},
model:
, props:
, isclear:},
watch:},
value:
function
(value)
}//value為編輯框輸入的內容，這裡我監聽了一下值，當父元件呼叫得時候，如果給value賦值了，子元件將會顯示父元件賦給的值},
mounted()
, methods:
// 自定義 header
this
.editor.customconfig.uploadfilename =
'file'
// 後端接受上傳檔案的引數名
this
.editor.customconfig.uploadimgmaxsize =2*
1024
*1024
// 將大小限制為 2m
this
.editor.customconfig.uploadimgmaxlength =
6// 限制一次最多上傳 3 張
this
.editor.customconfig.uploadimgtimeout =3*
60*1000
// 設定超時時間
// 配置選單
this
.editor.customconfig.menus =
['head'
,// 標題
'bold'
,// 粗體
'fontsize'
,// 字型大小
'fontname'
,// 字型
'italic'
,// 斜體
'underline'
,// 下劃線
'strikethrough'
,// 刪除線
'forecolor'
,// 文字顏色
'backcolor'
,// 背景顏色
'link'
,// 插入鏈結
'list'
,// 列表
'justify'
,// 對齊方式
'quote'
,// 引用
'emoticon'
,// 表情
'image'
,// 插入
'table'
,// **
'video'
,'code'
,// 插入**
'undo'
,// 撤銷
'redo'
,// 重複
'fullscreen'
// 全屏
]this
.editor.customconfig.uploadimghooks =
, success:
(xhr, editor, result)
=>
, timeout:
(xhr, editor)
=>
, error:
(xhr, editor)
=>
, custominsert:
(insertimg, result, editor)
=>}}
this
.editor.customconfig.
onchange
=(html)
=>
// 建立富文字編輯器
this
.editor.
create()
}}}<
/script>
vue中使用富文字編輯器
前端使用富文字編輯器的外掛程式有很多，今天獻上wangeditor的使用教程，教你如何在vue中使用富文字編輯器 先敬上官網 wangeditor是乙個萌新富文字編輯器，基於js和css，重點在於它輕量，如果你需要的功能不是很複雜，那麼選它沒錯了，剛好能滿足你！cdn使用 npm i wangedi...
vue富文字使用詳解
一 cnpm 安裝 vue quill editor cnpm install vue quill editor二 在main.js中引入import vuequilleditor from vue quill editor require styles 引入樣式 import quill dist...
django中使用tinymce 富文字
安裝完成之後，就可以在d python lib site packages django tinymce 2.7.0 py3.6.egg這個資料夾。點選進入資料夾，copy tinymce 這個檔案到你的專案的根目錄下。pip install django tinymce 在settings.py加...