vue + mavon-editor编辑器

最新推荐文章于 2024-05-16 23:00:11 发布

*拯

最新推荐文章于 2024-05-16 23:00:11 发布

阅读量651

点赞数 4

分类专栏： vue 前端文章标签： vue.js 编辑器 javascript

本文链接：https://blog.csdn.net/qq_46570160/article/details/126664770

版权

前端同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

vue

20 篇文章 0 订阅

订阅专栏

vue + mavon-editor编辑器

我个人使用过 quill-editor编辑器 和 mavon-editor编辑器
这个编辑器的优点还挺多的，但我个人的观点预览功能很棒

如果后续想了解 quill-editor的话我也会出这个教程

步骤一、下载依赖

 npm install mavon-editor --save

步骤二、在main.js中引入

 
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
 
    Vue.use(mavonEditor)

步骤三、页面的使用

1.html部分

<mavon-editor
   v-model="form.content"
   :toolbars="toolbars"
   :imageFilter="uploadBefore"
   placeholder="从这里开始编辑正文...."
   @imgAdd="$imgAdd"
   ref="md"
   @save="saveMavon"
/>

2.script部分

// 数据部分得 配置项   这块我是封装成一个.js文件了 
toolbars:{
  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 // 预览
}
// 对应的方法部分 （上传图片 保存的一些处理）

// 将图片上传到服务器，返回地址替换到md中
    async $imgAdd(pos, $file) {
      this.saving = true;
      console.log(pos, $file);
      var formData = new FormData();
      formData.append("file", $file);
      uploadImage(formData).then(res => {
        if (res.code == 200) {
          var url = res.url;
          // 让它插入到相应的部分
          this.$refs.md.$img2Url(pos, url);
          this.saving = false;
        }
      });
    },
    
// 点击保存
saveMavon(value, render) {
      console.log("this is render" + render);
      console.log("this is value" + value);
      console.log(this.$refs.md.d_render);
 },

// 限制图片的大小
    uploadBefore(f) {
      if (f.size > 2016324) {
        this.$message.error("图片限制大小为2M");
        return false;
      } else {
        return true;
      }
    },