富文本编辑器mavon-editor文章回显

2024-05-24 21:31:54

继上篇安装使用mavon-editor，本篇讲述文章回显问题

使用富文本编辑器就是为了实现发布帮助文档和公告新闻类的编辑功能，文章编辑完毕自然要在页面中展示出来。文章的排版和样式自然要同在编辑器中的一样美观。

然而在回显的过程中直接使用后台返回的HTML代码显示时发现和在编辑器中预览时的样式不一致

于是乎查找资料后发现需要加上样式才行
1.首先引入<link href="https://cdn.bootcss.com/github-markdown-css/2.10.0/github-markdown.min.css" rel="stylesheet">
2.在页面渲染区加上class属性 markdown-body

然后渲染到页面的内容格式也就同在编辑器中预览时一样了。

HTML回显样式解决后还有一个问题，就是图片的回显

编辑过程中难免会插入一些图片进行更加直观的辅助说明，现在出现的问题就是，图片上传以后是以base64格式进行上传的，当遇到图片较大时回显时会加载不出来。
所以就将图片上传到服务器，再以url回显到文章中。这里要给富文本编辑器mavon-editor加上上传图片的事件。代码如下

在这里把代码贴出来，方便大家复制

 async $imgAdd(filename, file) {var formData = new FormData();formData.append("file", file);formData.append("typeKey", "article_app");formData.append("withCredentials", true);formData.append("emulateJSON", true);let that = this;await service.post(service.defaults.baseURL+"sys/file", formData,{ "Content-Type": "multipart/form-data" }).then(function(response) {if (response.data.status==200) {file.miniurl = response.data.data.previewUrl;that.$refs.editor.$img2Url(filename, response.data.data.previewUrl);}},function(response) {this.$message.warning("抱歉!图片上传失败!请来联系管理员");});},

至此，文章回显的样式问题和图片过大时无法显示的问题都已解决。

富文本编辑器mavon-editor文章回显相关推荐

微信小程序富文本编辑器组件 editor
微信小程序富文本编辑器组件 editor <view class="container"><view class="titlebox"> ...
微信小程序开发——实现修改文章富文本（hf_editor）输入框回显文章功能
文章发布界面就是一个类型选择.标题输入(input).内容输入(hf_editor) 代码就不详细说明了当我们需要修改博客的时候一般的界面显示就是显示一个和发布类似的输入框,只是里面存有之前填写的 ...
现代化富文本编辑器 Quill Editor
介绍近期在弄富文本编辑器相关的内容,其中项目中使用了 Quill Editor(后面简称 Quill).Quill 自称是一个现代化强大的富文本编辑器,它与其它富文本编辑器(例如 UEditor)不 ...
使用微信小程序富文本编辑器组件 editor
先看下官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 富文本组件文档文档上的代码比较少建议在开 ...
前端 summernote富文本编辑器点击文章预览的功能实现
一般如果要在网页项目中使用文章编辑器的话,都会考虑summernote富文本编辑器,毕竟使用简便,而且是开源的,一般的用法就是: <div class="form-group" ...
基于React的富文本编辑器——Braft Editor使用
antd 是基于 Ant Design 设计规范实现的高质量 React 组件库,倾向于只提供符合该规范且带有视觉展现的 UI 组件,也尽量不重复造轮子. 如果要在React项目中使用富文本编辑器, ...
关于微信小程序富文本编辑器回显数据初始化editor的时候，页面滑动到最底部了
** 一个页面高度超出一屏时,底部使用了富文本编辑器组件editor之后,如果在进入页面时对editor进行了赋值,页面会滚动到底部控制页面不滚动到底部?** 这个问题的关键是进入页面给富文本赋值造 ...
小程序开发笔记（二）：微信小程序富文本编辑器editor的使用
小程序在去年5月的 v2.7.0 版本新增了组件editor富文本编辑器,但对于像我这种开发新手,要熟练使用还是有一定难度.所以记录一下我的学习过程,希望对大家有帮助. 小程序有详细的微信开发 ...
React 版本的真开箱即用的富文本编辑器wysiwyg
React 版本的真开箱即用的富文本编辑器这篇文章推荐的react 版的富文本编辑器名字叫做wysiwyg,第一时间你可能觉得这个名字起的很烂,很难记,但是当你知道它的全称后就很好记了,全称为 Wh ...
vue2引入wangEditor5富文本编辑器
以下为引入wangEditor <template><div><div class="w-e-for-vue"><!-- 工具栏 --&g ...

最新文章

热门文章