mavonEditor编辑器的使用

本次使用不涉及图片上传，只是简单文本的编辑。
1.官网
github:https://github.com/hinesboy/mavonEditor

2.安装

npm install mavon-editor --save

3.导入 main.js

//编辑器
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
Vue.use(mavonEditor);

4.使用
1.封装成组件

<template>
  <div class="mavonEditor">
    <mavon-editor
      ref="md"
      :value="mdData"
      :toolbars="markdownOption"  //工具栏是否显示。默认为true
      placeholder=" "
      :editable="readonly"    // 是否允许编辑 默认为true
      @change="change" />
  </div>
</template>
<script>

  export default {
    props: {
      mdData: {
        type: String,
        default: ''
      }, 
      readonly: {
        type: Boolean,
        default: true
      },

    },
    data() {
      return {
        markdownOption: {
          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, // code
          table: true, // 表格
          // fullscreen: true, // 全屏编辑
          // readmodel: true, // 沉浸式阅读
          htmlcode: true, // 展示html源码
          // help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: false, // 保存（触发events中的save事件）
          /* 1.4.2 */
          // navigation: true, // 导航目录
          /* 2.1.8 */
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          /* 2.2.1 */
          // subfield: true // 单双栏模式
        // preview: true // 预览
        },
        mavonValue: ''
      }
    },
 methods: {
      change() {  // 也可以接收 value 和 render参数 获取内容
        this.$emit('update:mdData', this.$refs.md.d_value);
        // console.log(this.$refs.md.d_render);  // 带有标签的内容
        // console.log(this.$refs.md.d_value);  // markdown文本格式
      },
    }
  }
</script>

<style scoped lang="scss">
.mavonEditor {
  width: 100%;
  height: 100%;
  /deep/.v-note-wrapper {
    box-shadow: unset !important;
    border: 1px solid #DCDFE6;
    .v-note-op {
        padding: 0!important;
        width: unset!important;
    }
  }
}
</style>

2.编辑父组件
使用v-bind.sync进行子父组件传值，若子组件绑定数据使用v-model，进行会报下边的错误，子组件不能更改父组件中的内容。此插件中可使用:value

特别是当子组件使用了某些第三方 UI 组件库的时候，在子组件内进行了 v-model 双向绑定，而该值又需父组件传入 props 进行依赖，于是当第三方组件事件被触发导致 v-model 值发生改变，就产生了冲突，因为此时父级传入的 props 不可更改。子组件的v-model就不受控了

 <mavon-editor :md-data.sync="info.templateContent" />

3.回显父组件

 <mavon-editor
  :md-data="info.templateContent"
  :readonly="false" />