pbl-student-table/src/components/tools/table.vue

<template lang="html">
  <div class="editor cont">
    <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.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)'
        });
        // 图片自定义上传方法
        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" } }); //选择桶

          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) {
                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(/<\/?[^>]*>/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: 400px;
  overflow: auto;

}

.editor >>> .w-e-toolbar .w-e-menu{
  display: flex;
  width: auto;
  align-items: center;
  margin-left: 10px;
  padding: 0 10px;
}

.editor >>> .w-e-toolbar {
  background: #f1f1f1;
}

.editor >>> .w-e-icon-table2::after {
  content: '插入表格';
  margin-left: 5px;
}


/* 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;
}

.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: 10px 0 10px 20px;
}
</style>