位置: 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接口测试(很全面的接口测试教程)

  • 怎样用好新闻推送方式进行网站内容传播获得用户(新闻如何推送才能准确优质)

    怎样用好新闻推送方式进行网站内容传播获得用户(新闻如何推送才能准确优质)

  • 四核四线程和四核八线程的区别(四核四线程和四核八线程那个做软路由合适)

    四核四线程和四核八线程的区别(四核四线程和四核八线程那个做软路由合适)

  • 淘宝号2升3心需要多久(淘宝账号升级到3心)

    淘宝号2升3心需要多久(淘宝账号升级到3心)

  • 贴了钢化膜屏幕变迟钝(贴了钢化膜屏幕变黄了)

    贴了钢化膜屏幕变迟钝(贴了钢化膜屏幕变黄了)

  • 打开淘宝音乐就停了怎么办(打开淘宝音乐就停止播放)

    打开淘宝音乐就停了怎么办(打开淘宝音乐就停止播放)

  • 微信怎么删人的同时对方也把我删了(微信怎么删人的视频号)

    微信怎么删人的同时对方也把我删了(微信怎么删人的视频号)

  • 联想电脑进入安全模式是按哪个键(联想电脑进入安全模式)

    联想电脑进入安全模式是按哪个键(联想电脑进入安全模式)

  • 抖音注销后关注你的人还在吗(抖音注销后关注列表里还有吗)

    抖音注销后关注你的人还在吗(抖音注销后关注列表里还有吗)

  • airpods充电一晚上伤电池吗(airpods充电一晚上会坏吗)

    airpods充电一晚上伤电池吗(airpods充电一晚上会坏吗)

  • 微信怎么隐藏通话悬浮窗(微信怎么隐藏通知消息)

    微信怎么隐藏通话悬浮窗(微信怎么隐藏通知消息)

  • 拼多多月卡福利能领多少红包(拼多多月卡福利在哪)

    拼多多月卡福利能领多少红包(拼多多月卡福利在哪)

  • 小米万象息屏会烧屏吗(小米万象息屏会亮吗)

    小米万象息屏会烧屏吗(小米万象息屏会亮吗)

  • iphone11信号不稳定怎么办(iphone11信号不稳定4g消失又出现)

    iphone11信号不稳定怎么办(iphone11信号不稳定4g消失又出现)

  • 华为nova4拍照怎么开滤镜(华为nova4拍照怎么在照片上显示地点)

    华为nova4拍照怎么开滤镜(华为nova4拍照怎么在照片上显示地点)

  • mq8f2ch a是什么版本(mq8d2zp/a是什么版本)

    mq8f2ch a是什么版本(mq8d2zp/a是什么版本)

  • ipad a1822是什么机型(ipad a1822是什么型号)

    ipad a1822是什么机型(ipad a1822是什么型号)

  • 苹果11要不要贴膜

    苹果11要不要贴膜

  • 手机刷机需要多久(手机刷机需要多少元)

    手机刷机需要多久(手机刷机需要多少元)

  • 手机停机了充话费还能用吗(手机停机了充话费后能收到停机时的短信吗?)

    手机停机了充话费还能用吗(手机停机了充话费后能收到停机时的短信吗?)

  • 华为nova5耳机插哪里(华为nova5耳机插上耳机还是外放)

    华为nova5耳机插哪里(华为nova5耳机插上耳机还是外放)

  • 网站宣传方法(网站宣传方法分析)

    网站宣传方法(网站宣传方法分析)

  • 抖音账号注销后还能注册吗(抖音账号注销后作品怎么保存)

    抖音账号注销后还能注册吗(抖音账号注销后作品怎么保存)

  • 抖音和抖音极速版有什么区别(抖音和抖音极速版的区别)

    抖音和抖音极速版有什么区别(抖音和抖音极速版的区别)

  • 爱奇艺vip季卡是什么意思(爱奇艺季卡是多长时间)

    爱奇艺vip季卡是什么意思(爱奇艺季卡是多长时间)

  • 进项税额转出怎么操作
  • 实收资本增加印花税怎么算
  • 横幅属于什么发票范围
  • 五金配件领用管理流程
  • 预付加油卡发票可以报销吗
  • 维保税率和维修税率是多少
  • 本期实际缴费金额指的是什么
  • 电梯生产设备
  • 个人股权转让协议书范本合同
  • 机动车发票申请流程
  • 员工异地缴纳社保协议
  • 融资租赁的固定资产由承租方进行核算,体现了( )原则
  • 房地产开发临时用电
  • 社保基数调整补收是什么意思
  • 企业所得税月交还是年交
  • 生产企业出口退税流程及账务处理
  • 增值税税负率行业标准2022年
  • 小规模国税地税怎么交
  • 购车保险属于什么费用
  • 消费税如何避税计算
  • 单位探望病人如何报销费用?
  • 微信收入与支出是怎么算的
  • ntfs磁盘压缩
  • mac双系统删除window后怎么重新恢复
  • win11比win10是更流畅了吗
  • 文件夹怎么发送不了
  • 合并报表同一控制下和非同一控制下区别
  • 贴吧热门评论
  • linux标准文件和链接文件
  • 医疗保险在外地交了老家还要交吗
  • 定向增发后送股成本价
  • apache是什么文件
  • linux怎么检查网络状态
  • 阿圭罗来自哪里
  • 广告费和业务宣传费调增还是调减
  • 累计摊销属于什么类科目
  • php的项目
  • vue中的icon
  • php的foreach
  • 如何使用php给图片命名
  • 股东分红会计分录案例
  • 外经证逾期未核销
  • 开发支出的含义
  • day29--Java泛型02
  • 处置子公司利润表怎么处理
  • 财政总预算会计的主体是
  • 补交地税多少钱
  • 关于转租电费收取规定
  • 消费税算不算运费
  • 法人股东分红是否免税
  • 印花税技术服务合同包括哪些
  • 什么是房地产企业?它主要具有哪些特性?
  • 装卸费专票
  • 不得从销项税额中抵扣的进项税额,不得计提加计抵减额
  • 短信收到电子退库收入什么意思
  • 记账凭证摘要的填写要求有
  • 预提费用在汇算清缴时调整
  • 印花税的计算公式应纳税所得额包含增值税吗
  • 异地工程可以在公司所在地缴纳税款吗
  • 建筑发票可以一次性抵扣吗
  • win7系统如何查看文件扩展名
  • xp系统打开浏览器没反应
  • linux图形化界面怎么打开命令窗口
  • WorkFlowTray.exe是什么进程
  • 用户请愿地址曝露怎么办
  • Win10系统怎样把Word转成PDF
  • linux oracle 12505
  • 解决的英文
  • node async await
  • unity www读取本地视频文件和外部视频文件 播放视频动画和视频声音
  • unity中mathf
  • javascript如何定义变量
  • renderjs echarts
  • python计算两个数的最大公约数
  • bat实现的模仿黑客帝国里面的数码雨
  • jQuery dataTables与jQuery UI 对话框dialog的使用教程
  • 简述jquery的常用方法
  • python单链表输出1到10
  • 捐赠纳税
  • 中国农村信用社手机银行下载app
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设