位置: IT常识 - 正文

mavon-editor的使用

编辑:rootadmin
mavon-editor的使用

推荐整理分享mavon-editor的使用,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

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使用起来是没有任何问题的。

本文链接地址:https://www.jiuchutong.com/zhishi/294573.html 转载请保留说明!

上一篇:解决vue中报错 Duplicate keys detected:‘1‘. This may cause an update error.(vue运行报错)

下一篇:PostMan接口测试(很全面的接口测试教程)

  • 电脑开机一直蓝屏(电脑开机一直蓝屏转圈)

    电脑开机一直蓝屏(电脑开机一直蓝屏转圈)

  • qq电话挂了后没记录(qq电话挂了后没记录怎么找)

    qq电话挂了后没记录(qq电话挂了后没记录怎么找)

  • 华为出现绿框下拉不动怎么办(华为出现绿框下载怎么办)

    华为出现绿框下拉不动怎么办(华为出现绿框下载怎么办)

  • IP地址如何表示(ip地址怎样表示)

    IP地址如何表示(ip地址怎样表示)

  • 华为HD在哪里(华为hd设置在哪里关闭)

    华为HD在哪里(华为hd设置在哪里关闭)

  • 无线充电器有反应但充不进电(无线充电器有反应但充不进电是那里坏了)

    无线充电器有反应但充不进电(无线充电器有反应但充不进电是那里坏了)

  • 抖音怎么才能发1分钟以上的视频(抖音怎么才能发长视频)

    抖音怎么才能发1分钟以上的视频(抖音怎么才能发长视频)

  • 计算机的主要功能有哪些(计算机的主要功能是进行什么运算)

    计算机的主要功能有哪些(计算机的主要功能是进行什么运算)

  • 荣耀9x怎么设置夜间模式(荣耀9x怎么设置指纹解锁)

    荣耀9x怎么设置夜间模式(荣耀9x怎么设置指纹解锁)

  • win7卡在应用系统设置要多久(win7系统应用程序已停止工作怎么解决)

    win7卡在应用系统设置要多久(win7系统应用程序已停止工作怎么解决)

  • 路由器怎么增强信号强度(路由器怎么增强网络信号)

    路由器怎么增强信号强度(路由器怎么增强网络信号)

  • iphone11录屏在哪里(iphone11录制屏幕在哪)

    iphone11录屏在哪里(iphone11录制屏幕在哪)

  • 路由表中包含哪些核心信息(路由表中包含哪几项)

    路由表中包含哪些核心信息(路由表中包含哪几项)

  • 抖音直播音浪是什么意思(抖音直播音浪是点赞吗)

    抖音直播音浪是什么意思(抖音直播音浪是点赞吗)

  • 爱奇艺互动播放是什么(爱奇艺互动播放怎么使用)

    爱奇艺互动播放是什么(爱奇艺互动播放怎么使用)

  • 用鼠标怎么复制粘贴(用鼠标怎么复制粘贴视频教程)

    用鼠标怎么复制粘贴(用鼠标怎么复制粘贴视频教程)

  • 安卓手机强制格式化(安卓手机强制格式化步骤)

    安卓手机强制格式化(安卓手机强制格式化步骤)

  • ios13闪退怎么解决(ios13.6闪退)

    ios13闪退怎么解决(ios13.6闪退)

  • 手机卡黑名单多久解除(手机卡黑名单多久能恢复正常)

    手机卡黑名单多久解除(手机卡黑名单多久能恢复正常)

  • 抖音里收藏的作品怎么删除(抖音里收藏的作品占内存吗)

    抖音里收藏的作品怎么删除(抖音里收藏的作品占内存吗)

  • docx文件怎样打开(docx文件怎样打开手机)

    docx文件怎样打开(docx文件怎样打开手机)

  • 苹果xr怎么关手电筒(苹果XR怎么关手电筒)

    苹果xr怎么关手电筒(苹果XR怎么关手电筒)

  • nova5pro是双卡双待吗(nova5pro是不是双卡)

    nova5pro是双卡双待吗(nova5pro是不是双卡)

  • 什么是ap(什么是api对接)

    什么是ap(什么是api对接)

  • YOLOv5/v7 引入 最新 BiFusion Neck | 附详细结构图(yolov5 output)

    YOLOv5/v7 引入 最新 BiFusion Neck | 附详细结构图(yolov5 output)

  • 织梦数据库实现调用顶级二级栏目及下三级栏目方法(织梦数据库在哪)

    织梦数据库实现调用顶级二级栏目及下三级栏目方法(织梦数据库在哪)

  • 个人所得税财产租赁所得税率表
  • 房租雇东不开发票只有收据怎么处理?
  • 小规模纳税人注册资金最高多少
  • 小规模纳税人城市维护建设税税率
  • 劳务派遣员工工伤用工单位承担责任吗
  • 资本公积转增股本个人所得税
  • 公司支付保险公司保费怎么做账
  • 普通发票与增值税发票的图片
  • 企业所得有哪些税种
  • 公司转买旧车怎么过户
  • 将自产产品用于投资
  • 产品不合格造成客户损失怎么赔付
  • 收到厂家的销售返利 税收
  • 未分配利润转增股本需要交税吗
  • 晚会主持人化妆
  • 返利失效了怎么找回
  • 虚开增值税专用发票罪判决书
  • 计提工资需要工资表吗
  • 定额发票验旧怎么操作
  • 民办中小学收费新政策
  • 应收账款周转率高好还是低好
  • 公司用窗帘用什么颜色
  • 评估资产没有发票和流水怎么办
  • 应收账款产生的利息分录
  • 社保基数如何计算单位和个人承担多少
  • windows11禁止自动更新
  • 小米路由器599元
  • php图片叠加
  • PHP:iconv_mime_decode()的用法_iconv函数
  • 公益性捐赠申报填列
  • 企业通讯费管理办法
  • 豁免债权如何做账
  • vue中使用md5加密
  • php while true
  • vuex iframe
  • 前端axios请求怎么中断
  • opencv教程
  • 处置固定资产清理费用影响利润吗
  • 企业自行清算的条件是什么
  • 打车费属于差旅费吗
  • 主营营业成本会计分录
  • 织梦不更新了
  • mysql语句like用法
  • mysql字符集详解
  • mongodb主从同步速度
  • 织梦如何做提取卡密
  • 小规模纳税人收入超过500万怎么办
  • 公司借个人借款协议书范本图片
  • 累计折旧会影响净残值吗
  • 企业所得税报表查询怎么查
  • sql查询使用临时表
  • 处置资产增值税纳税义务发生时间
  • 当期免抵税额和免抵退税额的区别
  • 以前年度漏扣个税怎么处理
  • 企业现金购货限额
  • 股权激励费用如何计提
  • 提前还贷款计算机
  • 现金流量的折现值公式
  • linux操作系统基本操作
  • win8激活点不进去
  • freebsd查看硬盘信息
  • centos 空闲磁盘合并
  • win8系统怎么设置桌面图标
  • linux中使用grep命令显示包含特殊字符的行
  • vc精华氧化变黄
  • win7旗舰版64位系统无法进入安全模式怎么办?
  • 如何使用ssh
  • win7系统怎么启用本地连接
  • javascriptz
  • opengl示例
  • 请问在javascript程序中
  • easyui combobox设置值
  • nodejs基础知识
  • jquery .form
  • python调用python脚本
  • jquery弹出窗口
  • jquery iframe src
  • 河南网上税务局app下载
  • 已经开票的房子还能退吗
  • 表彰税务工作者们的活动策划
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设