富文本插件Quill的基本使用
- 插件基本介紹
- 引入
import 'quill/dist/quill.snow.css'
import Quill from 'quill'
- 配置基本功能
<div id="editor" class="editor"></div>
mounted() {
// 初始化功能
const toolbarOptions = [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 標題字體
[{ 'font': [] }], // 字體
['bold', 'italic', 'underline', 'strike'], // 切換按鈕
[{ 'align': [] }], // 對齊方式
['blockquote', 'code-block'], // 文本塊/代碼塊
[{ 'header': 1 }, { 'header': 2 }], // 用戶自定義按鈕值
[{ 'list': 'ordered'}, { 'list': 'bullet' }], // 有序/無序列表
[{ 'script': 'sub'}, { 'script': 'super' }], // 上標/下標
[{ 'indent': '-1'}, { 'indent': '+1' }], // 減少縮進/縮進
[{ 'color': [] }, { 'background': [] }], // 主題默認下拉寄症，使用主題提供的值
['clean'], // 清除格式
['image', 'link', 'video'] // 圖片 / 鏈接 / 視頻
]
// 掛載
this.$nextTick(() => {
this.quills = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow', // 使用主題樣式
placeholder: '請輸入內容'
})
})
}
- 基本方法
// 獲取內容length
const length = this.quills.getLength() - 1 // 注意要-1
// 獲取純文本
const temptext = this.quills.getText() // 獲取文本
const text = temptext.trim().replace(/\s/g, '') // 去掉多余的空格
// 獲取html
const html = this.quills.root.innerHTML // 官方不推薦直接獲取html，有getContent方法
// 初始化賦值
this.quills.root.innerHTML = html
- 注意事項
- 自定義功能較麻煩
- 圖片是以img標簽插入的盏浙，src是base64的文件流鞋屈，沒有先上傳旺韭，所以造成文本內容可能會很大
