vue 使用 富文字編輯器

1安裝依賴

npm i quill -s

npm i vue-quill-editor -s

<

!-- 元件**如下 --
>
<
template
>
="edit_container"
>
<
!-- 編輯器 --
>
"content" ref=
"myquilleditor"
:options=
"editoroption" @blur=
"oneditorblur($event)" @focus=
"oneditorfocus($event)"
@change=
"oneditorchange($event)"
>
<
/quill-editor>
<
/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'
;  import axios from 'axios'
export
default
,data()
,}},
methods:
,oneditorblur()
,// 失去焦點事件
oneditorfocus()
,// 獲得焦點事件
oneditorchange
(res)
,// 內容改變事件},
computed:,}
}<
/script>
.edit_container 
.quill-editor 
<
/style>3、結果
高寬可以自己調
				
vue中使用富文字編輯器
前端使用富文字編輯器的外掛程式有很多，今天獻上wangeditor的使用教程，教你如何在vue中使用富文字編輯器 先敬上官網 wangeditor是乙個萌新富文字編輯器，基於js和css，重點在於它輕量，如果你需要的功能不是很複雜，那麼選它沒錯了，剛好能滿足你！cdn使用 npm i wangedi...
				
vue的富文字編輯器
在 vue 專案中引入 tinymce 富文字編輯器 專案中原本使用的富文字編輯器是 wangeditor，這是乙個很輕量 簡潔編輯器 bootstrap wysiwyg 微型，易用，小而美，只是 bootstrap jquery kindeditor 功能強大，簡潔，需要配置後台，而且好久沒見更新...
				
vue獲取編輯器純文字 vue富文字編輯器
工具欄配置 const options bold italic underline strike 加粗 斜體 下劃線 刪除線 blockquote code block 引用 塊 1 2 級標題 有序 無序列表 上標 下標 縮排 文字方向 字型大小 標題 字型顏色 字型背景顏色 字型種類 對齊方式 ...