vue中使用富文本编辑器（wangeditor）

代码语言：javascript复制

<template>
  <div class="subcontainer">


    <!-- de -->

    <div class="editor" id="editor" ref="editor"></div>
    <div class="a-btn">
      <a href="javascript:void(0)">提交</a>
    </div>
  </div>
</template>

<script>
import pcSet from "@/components/pcSet/index";
import appSet from "@/components/appSet/index";

import E from "wangeditor";

export default {
  data() {
    return {
      activeName: "first",
      txt: {
        text: "9090"
      },

      editor: "" // 存放实例化的wangEditor对象，在多个方法中使用
    };
  },
  components: {
    pcSet,
    appSet
  },

  mounted() {
    this.editor = new E("#editor"); //new即可

    this.editor.customConfig.uploadImgShowBase64 = false; // base 64 存储图片
  this.editor.customConfig.uploadImgServer =
      ' common.requestUrl '  "/file/upload/1?type=1&fn=educiot.png"; // 配置服务器端地址
    this.editor.customConfig.uploadImgHeaders = {}; // 自定义 header
    this.editor.customConfig.uploadFileName = "file"; // 后端接受上传文件的参数名
    this.editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024; // 将图片大小限制为 10M
    this.editor.customConfig.uploadImgMaxLength = 6; // 限制一次最多上传 3 张图片
    this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
    //下面的为一些配置参数，默认全部都有，我们需要那些留下那些即可
    this.editor.customConfig.menus = [
      "head", // 标题
      "bold", // 粗体
      "fontSize", // 字号
      "fontName", // 字体
      "italic", // 斜体
      "underline", // 下划线
      "strikeThrough", // 删除线
      "foreColor", // 文字颜色
      "backColor", // 背景颜色
      "link", // 插入链接
      "list", // 列表
      "justify", // 对齐方式
      // 'quote',  // 引用
      "emoticon", // 表情
      "image", // 插入图片
      "table", // 表格
      "video", // 插入视频
      "code", // 插入代码
      "undo", // 撤销
      "redo" // 重复
    ];
    //聚焦时候函数
    this.editor.customConfig.onfocus = function() {
      //console.log("onfocus")
    };
    //失焦时候函数
    this.editor.customConfig.onblur = function() {
      //console.log("onblur")
    };
    //change事件，当富文本编辑器内容发生变化时便会触发此函数
    this.editor.customConfig.onchange = function(text) {
      console.log(text);
    };
    this.editor.create(); //以上配置完成之后调用其create()方法进行创建
    this.editor.txt.html("8222 "); //创建完成之后的默认内容
    //点击事件，拿到富文本编辑器里面的值
    $(".a-btn a").on("click", () => {
      //富文本编辑器里面的内容我们可以输出为html（布局）格式，也可以输出位text（文本）格式
      console.log(this.editor.txt.text());
      console.log(this.editor.txt.html());
      //this.editor.change && this.editor.change();
    });
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style lang="less" scoped>
.subcontainer {
  height: 100%;
  width: 100%;
  .tabs {
    padding: 20px 0;
  }
}

.editor {
  width: 100%;
  height: 300px;
  margin-bottom: 40px;
}
.a-btn {
  padding-bottom: 80px;
}
.a-btn a {
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 30px;
  width: 100px;
  text-align: center;
  float: right;
  background: dodgerblue;
}
</style>

富文本编辑器

0 人点赞