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

  • 苹果8p怎么装两张卡(苹果8p怎么装两个手机卡)

    苹果8p怎么装两张卡(苹果8p怎么装两个手机卡)

  • qq深色模式怎么关闭(qq深色模式怎么关闭不了)

    qq深色模式怎么关闭(qq深色模式怎么关闭不了)

  • 苹果11怎么连接声卡(苹果11怎么连接苹果手表)

    苹果11怎么连接声卡(苹果11怎么连接苹果手表)

  • 复制文件经过内存吗(复制文件显示进度)

    复制文件经过内存吗(复制文件显示进度)

  • 华为平板横屏无法全屏(华为平板横屏无法全屏钉钉)

    华为平板横屏无法全屏(华为平板横屏无法全屏钉钉)

  • 贴吧怎么关闭地址显示(贴吧怎么关闭地区显示)

    贴吧怎么关闭地址显示(贴吧怎么关闭地区显示)

  • vivo手机散热方法(vivo手机怎么散热功能在哪儿)

    vivo手机散热方法(vivo手机怎么散热功能在哪儿)

  • 华为手机开机出现绿色机器人(查找我的华为手机)

    华为手机开机出现绿色机器人(查找我的华为手机)

  • nova7pro可以无线充电吗(nova7pro可以无线充电不)

    nova7pro可以无线充电吗(nova7pro可以无线充电不)

  • oppopchm10是什么手机(oppo的pchm10是什么型号)

    oppopchm10是什么手机(oppo的pchm10是什么型号)

  • 华为mate30屏幕出现一个圈(华为mate30屏幕出现一条竖条)

    华为mate30屏幕出现一个圈(华为mate30屏幕出现一条竖条)

  • 怎样查看健康码(怎样查看健康码绑定的手机号)

    怎样查看健康码(怎样查看健康码绑定的手机号)

  • 一加7怎么录入指纹(一加7怎么录入北京一卡通)

    一加7怎么录入指纹(一加7怎么录入北京一卡通)

  • 喵喵机扫码连接失败(喵喵机扫码连接没反应)

    喵喵机扫码连接失败(喵喵机扫码连接没反应)

  • iphonexr支持反向充电吗(xr支持反向充电)

    iphonexr支持反向充电吗(xr支持反向充电)

  • 探探左滑代表什么(探探左滑是)

    探探左滑代表什么(探探左滑是)

  • 微信怎么设置密码不让人看零钱(微信怎么设置密码别人打不开微信)

    微信怎么设置密码不让人看零钱(微信怎么设置密码别人打不开微信)

  • 荣耀9x屏幕是天马屏吗(荣耀9x的屏幕是)

    荣耀9x屏幕是天马屏吗(荣耀9x的屏幕是)

  • 华为nova5录音机在哪里(华为荣耀手机录音机在哪)

    华为nova5录音机在哪里(华为荣耀手机录音机在哪)

  • 笔记本电源灯不亮开不了机(笔记本电源灯不亮能开机)

    笔记本电源灯不亮开不了机(笔记本电源灯不亮能开机)

  • Windows10 2009永久激活秘钥怎么获得 win10神key分享(win10永久激活2021)

    Windows10 2009永久激活秘钥怎么获得 win10神key分享(win10永久激活2021)

  • 临时文件夹可以删除吗详细介绍(临时 文件夹)

    临时文件夹可以删除吗详细介绍(临时 文件夹)

  • 天生桥国家保护区中的sipapu桥,犹他州 (© Fyletto/Getty Images)(用彩泥可以做什么食物?)

    天生桥国家保护区中的sipapu桥,犹他州 (© Fyletto/Getty Images)(用彩泥可以做什么食物?)

  • java--IO流 ☞ 字节流

    java--IO流 ☞ 字节流

  • 未开具的增值税专用发票怎么作废
  • 增值税和附加税如何计算
  • 违约金的专票能抵扣吗
  • 资产管理公司的使命
  • 应付账款现金流量表指定
  • 个体工商户可以给员工交社保吗
  • 个人如何对公账户汇款
  • 管理费用期末有余额么
  • 预缴税款是否可以强制执行
  • 工业企业的三个阶段
  • 可供出售金融资产和交易性金融资产
  • 亏损企业对外捐赠的税前扣除
  • 银行承兑个人可以接受吗
  • 挂靠企业所得税怎么办?
  • 处理固定资产一个月卖一点
  • 堤围内的土地性质
  • 企业报销发票都需要什么
  • 年内累计增量和年度增量计算公式
  • 施工单位企业税率是多少
  • 外购的货物用于集体福利是销售吗
  • 稽查查补是什么意思
  • 以前的纳税申报表还能打印吗
  • 职工福利费的扣除限额怎么算
  • 什么电脑系统比较好
  • win7系统咋样
  • 苹果手机查找对方手机位置看不到
  • 预算周转金会计怎么做账
  • 城镇土地使用税的计算公式
  • 前端实现微信联系人二维码
  • php框架有哪些官网
  • JavaScript数组长度
  • 没有发票的支出可以扣除企业所得税么
  • 补交上年度的企业所得税税款计入什么科目
  • 工业企业增值税税负多少合理
  • 三险一金的专项扣除标准
  • 企业增值税专用发票抵扣流程
  • 物业合并利润表怎么填
  • 企业所得税的成本怎么填?
  • 商品流通企业的种类
  • 减免增值税的账务处理是什么
  • 电子承兑汇票到期提示付款后多久到账
  • 审计岗位能力要求是什么
  • 用友t6自定义结转
  • 复利年金的区别
  • 现金余额出现负数的原因
  • 怎样暂估成本的会计分录
  • 跨月报销的算当月还是上个月的
  • 厂家给经销商的补贴怎么开票
  • 房租费用计入什么现金流量
  • 驾校挂靠车辆账务处理是?
  • 数字证书如何申报社保
  • 商业承兑汇票贴现流程
  • 小规模公司用什么成本核算方法
  • 残疾人就业保障金征收使用管理办法
  • 收付转三种凭证的限制类型
  • 收到固定资产怎么做账
  • 小规模纳税人买车可以抵扣哪些税
  • 私营公司待摊费怎么算
  • 民营企业固定资产管理规定
  • 会计账簿按用途分类可以分为
  • mysql查询条件不区分大小写
  • c 语言 mysql
  • windowsxp怎么用
  • win8无法连接wifi
  • win7出现蓝屏如何解决
  • ubuntu16.04怎么改成中文
  • win8录音文件保存在哪
  • 在linux系统中,用来存放系统所需要的配置文件
  • Centos7 中 Node.js安装简单方法
  • shell脚本编写 方法
  • js深度拷贝的方法
  • java arraysort
  • 安卓自定义app
  • 个体户开票怎么开步骤
  • 河北省国家税务局长简介
  • 进口商品的消费税计入成本吗
  • 国家税务总局纳税服务司罗名
  • 东莞各税务分局电话
  • 建筑施工企业一级资质企业,安全生产管理
  • 孝感契税缴纳标准
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设