vue中使用 markdown 编辑器编写图文消息，并在小程序中展示。

需求是做个类似微信公众号那样的图文编辑推广，文章最后要在小程序里面浏览。
开始找到个富文本编辑器‘vue-quill-editor’
可以使用，最后出来的内容是html格式，虽然小程序里面可以转译过来，但格式和排版都不是很好。
这边同事大哥推荐去使用markdown。markdown的标记语言在格式上能够还原编辑时候的样子。
于是就找到了 mavon-editor

mavon-edito

文档链接点击这里

安装
npm install mavon-editor

可以全局引入，也可以在组件中引入，下面以全局引入为例
引入
在项目的 main.js 中

import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";Vue.use(mavonEditor);

组件中使用（编辑）

这里我使用到element

      <el-form-item label="内容" prop="content"><el-card><mavon-editorclass="mavon"v-model="contentFrom.content"ref="md"@imgAdd="imgAdd"     // 上传图片@imgDel="imgDel"     // 删除图片:imageFilter="uploadBefore"   // 图片过滤，可用来限制格式，大小/></el-card></el-form-item>

js部分

    uploadBefore(f) {if (f.size > 2016324) {this.$message({message: "图片不能大于2M",type: "error"});return false;} else {return true;}},imgAdd(pos, $file) {var formdata = new FormData();formdata.append("file", $file);this.$api.richText.uploadImg(formdata).then(res => {console.log(res);if (res.status == 200) {this.$refs.md.$img2Url(pos, res.data);} else {this.$message({message: "图片上传失败",type: "error"});this.$refs.md.$img2Url(pos, "");}}).catch(() => {this.$message({message: "图片上传失败",type: "error"});this.$refs.md.$img2Url(pos, "");});},imgDel(name) {console.log(name);console.log("触发del");},

这里的图片上传，我是先将图片通过接口上传到后台，后台返回给我一个图片的url，然后调用方法‘ this.refs.md.refs.md.refs.md.img2Url(pos, res.data);’ 将url替换原文中的下标。
效果图：

组件中使用（预览）
预览该插件也自带，只需要更换一下属性。

    <el-dialog title="预览" :visible.sync="dialogVisible" width="60%"><el-card><mavon-editorclass="md":value="htmlContent"  // 请求回来的文章内容:subfield="prop.subfield":defaultOpen="prop.defaultOpen":toolbarsFlag="prop.toolbarsFlag":editable="prop.editable":scrollStyle="prop.scrollStyle"></mavon-editor></el-card></el-dialog>

js部分

  computed: {prop() {let data = {subfield: false, // 单双栏模式defaultOpen: "preview", //edit： 默认展示编辑区域 ， preview： 默认展示预览区域editable: false,toolbarsFlag: false,scrollStyle: true};return data;}}

效果图：

vue中使用 markdown 编辑器编写图文消息，并在小程序中展示。相关推荐

如何实现消息功能_小程序中如何实现即时通信聊天功能
微信小程序是现在应用比较广的流量平台之一,当流量越来越多时,就需要在小程序中接入即时通信聊天功能来实现更好的流量变现转化,那么小程序中如何接入实现即时通信聊天功能呢? 什么是即时通信聊天功能即时通信聊 ...
上传声音微信小程序_图文详解微信小程序中调用录音功能和音频播放的方法...
老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. 其实就是用js控制图片显示隐藏.没啥好说的.这里 ...
html跳转图文消息,GitHub - Arrrrray/newsToHtml: 微信公众号图文消息转换为HTML，方便插入到小程序中显示...
newsToHtml 微信公众号图文消息转换为 HTML,方便插入到小程序中显示项目来源在编写公众号图文的时候,我们通常将一些小程序页卡插入其中.尤其是购物推荐类的公众号,用户在浏览图文消息的时候 ...
小程序 | 小程序中常用的事件 + 事件对象的属性列表 +小程序事件传参 + 小程序全局配置 + 小程序页面配置 + 小程序发起网络数据请求
文章目录一.WXML 模板语法数据绑定事件绑定 ⭐小程序中常用的事件 ⭐事件对象的属性列表 target 和 currentTarget 的区别 bindtap 的语法格式在事件处理函数中为 ...
小程序中WxParse循环解析返回的富文本数据
WxParse循环解析一.遇到问题最近在做小程序,遇到这样一个需求: 将百度的Ueditor编辑器存入的文本数据显示在小程序中,需要保留之前的样式,这就用到了 WxParse插件,它能够用解析ht ...
wxparse的使用php返回数组输出,微信小程序中WxParse循环解析返回的富文本数据
WxParse循环解析一.遇到问题最近在做小程序,遇到这样一个需求: 将百度的Ueditor编辑器存入的文本数据显示在小程序中,需要保留之前的样式,这就用到了 WxParse插件,它能够用解析ht ...
ASP.net Core 2.2中Jwt验证的使用方法及在微信小程序上应用
文章目录 Jwt简单介绍什么是Jwt Jwt安全吗在 ASP.NET Core中使用Jwt 授权和认证三步走代码例子生成Jwt 编辑授权策略在StartUp中配置添加特性客户端使用测试 ...
微信小程序中wxs文件的用法
微信小程序中的wxs文件,大家或多或少都有见过,但怎么使用呢?在项目开发中又能给我们带来什么便捷和解决什么问题呢?借助一个案例为大家介绍具体用法. 一.什么是wxs文件及wxs文件有什么作用 wxs相 ...
2018-05-05（在小程序中使用图标）
项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一步:下载需要的字体图标进入阿里图标官网 ...

vue中使用 markdown 编辑器编写图文消息，并在小程序中展示。

mavon-edito

vue中使用 markdown 编辑器编写图文消息，并在小程序中展示。相关推荐

最新文章

热门文章