mavonEditor编辑器的使用

2021-11-11 19:34:46 阅读：339 来源： 互联网

标签：value 编辑器 mavonEditor 使用组件 model save true

本次使用不涉及图片上传，只是简单文本的编辑。
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" />

在这里插入图片描述

标签：value,编辑器,mavonEditor,使用,组件,model,save,true
来源： https://blog.csdn.net/qq_45894929/article/details/121266727

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

mavonEditor编辑器的使用