mavon-editor的使用

vue3+vite+ts下安装mavon-editor 3.0.0-beta版本，效果如下：

安装

//引入样式
import 'mavon-editor/dist/css/index.css';
import mavonEditor from 'mavon-editor';
app.use(router).use(mavonEditor).mount('#app');

<template>
  <div class="rich" :style="{ width: width }">
    <mavon-editor
      ref="mavon"
      v-model="value"
      :toolbars="markdownOption"
      :toolbars-flag="toolbarsFlag"
      :subfield="editPreview === 'edit'"
      preview-background="#fff"
      :box-shadow="false"
      :autofocus="autofocus"
      :placeholder="placeholder"
      :style="{ 'min-height': height }"
      :ishljs="true"
      :default-open="defaultopen"
      style="height: 100%; width: 100%"
      :image-click="imageClick"
      @change="change"
      @img-add="imgAdd"
  /></div>
</template>
<script setup lang="ts">
  import {
      
       ref, watch } from 'vue';

  // import Api from '@/apis';
  const props = withDefaults(
    defineProps<{
      
      
      content?: string;
      richHeight?: string;
      editPreview?: string;
      placeholder?: string;
      autofocus?: boolean;
      width?: string;
    }>(),
    {
      
      
      content: '',
      richHeight: '300px',
      editPreview: 'preview',
      placeholder: '',
      autofocus: false,
      width: '100%',
    },
  );

  const emit = defineEmits<{
      
       (e: 'richVal', value: any): void }>();
  const mavon = ref();
  const value = ref('');
  const height = ref('200px');
  const toolbarsFlag = ref(false);
  const defaultopen = ref('preview');
  const showViewer = ref(false);
  const previewImg = ref<any>([]);
  const markdownOption = ref({
      
      
    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, // 帮助
    undo: true, // 上一步
    redo: true, // 下一步
    trash: true, // 清空
    save: false, // 保存（触发events中的save事件）
    navigation: true, // 导航目录
    alignleft: true, // 左对齐
    aligncenter: true, // 居中
    alignright: true, // 右对齐
    subfield: true, // 单双栏模式
    preview: true, // 预览
  });
  watch(
    () => props.editPreview,
    (val) => {
      
      
      defaultopen.value = val;
      toolbarsFlag.value = val === 'edit';
    },
    {
      
       immediate: true, deep: true },
  );
  watch(
    () => props.content,
    (val) => {
      
      
      value.value = val;
    },
    {
      
       immediate: true, deep: true },
  );
  watch(
    () => props.richHeight,
    (val) => {
      
      
      height.value = val;
    },
    {
      
       immediate: true, deep: true },
  );
  // 后端接口设计为base64存储
  const imgAdd = (pos, $file) => {
      
      
      mavon.value.$img2Url(pos, $file.miniurl);
    // var formData = new FormData();
    // formData.append('file', $file);
    // const res: any = await api({});
    // if (res.code === 0) {
      
      
    // mavon.value.$img2Url(pos, res.data);
    // } else {
      
      
    //   mavon.value.$img2url(pos, '图片上传失败! ');
    //   ElMessage.warning(res.errMsg);
    // }
  };
  const change = (val) => {
      
      
    emit('richVal', val);
  };
  const imageClick = (data) => {
      
      
    previewImg.value = [];
    previewImg.value.push(data.src);
    showViewer.value = true;
    document.documentElement.style.overflowY = 'hidden ';
  };
</script>
<style scoped lang="scss">
  .rich {
      
      
    width: 100%;
    height: 100%;
    line-height: 30px;

    :deep(.v-note-wrapper) {
      
      
      .v-note-op .v-left-item,
      .v-right-item {
      
      
        flex: none !important;
        -webkit-flex: none !important;
        -ms-flex: none !important;
        flex-wrap:wrap;
      }
    }
  }
</style>

使用（编辑）

<e-rice
                :content="desc"
                placeholder="请输入"
                edit-preview="edit"
                :toolbars-flag="true"
                @rich-val="getDescription"
              />
              

//获取富文本内容
 const getDescription = (val) => {
    
    
    desc = val;
    formRef.value?.validateField('description');
  };

使用（预览）

<e-rice
                  :content="desc"
                  edit-preview="preview"
                  :toolbars-flag="false"
                  rich-height="fit-content"
              />

注意！！！！！！mavon-editor会有xss攻击，虽然官网配置了xssoptions，但是目前vue3版本下只能适配3.0.0-beta，开启xssOptions后所有尖括号都会被转义，并且用户体验性极差，官网目前还没修复这个问题，需要自己修改源码，谨慎使用。
目前vue2可以适配v2.10.4版本开启xssOptions使用起来是没有任何问题的。