ToB企服应用市场:ToB评测及商务社交产业平台

标题: wangEditor工具栏相关配置设置 [打印本页]
作者: 没腿的鸟    时间: 2024-10-11 16:50
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4