EvenManage/src/components/tools/wangEnduit.vue

<template lang="html">
  <div class="editor" ref="editorBox">
    <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text">
    </div>
  </div>
</template>  
  
<script>
import E from "wangeditor";
import "../../common/aws-sdk-2.235.1.min";
import { Loading } from "element-ui";
// import 'wangeditor/release/wangEditor.min.css'
export default {
  name: "editoritem",
  data() {
    return {
      // uploadPath,
      editor: null,
      info_: null,
    };
  },
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    isClear: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "请输入正文",
    },
  },
  watch: {
    isClear(val) {
      // 触发清除文本域内容
      if (val) {
        this.editor.txt.clear();
        this.info_ = null;
      }
    },
    value: function (value) {
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value);
      }
    },
    //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
  },
  mounted() {
    this.seteditor();
    this.editor.txt.html(this.value);
  },
  methods: {
    seteditor() {
      this.editor = new E(this.$refs.toolbar, this.$refs.editor);
      // 关闭菜单栏fixed
      this.editor.config.menuFixed = false;
      //修改图片
      this.editor.config.uploadImgShowBase64 = true;
      // 上传图片大小 5M
      this.editor.config.uploadImgMaxSize = 10 * 1024 * 1024;
      // 普通的自定义菜单
      this.editor.config.menus = [
        "head", //标题
        "bold", //加粗
        "fontSize", //字体大小
        // "fontName", //字体
        // "italic", //斜体
        // "underline", //下划线
        // "strikeThrough", //删除线
        "indent", //缩进
        // "lineHeight", //行高
        // "foreColor",
        // "backColor",
        // "link",
        "list",
        // "todo",
        "justify",
        // "quote",
        // "emoticon",
        "image",
        // "video",
        "table",
        // "code",
        // "splitLine",
        "undo",
        "redo",
      ];
      // 带格式粘贴
      this.editor.config.pasteFilterStyle = false;
      //忽略粘贴内容中的图片
      this.editor.config.pasteIgnoreImg = false;
      this.editor.config.showLinkImg = false;
      this.editor.config.placeholder = this.placeholder;
      var that = this;
      this.editor.config.customUploadImg = function (files, insert) {
        const loading = Loading.service({
          lock: true,
          fullscreen: true,
          background: "rgba(0, 0, 0, 0.7)",
          target: that.$refs.editorBox,
        });
        let BOX = document.querySelector(".el-loading-mask");
        BOX.style.zIndex = "99999999";//固定一个最大值，是字符串
        // 图片自定义上传方法
        for (let i = 0; i < files.length; i++) {
          var file = files[i];
          var credentials = {
            accessKeyId: "AKIATLPEDU37QV5CHLMH",
            secretAccessKey: "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",
          }; //秘钥形式的登录上传
          window.AWS.config.update(credentials);
          window.AWS.config.region = "cn-northwest-1"; //设置区域

          var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶

          if (file) {
            var params = {
              Key:
                file.name.split(".")[0] +
                new Date().getTime() +
                "." +
                file.name.split(".")[file.name.split(".").length - 1],
              ContentType: file.type,
              Body: file,
              "Access-Control-Allow-Credentials": "*",
              ACL: "public-read",
            }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
            var options = {
              partSize: 2048 * 1024 * 1024,
              queueSize: 2,
              leavePartsOnError: true,
            };
            bucket
              .upload(params, options)
              .on("httpUploadProgress", function (evt) {
                //这里可以写进度条
                // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
              })
              .send(function (err, data) {
                if (i == files.length - 1) {
                  loading.close();
                }
                if (err) {
                  that.$message.error("上传失败");
                } else {
                  //上传成功处理
                  insert(data.Location);
                }
              });
          }
        }
      };
      //配置 自定义处理粘贴的文本内容
      this.editor.config.pasteTextHandle = function (content) {
        if (content == "" && !content) return "";
        var str = content;
        str = str.replace(/<xml>[\s\S]*?<\/xml>/gi, "");
        str = str.replace(/<style>[\s\S]*?<\/style>/gi, "");
        str = str.replace(/<\/?[^>]*>/g, "");
        str = str.replace(/[ | ]*\n/g, "\n");
        str = str.replace(/&nbsp;/gi, "");
        // console.log('****', content)
        // console.log('****', str)
        return str;
      };
      this.editor.config.onchange = (html) => {
        this.info_ = html; // 绑定当前逐渐地值
        this.$emit("change", this.info_); // 将内容同步到父组件中
      };
      // 创建富文本编辑器
      this.editor.create();
    },
  },
};
</script>  
  
<style lang="css" scoped>
.editor {
  width: 100%;
  margin: 10px auto;
  position: relative;
  z-index: 0;
}

.toolbar {
  border: 1px solid #ccc;
}

.text {
  border: 1px solid #ccc;
  height: 300px;
  overflow: auto;
}

/* table 样式 */
.editor>>>table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.editor>>>table td,
.editor>>>table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 5px 10px;
  max-width: 0px;
  height: 30px;
  vertical-align: baseline;
}

.editor>>>table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
.editor>>>blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
.editor>>>code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}

.editor>>>pre code {
  display: block;
}

/* ul ol 样式 */
.editor>>>ul,
ol {
  margin: 10px 0 10px 20px;
}

.editor>>>.w-e-text p,
.editor>>>.w-e-text h1,
.editor>>>.w-e-text h2,
.editor>>>.w-e-text h3,
.editor>>>.w-e-text h4,
.editor>>>.w-e-text h5,
.editor>>>.w-e-text table,
.editor>>>.w-e-text pre {
  line-height: 0.9;
  margin: 5px 0 !important;
}

.editor>>>.w-e-text-container .placeholder {
  font-size: 14px;
  color: #757575;
}

.editor>>>.w-e-text{
  padding: 10px 10px;
}
</style>