wangEditor工具栏相关配置设置

官网地址：wangEditor
编辑器效果图如下：

安装下令：

1. yarn方式安装
2. #方法1，安装 editor
3. yarn add @wangeditor/editor
4. #方法2，安装 Vue2 组件
5. yarn add @wangeditor/editor-for-vue
6. #方法3，安装 Vue3 组件
7. yarn add @wangeditor/editor-for-vue@next
9. npm方式安装
10. #方法1，安装 editor
11. npm install @wangeditor/editor --save
12. #方法2，安装 Vue2 组件
13. npm install @wangeditor/editor-for-vue --save
14. #方法3，安装 Vue3 组件
15. npm install @wangeditor/editor-for-vue@next --save

复制代码

利用方式，vue中

1. <template>
2.     <div style="border: 1px solid #ccc;">
3.         <Toolbar
4.             style="border-bottom: 1px solid #ccc"
5.             :editor="editor"
6.             :defaultConfig="toolbarConfig"
7.             :mode="mode"
8.         />
9.         <Editor
10.             style="height: 500px; overflow-y: hidden;"
11.             v-model="html"
12.             :defaultConfig="editorConfig"
13.             :mode="mode"
14.             @onCreated="onCreated"
15.         />
16.     </div>
17. </template>
19. <script>
20. import Vue from 'vue'
21. import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
23. export default Vue.extend({
24.     components: { Editor, Toolbar },
25.     data() {
26.         return {
27.             editor: null,
28.             html: '<p>hello</p>',
29.             toolbarConfig: { },
30.             editorConfig: { placeholder: '请输入内容...' },
31.             mode: 'default', // or 'simple'
32.         }
33.     },
34.     methods: {
35.         onCreated(editor) {
36.             this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
37.         },
38.     },
39.     mounted() {
40.         // 模拟 ajax 请求，异步渲染编辑器
41.         setTimeout(() => {
42.             this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
43.         }, 1500)
44.     },
45.     beforeDestroy() {
46.         const editor = this.editor
47.         if (editor == null) return
48.         editor.destroy() // 组件销毁时，及时销毁编辑器
49.     }
50. })
51. </script>

复制代码

工具栏参数设置说明

1. toolbarConfig: {
2.         excludeKeys: [
3.           "headerSelect",// 标题
4.           "blockquote", // 引用
5.           "bold", // 加粗
6.           "underline", // 下划线
7.           "italic", // 斜体
8.           // 删除线、清除格式等
9.           "group-more-style",
10.           {
11.             key: "group-more-style",
12.             title: "更多",
13.             iconSvg:
14.               '<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>',
15.             menuKeys: Array(5)
16.           },
18.           "color", // 文字颜色
20.           "bgColor", // 背景色
22.           "fontSize", // 字号
24.           "fontFamily", // 字体
26.           "lineHeight", // 行高
28.           "bulletedList", // 无序列表
30.           "numberedList", // 有序列表
32.           "todo", // 代办
33.           // 对齐
34.           "group-justify",
35.           {
36.             key: "group-justify",
37.             title: "对齐",
38.             iconSvg:
39.               '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v1…72.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
40.             menuKeys: Array(4)
41.           },
42.           // 缩进
43.           "group-indent"
44.           {
45.             key: "group-indent",
46.             title: "缩进",
47.             iconSvg:
48.               '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v1…32h1024v128H0z m0-128V320l256 192z"></path></svg>',
49.             menuKeys: Array(2)
50.           },
52.           "emotion",// 表情
54.           "insertLink",// 插入链接
55.           // 上传图片
56.           {
57.             key: "group-image",
58.             title: "图片",
59.             iconSvg:
60.               '<svg viewBox="0 0 1024 1024"><path d="M959.877 128…l224.01-384 256 320h64l224.01-192z"></path></svg>',
61.             menuKeys: Array(2)
62.           },
63.           // 上传视频
64.           {
65.             key: "group-video",
66.             title: "视频",
67.             iconSvg:
68.               '<svg viewBox="0 0 1024 1024"><path d="M981.184 160….904zM384 704V320l320 192-320 192z"></path></svg>',
69.             menuKeys: Array(2)
70.           },
72.           "insertTable",// 插入表格
74.           "codeBlock", // 代码块
76.           "divider", // 分割线
78.           "undo", // 撤销
80.           "redo", // 重做
82.           "fullScreen" // 全屏
83.           ]
84.       }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。