目录

• • • 下载mavonEditor
    • 导入并注册mavonEditor组件
    • • [1] 全局注册
      • [2]局部注册
    • 使用mavonEditor
    • • 属性修改
      • • 举例说明1-不展示预览分屏
        • 工具栏修改
        • • 举例说明-根据配置显示工具栏
          • 编辑器插槽
          • 举例说明-自定义工具栏按钮
      • 函数监听

下载mavonEditor

使用命令 npm install mavon-editor --s 进行下载；

导入并注册mavonEditor组件

[1] 全局注册

import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

[2]局部注册

• 此时会报错
  
  

  • css文件找不到

• 解决1：将组件进行局部注册，但是css文件进行全局引入

    // main.js文件import 'mavon-editor/dist/css/index.css'
  

• 解决2: 局部注册

• 总结：(感觉是)

  • 在main.js文件引入node_modules中的样式文件会自动以node_modules 作为当前路径进行查找；
  • 在组件中引入会以当前组件所在的文件夹作为当前路径进行查找；

使用mavonEditor

在注册之后直接当做标签使用

默认为如下样式

如果想要修改一些默认样式，比如默认不显示预览区域，请看属性修改

属性修改

mavonEditior的属性如下：

举例说明1-不展示预览分屏

工具栏修改

有时不想在工具栏展示如此多的选项，就可以使用toolbars属性中进行修改。
toolbars属性为一个对象，具体属性如下：

  toolbars: {bold: true, // 粗体italic: true, // 斜体header: true, // 标题underline: true, // 下划线strikethrough: true, // 中划线mark: true, // 标记superscript: true, // 上角标subscript: true, // 下角标quote: true, // 引用ol: true, // 有序列表ul: true, // 无序列表link: true, // 链接imagelink: true, // 图片链接code: true, // codetable: true, // 表格fullscreen: true, // 全屏编辑readmodel: true, // 沉浸式阅读htmlcode: true, // 展示html源码help: true, // 帮助undo: true, // 上一步redo: true, // 下一步trash: true, // 清空save: true, // 保存（触发events中的save事件）navigation: true, // 导航目录alignleft: true, // 左对齐aligncenter: true, // 居中alignright: true, // 右对齐subfield: true, // 单双栏模式preview: true // 预览},

举例说明-根据配置显示工具栏

如上图-> 只想展示这几个工具

this.toolbars = {bold: true, // 粗体italic: true, // 斜体underline: true, // 下划线alignleft: true, // 左对齐aligncenter: true, // 居中alignright: true, // 右对齐ol: true, // 有序列表link: true, // 链接imagelink: true, // 图片链接preview: true, // 预览undo: true, // 上一步redo: true, // 下一步
}

配置之后的工具栏如下图：

编辑器插槽

编辑器其实带有四个插槽，分别是左工具栏前，左工具栏后，右工具栏前，右工具栏后

• left-toolbar-before
• left-toolbar-after
• right-toolbar-before
• right-toolbar-after
  可以使用这几个插槽进行一个自定义工具栏按钮的封装。

举例说明-自定义工具栏按钮

如上图想做一个用户可以修改输入文本的字体大小的功能；

实现-html
使用插槽自定义一个工具栏下拉框

javsscript
文本内容的字体大小是通过 属性 fontSize 来设置的默认是14px;
当用户修改下拉框选中值时，手动修改fontSize属性值

methods:{mavonfontsizechange(value) {this.mavonEditorValue.fontSize = value}
}

函数监听

111

参考文档

• https://blog.csdn.net/qq_43403676/article/details/124409715
• https://baijiahao.baidu.com/s?id=1741781552687901491&wfr=spider&for=pc
• https://www.jianshu.com/p/381f7f4d8ad9
• https://blog.csdn.net/qq_22841387/article/details/118602316