wangEditor工具栏相关配置设置
官网地址：wangEditor编辑器效果图如下：https://i-blog.csdnimg.cn/direct/f5fb03eda9be48fda65ec4793ad06c99.png
安装下令：
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;">
<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"
/>
</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>',
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",// 插入链接
// 上传图片
{
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)
},
// 上传视频
{
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" // 全屏
]
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]