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

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

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

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

猜你喜欢

转载自blog.csdn.net/qq_34569497/article/details/134394730
今日推荐