vue專案中加入富文字編輯器

npm install vue-quill-editor

import

from 'vue-quill-editor'
import
'quill/dist/quill.core.css'
import
'quill/dist/quill.snow.css'
import
'quill/dist/quill.bubble.css'

components:

,

"noticeform.content"

:options=
"editoroption"
style=
"height:320px;width:96%"
>
<
/quill-editor>

在date return中

data()

,],// 標題，鍵值對的形式；1、2表示字型大小[,
],//列表[,
],// 上下標[,
],// 縮排
,// 文字方向
,// 字型大小
,//幾級標題[,
],// 字型顏色，字型背景顏色
,//字型
,//對齊方式
['clean'],
//清除字型樣式
['image'
,'video'],
],},
},}}

"padding: 0px"
>
"24"
>
"form"
:model=
"form"
label-width=
"80px"
style=
"margin: 20px 40px 0px 40px"
label-position=
"left"
hide-required-asterisk
:rules=
"rules"
>
"12"
>
"form.content"
:options=
"editoroption"
style=
"height:320px;width:96%"
>
<
/quill-editor>
<
/el-col>
<
/el-row>
<
/el-form>
<
/el-col>
<
/div>
<
/template>
import
from 'vue-quill-editor'
import
'quill/dist/quill.core.css'
import
'quill/dist/quill.snow.css'
import
'quill/dist/quill.bubble.css'
export default
, props:
['form'],
data()
,],// 標題，鍵值對的形式；1、2表示字型大小[,
],//列表[,
],// 上下標[,
],// 縮排
,// 文字方向
,// 字型大小
,//幾級標題[,
],// 字型顏色，字型背景顏色
,//字型
,//對齊方式
['clean'],
//清除字型樣式
['image'
,'video'],
],},
},}}
,mounted()
, methods:
<
/script>
//css樣式省略
<
/style>

vue專案中新增富文字編輯器

官網 1.首先 在專案中開啟終端 輸入npm install vue quill editor 進行安裝 2.分別引入富文字編輯器及其css樣式 import from vue quill editor import quill dist quill.core.css import quill di...

富文字 Vue專案中如何整合富文字編輯器

富文字編輯器 在 你的專案 build webpack.dev.conf.js 中新增如下配置 templateparameters 目的 為了在html頁面中能夠使用這裡定義的base url變數 由於富文字編輯器是第三方提供的，需要把它的指令碼引入進來才能使用。在 你的專案 index.html...

專案中使用富文字編輯器

例 編輯器有很多可自定義的引數項，在例項化的時候可以傳入給編輯器，詳詢 api文件 this.editor window.ue.geteditor container this.editor.addlistener contentchange 效果展示 this.editor.txt.html sa...