wangEditor官网地址
https://www.wangeditor.com/
安装依赖
yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --saveyarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --savexxx.vue文件示例
<template><div style="border: 1px solid #ccc;"><Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" /><Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" @onChange="onChange" /></div>
</template><script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { DomEditor } from "@wangeditor/editor";
export default {components: { Editor, Toolbar },data() {return {editor: null,html: '<p>hello</p>',toolbarConfig: {},editorConfig: { placeholder: '请输入内容...' },mode: 'default', // or 'simple'}},methods: {onCreated(editor) {this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错},onChange(editor) {const toolbar = DomEditor.getToolbar(editor);const curToolbarConfig = toolbar.getConfig();console.log(curToolbarConfig.toolbarKeys); // 当前菜单排序和分组},},mounted() {// 模拟 ajax 请求，异步渲染编辑器setTimeout(() => {this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'}, 1500)},beforeDestroy() {const editor = this.editorif (editor == null) returneditor.destroy() // 组件销毁时，及时销毁编辑器}
}
</script><style src="@wangeditor/editor/dist/css/style.css"></style>工具栏配置Key
["headerSelect",// 标题"blockquote", // 引用"bold", // 加粗"underline", // 下划线"italic", // 斜体// 删除线、清除格式等"group-more-style",{key: "group-more-style",title: "更多",iconSvg:'<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6…0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>',menuKeys: Array(5)},"color", // 文字颜色"bgColor", // 背景色"fontSize", // 字号"fontFamily", // 字体"lineHeight", // 行高"bulletedList", // 无序列表"numberedList", // 有序列表"todo", // 代办// 对齐"group-justify",{key: "group-justify",title: "对齐",iconSvg:'<svg viewBox="0 0 1024 1024"><path d="M768 793.6v1…72.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',menuKeys: Array(4)},// 缩进"group-indent",{key: "group-indent",title: "缩进",iconSvg:'<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v1…32h1024v128H0z m0-128V320l256 192z"></path></svg>',menuKeys: Array(2)},"emotion",// 表情"insertLink",// 插入链接"group-image",// 上传图片{key: "group-image",title: "图片",iconSvg:'<svg viewBox="0 0 1024 1024"><path d="M959.877 128…l224.01-384 256 320h64l224.01-192z"></path></svg>',menuKeys: Array(2)},"group-video",// 上传视频{key: "group-video",title: "视频",iconSvg:'<svg viewBox="0 0 1024 1024"><path d="M981.184 160….904zM384 704V320l320 192-320 192z"></path></svg>',menuKeys: Array(2)},"insertTable",// 插入表格"codeBlock", // 代码块"divider", // 分割线"undo", // 撤销"redo", // 重做"fullScreen" // 全屏
]
