vue中使用 markdown 编辑器编写图文消息，并在小程序中展示。_vue 公众号图文格式

需求是做个类似微信公众号那样的图文编辑推广，文章最后要在小程序里面浏览。
开始找到个富文本编辑器‘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);
1
2
3
4

组件中使用（编辑）

这里我使用到element

      <el-form-item label="内容" prop="content">
        <el-card>
          <mavon-editor
            class="mavon"
            v-model="contentFrom.content"
            ref="md"
            @imgAdd="imgAdd"     // 上传图片
            @imgDel="imgDel"		// 删除图片
            :imageFilter="uploadBefore"   // 图片过滤，可用来限制格式，大小
          />
        </el-card>
      </el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12

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");
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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

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

    <el-dialog title="预览" :visible.sync="dialogVisible" width="60%">
      <el-card>
        <mavon-editor
          class="md"
          :value="htmlContent"  // 请求回来的文章内容
          :subfield="prop.subfield"
          :defaultOpen="prop.defaultOpen"
          :toolbarsFlag="prop.toolbarsFlag"
          :editable="prop.editable"
          :scrollStyle="prop.scrollStyle"
        ></mavon-editor>
      </el-card>
    </el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13

js部分

  computed: {
    prop() {
      let data = {
        subfield: false, // 单双栏模式
        defaultOpen: "preview", //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: false,
        toolbarsFlag: false,
        scrollStyle: true
      };
      return data;
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12

效果图：