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

  • 苹果怎么设置四位数的锁屏密码(苹果怎么设置四个密码锁)

    苹果怎么设置四位数的锁屏密码(苹果怎么设置四个密码锁)

  • 抖音怎么设置仅朋友可见(抖音怎么设置仅自己可见)

    抖音怎么设置仅朋友可见(抖音怎么设置仅自己可见)

  • 小米黑暗模式怎么开启(小米设置黑暗模式)

    小米黑暗模式怎么开启(小米设置黑暗模式)

  • win10屏幕中间有透明框(win10屏幕中间有个准星怎么消除)

    win10屏幕中间有透明框(win10屏幕中间有个准星怎么消除)

  • 华为手机不显示电量是怎么回事(华为手机不显示sim卡怎么办)

    华为手机不显示电量是怎么回事(华为手机不显示sim卡怎么办)

  • 抖音号注销后工会是不是自动退出(抖音号注销工会)

    抖音号注销后工会是不是自动退出(抖音号注销工会)

  • 苹果ipadwlan和cellular是什么意思(苹果ipadwlan和cellular哪个好)

    苹果ipadwlan和cellular是什么意思(苹果ipadwlan和cellular哪个好)

  • 小米8青春版可以双4g吗(小米8青春版可以开空调吗)

    小米8青春版可以双4g吗(小米8青春版可以开空调吗)

  • 怎么统一更改数字字体(excel如何统一修改数字)

    怎么统一更改数字字体(excel如何统一修改数字)

  • vivo手机关闭hd流程(vivo手机怎么关闭hd)

    vivo手机关闭hd流程(vivo手机怎么关闭hd)

  • 微信运动需要开启定位吗(微信运动需要开蓝牙吗)

    微信运动需要开启定位吗(微信运动需要开蓝牙吗)

  • 荣耀20s怎么安装软件(荣耀20s怎么安装两个微信)

    荣耀20s怎么安装软件(荣耀20s怎么安装两个微信)

  • 华为mate30怎么设置指纹应用锁(华为mate30怎么设置下面三个键)

    华为mate30怎么设置指纹应用锁(华为mate30怎么设置下面三个键)

  • 韩剧tv怎么找不到电影(韩剧tv怎么找不到空房间)

    韩剧tv怎么找不到电影(韩剧tv怎么找不到空房间)

  • qq如何设置彩色昵称(qq如何设置彩色id)

    qq如何设置彩色昵称(qq如何设置彩色id)

  • 苹果怎么打开百度云zip(苹果怎么打开百度下载的软件)

    苹果怎么打开百度云zip(苹果怎么打开百度下载的软件)

  • 小米路由器3有千兆口吗(小米路由器3有几个版本)

    小米路由器3有千兆口吗(小米路由器3有几个版本)

  • 乐高ev3和ev5区别(乐高ev5与ev3)

    乐高ev3和ev5区别(乐高ev5与ev3)

  • 苹果xr是双卡吗(苹果xr是双卡吗?)

    苹果xr是双卡吗(苹果xr是双卡吗?)

  • 建设银行预留号码可以网上改吗(建设银行预留号码注销了怎么更改)

    建设银行预留号码可以网上改吗(建设银行预留号码注销了怎么更改)

  • 华为p20gps在哪里打开(华为p20gps信号不好怎么办)

    华为p20gps在哪里打开(华为p20gps信号不好怎么办)

  • 苹果手机自启动管理在哪(苹果手机自启动管理怎么关)

    苹果手机自启动管理在哪(苹果手机自启动管理怎么关)

  • i912900ks是几纳米(i9是多少纳米的芯片)

    i912900ks是几纳米(i9是多少纳米的芯片)

  • node.js安装及环境配置(保姆级)(nodejs安装及环境配置vue)

    node.js安装及环境配置(保姆级)(nodejs安装及环境配置vue)

  • 印花税申报是含税收入还是不含税收入
  • 支付税金怎么算
  • 什么是富人税收政策
  • 所得税费用是哪类科目
  • 春节商家促销文案
  • 企业股权资本的组成
  • 收入未确认可以结转成本吗
  • 商贸企业增值税优惠政策
  • 补提折旧调整分录
  • 库存现金日记账和库存现金总账都应逐日逐笔
  • 去年多计提了费用今年怎么办
  • 双倍余额递减法折旧公式
  • 广告物料制作费公司怎么做账
  • 小规模商贸公司成本核算方法
  • 个税零申报工资填0吗
  • 金蝶标准版期末结转过不去
  • 事业单位会计科目表及解释
  • 收取会员费收入会计分录
  • 为生产产品而领用材料的实际成本应计入什么账户的借方
  • 什么叫二类费用
  • 转让房产缴纳增值税可以用留底税吗
  • 技术转让减免所得额
  • 样品寄送时运费支付的对策
  • win11正式版好用吗
  • excel中如何选择只能选择的项
  • win10更新kb5006670
  • php魔术方法的讲解与使用
  • movie maker是什么软件
  • win7电脑软键盘怎么打开
  • php statement
  • 增值税发票选择确认平台注意事项
  • 购买财务软件会有操作流程吗
  • 土建工程付款方式比例
  • 缴纳房产税需要扣除折旧吗
  • 纳税人超过应缴纳税额缴纳的税款
  • 融资购入的固定资产如何记账
  • vscode搭建vue开发环境
  • 瑞吉接送
  • 合理损耗如何计算成本
  • 房地产转让条例最新
  • 增值税年末留底
  • 资产负债表和利润表的勾稽关系
  • 发票说明格式
  • 企业固定资产贷款二押的风险
  • 税控盘百科
  • sqlserver2012开发版
  • 企业应付账款的借方登记
  • 营业成本怎么理解
  • 运输公司内账会计每天需要做什么
  • 工业企业制造费用包括哪些
  • 预期信用损失率的确认依据和过程
  • 分公司是否具有独立承担民事责任的能力
  • 固定资产提前报废当月计提折旧吗
  • 如何核算购进商品
  • 售后租回承租人怎么处理
  • 应付账款周转率越大说明什么
  • 什么情形不属于共同犯罪
  • 年终建账于年初建账,在录入期初余额时有什么不一样?
  • 小企业如何建立党支部
  • ubuntu下安装win10
  • Win10系统中怎么用vba控制鼠标
  • linux文件目录的含义
  • debian 单网卡设置双ip
  • FreeGLUT Tips: Resolve compile issue: error LNK1104: cannot open file 'freeglutd.lib'
  • android adapter
  • 比较漂亮的一个字
  • div+css布局的步骤
  • 初始学历是什么意思
  • js出错
  • android在手机上运行
  • Unity3D中的事件处理
  • javascript基于什么的语言
  • Javascript 字符串拼接
  • jquery倒计时代码
  • jquery-easyui-1.3.3
  • 国家税务总局广州市税务局
  • 税务部门三化建设
  • 北京商业企业运行基地
  • 大修费属于什么费用
  • 东莞国税稽查分局局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设