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><divclass="rich":style="{ width: width }"><mavon-editorref="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><scriptsetuplang="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,// codetable: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存储constimgAdd=(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);// }};constchange=(val)=>{emit('richVal', val);};constimageClick=(data)=>{
    previewImg.value =[];
    previewImg.value.push(data.src);
    showViewer.value =true;
    document.documentElement.style.overflowY ='hidden ';};</script><stylescopedlang="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"/>

//获取富文本内容constgetDescription=(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使用起来是没有任何问题的。