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

  • r语言和python的区别(r语言和python的区别与联系)

    r语言和python的区别(r语言和python的区别与联系)

  • word目录自动生成(word目录)(word目录自动生产页码对不齐)

    word目录自动生成(word目录)(word目录自动生产页码对不齐)

  • 小米10至尊纪念版支持小米妙享跨屏协作吗(小米10至尊纪念版摄像头)

    小米10至尊纪念版支持小米妙享跨屏协作吗(小米10至尊纪念版摄像头)

  • 如何取消开机密码(如何取消开机密码win7)

    如何取消开机密码(如何取消开机密码win7)

  • 快手关注页怎么变成竖屏了(快手关注页怎么变上下翻的了)

    快手关注页怎么变成竖屏了(快手关注页怎么变上下翻的了)

  • ipad无法下载软件(iPad无法下载软件显示稍后再试)

    ipad无法下载软件(iPad无法下载软件显示稍后再试)

  • 荣耀手环3支持nfc吗(荣耀手环3标准版和nfc版区别)

    荣耀手环3支持nfc吗(荣耀手环3标准版和nfc版区别)

  • 电闸跳闸了怎么恢复电(电闸跳闸了怎么开)

    电闸跳闸了怎么恢复电(电闸跳闸了怎么开)

  • 微信中的看一看内容从哪里来的(微信中的看一看打不开怎么修复呢)

    微信中的看一看内容从哪里来的(微信中的看一看打不开怎么修复呢)

  • 淘宝评价6个月可以自动删除吗(淘宝评价6个月自动删除吗)

    淘宝评价6个月可以自动删除吗(淘宝评价6个月自动删除吗)

  • 苹果电脑风扇一直响是什么原因啊(苹果电脑风扇一直响)

    苹果电脑风扇一直响是什么原因啊(苹果电脑风扇一直响)

  • 华为手机有放大功能和望远镜功能吗(华为手机有放大器吗在哪里)

    华为手机有放大功能和望远镜功能吗(华为手机有放大器吗在哪里)

  • 钉钉在线编辑其他人会看到吗(钉钉在线编辑功能)

    钉钉在线编辑其他人会看到吗(钉钉在线编辑功能)

  • 计算机诞生于什么年代(计算机诞生在哪一年)

    计算机诞生于什么年代(计算机诞生在哪一年)

  • qq群文件可以查看是谁下载了吗(qq群文件查看访问记录)

    qq群文件可以查看是谁下载了吗(qq群文件查看访问记录)

  • 苹果11频繁自动重启(苹果11频繁自动关机)

    苹果11频繁自动重启(苹果11频繁自动关机)

  • 通过抖音号能找到那个人的位置吗(通过抖音号能找到什么)

    通过抖音号能找到那个人的位置吗(通过抖音号能找到什么)

  • 华为手机设置自动开关机(华为手机设置自动通话录音)

    华为手机设置自动开关机(华为手机设置自动通话录音)

  • 饿了吗取消订单会退款吗(饿了么取消订单怎么申诉才能成功)

    饿了吗取消订单会退款吗(饿了么取消订单怎么申诉才能成功)

  • 怎样设置一级标题二级标题三级标题(怎样设置一级标题字体)

    怎样设置一级标题二级标题三级标题(怎样设置一级标题字体)

  • 芒果tv学生认证怎么弄(芒果tv学生认证有什么限制)

    芒果tv学生认证怎么弄(芒果tv学生认证有什么限制)

  • 华为荣耀手机otg在哪(华为荣耀手机OTG在哪打开)

    华为荣耀手机otg在哪(华为荣耀手机OTG在哪打开)

  • 手机qq对方撤回的消息怎么看(手机qq对方撤回的照片怎么看)

    手机qq对方撤回的消息怎么看(手机qq对方撤回的照片怎么看)

  • 飞利浦9系比6好在哪(飞利浦九系)

    飞利浦9系比6好在哪(飞利浦九系)

  • 2345浏览器如何启用flash(2345浏览器如何翻译网页)

    2345浏览器如何启用flash(2345浏览器如何翻译网页)

  • 曲面手机屏容易破碎吗(曲面屏手机屏幕容易碎)

    曲面手机屏容易破碎吗(曲面屏手机屏幕容易碎)

  • 查付款记录需要什么?
  • 离职员工奖金发放规定
  • 增值税专票开错了可以作废吗
  • 一般纳税人做外账没有一点成本票怎么办?
  • 企业视同销售的税法依据是什么?
  • 购买固定资产的进项税可以抵扣吗
  • 企业间分红是否需要缴纳企业所得税
  • 服务费发票的税率是多少
  • 经营性投资是什么
  • 税务机关和自然人属于平等主体吗
  • 公司注销之后股东还承担责任吗
  • 收到赠品入库需要用什么记录
  • 体检怎么写公司抬头
  • 去年暂估的成本,汇算前收到的少,红冲全部暂估吗
  • 拆迁补偿款使用范围
  • 建筑安装企业成本费用包括哪些
  • 合法票据的利息计算方法
  • 公司网站费用计入什么科目
  • 修理厂专票怎么开
  • 加计扣除需要注意的几大风险点
  • 商品返点收入账务处理
  • 出口退税成本核算
  • 无形资产有使用期限
  • 政府减免税款如何做账
  • 企业销售使用过的汽车如何开票
  • 怎么解决百度打不开页面
  • 出差人员差旅费作细的说明叫什么
  • 企业发放职工薪酬的账务处理例子
  • 贴现息等于什么
  • npfmntor.exe - npfmntor是什么进程 有什么用
  • 债券的回购
  • php imap函数
  • 医院个人缴费什么意思
  • 国家规定免税饲料具体哪些产品
  • 水獭冬眠吗?
  • 坏账准备的会计准则规定
  • php ffi 性能
  • 麒麟软件的linux桌面操作系统
  • 【AutoGPT】你自己运行,我先睡了—— ChatGPT过时了吗?
  • php 字符串处理函数
  • 云服务器 chia
  • 2021前端热门技术解读
  • ci框架视频教程
  • PHP magento后台无法登录问题解决方法
  • 对公银行卡账户
  • 二氧化剂的使用方法
  • 织梦cms要钱吗
  • SQLServer 2008 R2中使用Cross apply统计最新数据和最近数据
  • jsp连接数据库的步骤
  • 电子承兑汇票到期提示付款后多久到账
  • sql死锁的简单例子
  • 金银首饰以旧换新会计处理
  • 合伙企业费用汇总表
  • 企业取得的财政补贴是否缴纳增值税
  • 用友T3如何取消审核人和制单人不能为同一
  • 委托代销商品是什么科目
  • 确认应付职工薪酬是什么意思
  • 股东出资怎么写
  • 生育保险基金的筹集原则是
  • 免税如何做分录发票
  • 为什么预付账款是资产
  • 购房增值税发票是购房发票吗
  • 咨询费开发票应该选哪一项?
  • 饭店现金账怎么记账
  • 为员工买的商业保险怎么做账
  • 发票作废了还能恢复吗?
  • rpm方式安装
  • linux所谓的free
  • wcu.exe是什么
  • 文件选项夹在哪里
  • xp系统修复怎么操作
  • win7系统开机进不去
  • Android通过HttpURLConnection获取JSON并进行UI更新
  • android开发环境配置
  • Unity3D游戏开发培训课程大纲
  • 可序列化的类被标记为
  • nodejs怎么学
  • js 入门
  • 享受税收优惠影响就业吗
  • 经济增长的术语
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设