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

官網:

1. 首先 在專案中開啟終端 輸入npm install vue-quill-editor 進行安裝

2. 分別引入富文字編輯器及其css樣式
import  from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
3.在專案中掛載

components:

4.配置工具欄（也可使用預設工具欄工具）

modules:,]

,[,]
,[,]
,['image']]
}

5.使用

/**

* 刪除
* @param  article.content  為在data中增添的資料項 用於儲存使用者在富文字書寫的內容
* @param  editoroption 為上面定義的富文字編輯器配置欄
*/"article.content"
:options=
"editoroption"
>
<
/quill-editor>

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

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

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

npm install vue quill editorimport from vue quill editor import quill dist quill.core.css import quill dist quill.snow.css import quill dist quill.bub...

專案中使用富文字編輯器

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