vue中使用富文字編輯器

2021-09-25 04:14:05 字數 410 閱讀 7591

前端使用富文字編輯器的外掛程式有很多,今天獻上wangeditor的使用教程,教你如何在vue中使用富文字編輯器

先敬上官網:

wangeditor是乙個萌新富文字編輯器,基於js和css,重點在於它輕量,如果你需要的功能不是很複雜,那麼選它沒錯了,剛好能滿足你!

cdn使用:

npm i wangeditor -s
第二步:在專案中引入該外掛程式並定義html結構,我這裡使用vue腳手架,沒有使用腳手架和其他構建工具的同學可以使用script標籤對外掛程式進行引用

例如:

vue 使用 富文字編輯器

1安裝依賴 npm i quill s npm i vue quill editor s 2.上 元件 如下 template edit container 編輯器 content ref myquilleditor options editoroption blur oneditorblur ev...

vue的富文字編輯器

在 vue 專案中引入 tinymce 富文字編輯器 專案中原本使用的富文字編輯器是 wangeditor,這是乙個很輕量 簡潔編輯器 bootstrap wysiwyg 微型,易用,小而美,只是 bootstrap jquery kindeditor 功能強大,簡潔,需要配置後台,而且好久沒見更新...

專案中使用富文字編輯器

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