vue使用markdown编辑器

在vue中使用markwoen

安装markdown

npm install --save mavon-editor 

在main.js中引入并注册

import mavonEditor from 'mavon-editor';
//css样式一定要引入
import 'mavon-editor/dist/css/index.css';
Vue.use(mavonEditor);

组件中

//dom
	    <mavon-editor :toolbars="markdownOption" v-model="contents" @imgAdd="imgAdd" />
//需要定义的数据
 data() {
     
    return {
     
    //生成的内容
      contents: ``,
      //配置项，根据自己的需求定义
      markdownOption: {
     
        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, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
      }
    };
  },
//如果要上传图片返回路径
imgAdd(pos, $file) {
     
      var _this = this;
      var formdata = new FormData();
      formdata.append("image", $file);
      console.log(formdata.url);
      this.$axios("url", {
     
        method: "post",
        data: formdata
      }).then(resp => {
     
        console.log(resp);
        var json = resp.data.message; //取出上传成功后的url
        if (resp.status == 200) {
     
           _this.$refs.md.$imgUpdateByUrl(pos, json.msg)
          _this.$refs.md.$imglst2Url([[pos, json]])
        } else {
     
          _this.$message({
      type: json.status, message: json });
        }
      });
    },

配合screenfull使用可以达到全屏编辑的效果