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

  • 文化事业建设费征收对象
  • 认缴制的注册资本实缴时存哪里
  • 结算备付金会计分录
  • 水利建设基金计算
  • 经营许可证要交税吗
  • 网络文化传媒公司名字
  • 广告发布需要什么手续
  • 收到补助款怎么入账
  • 本期实际缴费金额指的是什么
  • 企业股利分配政策有哪些
  • 工程材料增值税税率2023年
  • 现金折扣冲减销售收入冲销项税吗
  • 股份支付费用的会计处理怎么做?
  • 事业单位取得了应税收入如何纳税?
  • 收到长期股权投资的现金股利
  • 税率及征收率的区别
  • 企业收取多年租金怎么算
  • 劳务派遣可以开专票吗
  • 企业为职工社保补缴怎么办理
  • 建筑行业一般纳税人简易征收的范围
  • 报表中在产品填什么数据
  • 残保金次年申报
  • 新公司税控盘购买流程
  • 民办非企业捐赠支出会计处理
  • 出租柜台收取的服务费
  • 企业合并的会计分录
  • 员工付款的手续费怎么算
  • ie异常
  • 专项附加扣除如何自行申报
  • 水星mw300re说明书
  • cpqeadm.exe是什么进程 可以关闭吗 cpqeadm进程查询
  • educoder实现折半查找
  • php语言设计模式之单例模式
  • 如何用php制作网页
  • php单例模式懒汉和饿汉
  • 退货业务增值税税务处理
  • 兼职算受雇吗
  • 小微企业所得税优惠政策最新2023
  • 自然人独资企业需要交企业所得税吗
  • 资产负债表中没有专项储备怎么填写
  • 结转成本时库存商品是负数
  • 注册资金认缴期限一般多少
  • 制造费用账户在月末一般没有余额
  • 建筑业无票收入收货款分录
  • 营业成本和生产费用一样吗
  • 转让不动产增值税征收管理办法
  • 记账凭证核算处理方法
  • 固定资产公司
  • 付承包费计入什么科目
  • 利息收入如何开票
  • 公司账户转账转错了能退回来吗
  • 给客户买的礼品要交税吗
  • 进项转出做账做什么会计
  • 其他业务收入在利润表中怎么填写
  • 一个营业执照可以开几个店铺
  • 利润为负还要交增值税吗
  • sqlserver数据库恢复挂起状态
  • 该卡已在其他账户中存在什么意思
  • 存储过程sql server
  • 阿里云安装apache
  • ubuntu server gui
  • win10邮件和日历怎么更新新版outlook
  • centos设置禁ping
  • rcapi.exe - rcapi是什么进程 有什么用
  • linux用户相关命令
  • 获取windows的最新信息
  • win10取消uac
  • es6展开符
  • 简单 粗暴
  • java中遍历数组的方法
  • android get
  • 基于单片机的毕业设计题目
  • 详解金球奖之争
  • 国家税务总局广州市税务局
  • 税收效应分析供求曲线
  • 百旺怎么导出数据
  • 重庆市医疗保障局
  • 青岛个人所得税咨询电话是多少
  • 成都国税工勤人员待遇
  • 税务稽查机构
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设