pbl-teacher-table/src/components/pages/test/checkAi/wangEnduit.vue

<template lang="html">
  <div class="editor cont">
    <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text">
    </div>
		<slot></slot>
    <div v-if="proVisible" class="mask">
      <div class="progressBox">
        <div class="lbox">
          <img src="../../../../assets/loading.gif" />上传中，请稍后
        </div>
      </div>
    </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,
      proVisible:false,
      progress:0
    };
  },
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    isClear: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "请输入正文"
    },
		showGetTextLoading:{
			type:Boolean,
			default:false,
		}
  },
  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.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,
        //   background: 'rgba(0, 0, 0, 0.7)'
        // });
        // 图片自定义上传方法
        var kk = 0
        for (var 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" } }); //选择桶
          that.proVisible = true
          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) {
                kk++
                if(kk == files.length - 1 || kk > files.length - 1){
                  that.proVisible = false
                }
                // 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>/ig, '')
        str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
        str = str.replace(/style="[\s\S]*?"/ig, '')
        // str = str.replace(/<\/?[^>]*>/g, '')
        // str = str.replace(/[ | ]*\n/g, '\n')
        // str = str.replace(/&nbsp;/ig, '')
        // 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: 230px;
   overflow: auto;
 }


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

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

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

 /* blockquote 样式 */
 .cont>>>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 样式 */
 .cont>>>code {
   display: inline-block;
   *display: inline;
   *zoom: 1;
   background-color: #f1f1f1;
   border-radius: 3px;
   padding: 3px 5px;
   margin: 0 3px;
 }

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

 /* ul ol 样式 */
 .cont>>>ul,
 ol {
   margin: 0 !important;
 }

 /* .cont>>>.w-e-droplist{
  width: 80px !important;
 } */

 .mask {
  background-color: rgb(0 0 0 / 30%);
  /* position: fixed; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mask2 {
  position: fixed !important;
  z-index: 999999;
}

.progressBox {
  width: 300px;
  height: 150px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 6px 1px #bfbfbf;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.progressBox .lbox {
  height: 100px;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.progressBox .lbox img {
  width: 40px;
  margin-right: 20px;
}

.progressBox>>>.el-progress-bar__outer {
  background-color: #d1dfff !important;
}

.progressBox .lbox {
  height: 100px;
  font-size: 19px;
  display: flex;
  align-items: center;
}

.progressBox .lbox img {
  width: 40px;
  margin-right: 20px;
}
</style>