富文本组件vue-quill-editor使用

最新推荐文章于 2024-05-07 08:15:33 发布

Jyann~

最新推荐文章于 2024-05-07 08:15:33 发布

阅读量276

点赞数

分类专栏： Vue框架与实战 Vue 文章标签：富文本编辑

本文链接：https://blog.csdn.net/qq_34569497/article/details/134394730

版权

Vue 同时被 2 个专栏收录

89 篇文章 7 订阅

订阅专栏

Vue框架与实战

23 篇文章 0 订阅

订阅专栏

版本："vue-quill-editor": "^3.0.6",

1.全局引入

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

Vue.use(VueQuillEditor)

2.使用：直接使用组件quill-editor即可

<quill-editor
          class="editor"
          v-model="configData.content"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
          @ready="onEditorReady($event)"
        ></quill-editor>

editorOption配置：

{
	"placeholder": "",
	"modules": {
		"toolbar": {
			"container": [
				["bold", "italic", "underline", "strike"],
				[{
					"list": "ordered"
				}, {
					"list": "bullet"
				}],
				[{
					"direction": "rtl"
				}],
				["clean"],
				[{
					"header": [1, 2, 3, 4, 5, 6, false]
				}],
				[{
					"align": []
				}],
				[{
					"color": []
				}, {
					"background": []
				}],
				["image"]
			],
			"handlers": {}
		}
	}
}