vue实现富文本编辑器的具体方法

本文主要是介绍vue实现富文本编辑器的具体方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

可以实现富文本的插件：vue-quill-editor、editor-for-vue

我们以 editor-for-vue 为例实现：

传送门：wangEditor官网地址

安装：

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue --save

具体使用方法：
引入样式及组件

<template><div style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig":mode="mode"/><Editor:disabled="disabled"style="height: 500px; overflow-y: hidden;"v-model="html":defaultConfig="editorConfig":mode="mode"@onCreated="handleCreated"/></div>
</template><script>
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {components: { Editor, Toolbar },// propsdata() {return {isView: true,editor: null,disabled: true,html: '<p>hello</p>',toolbarConfig: { },editorConfig: { placeholder: '请输入内容...' },mode: 'simple', // or 'default'}},methods: {handleCreated(editor) {this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错// 实现编辑器的禁用if(this.isView){this.editor.disable()}},},beforeDestroy() {const editor = this.editorif (editor == null) returneditor.destroy() // 组件销毁时，及时销毁编辑器}
}
</script><style></style>

实现效果：

这篇关于vue实现富文本编辑器的具体方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---