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

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

富文本组件vue-quill-editor使用_第1张图片

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即可

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": {}
		}
	}
}

3.报错:quill Cannot import modules/imageDrop. Are you sure it was registered?

类似以下报错,应该就是配置错了

富文本组件vue-quill-editor使用_第2张图片

你可能感兴趣的:(Vue框架与实战,Vue,富文本编辑)