官网地址：wangEditor

编辑器效果图如下：

安装命令：

<code>yarn方式安装

#方法1，安装 editor

yarn add @wangeditor/editor

#方法2，安装 Vue2 组件

yarn add @wangeditor/editor-for-vue

#方法3，安装 Vue3 组件

yarn add @wangeditor/editor-for-vue@next

npm方式安装

#方法1，安装 editor

npm install @wangeditor/editor --save

#方法2，安装 Vue2 组件

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

#方法3，安装 Vue3 组件

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

使用方式，vue中

<template>

<div style="border: 1px solid #ccc;">code>

<Toolbar

style="border-bottom: 1px solid #ccc"code>

:editor="editor"code>

:defaultConfig="toolbarConfig"code>

:mode="mode"code>

/>

<Editor

style="height: 500px; overflow-y: hidden;"code>

v-model="html"code>

:defaultConfig="editorConfig"code>

:mode="mode"code>

@onCreated="onCreated"code>

/>

</div>

</template>

<script>

import Vue from 'vue'

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default Vue.extend({

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() ，否则会报错

},

},

mounted() {

// 模拟 ajax 请求，异步渲染编辑器

setTimeout(() => {

this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'

}, 1500)

},

beforeDestroy() {

const editor = this.editor

if (editor == null) return

editor.destroy() // 组件销毁时，及时销毁编辑器

}

})

</script>

工具栏参数设置说明

toolbarConfig: {

excludeKeys: [

"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>',code>

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>',code>

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>',code>

menuKeys: Array(2)

},

"emotion",// 表情

"insertLink",// 插入链接

// 上传图片

{

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>',code>

menuKeys: Array(2)

},

// 上传视频

{

key: "group-video",

title: "视频",

iconSvg:

'<svg viewBox="0 0 1024 1024"><path d="M981.184 160….904zM384 704V320l320 192-320 192z"></path></svg>',code>

menuKeys: Array(2)

},

"insertTable",// 插入表格

"codeBlock", // 代码块

"divider", // 分割线

"undo", // 撤销

"redo", // 重做

"fullScreen" // 全屏

]

}