GCLS_Page_Book_Component_NPC/src/components/Adult/phonePreview/EditDiv.vue

<template>
  <div>
    <div
      :id="id"
      class="edit-div-npc"
      :contenteditable="canEdit"
      @compositionstart="compositStart"
      @compositionend="compositEnd"
      @paste="copyText"
      @focus="isLocked = true"
      @blur="handleBlur"
      :style="{ textAlign: textAlign }"
      @input="input"
      placeholder=" "
      @keyup.enter="handleReplaceTone"
      v-html="content"
    />
    <!-- :placeholder="placeholder_value" -->
    <div v-if="isShow" class="limit">{{ textSize }}/{{ maxLength }}</div>
  </div>
</template>
<script>
export default {
  name: "EditDiv",
  props: {
    value: {
      type: String,
      default: ""
    },
    canEdit: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: ""
    },
    id: {
      type: String,
      default: "sendMsg"
    },
    textAlign: {
      type: String,
      default: "left"
    },
    isShow: {
      type: Boolean,
      default: false
    },
    maxLength: {
      type: Number,
      default: 200
    },
    hengIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isLocked: false,
      textSize: 0,
      lock: true,
      fullContent: "",
      content: this.value, // 文本数据
      tableData: [
        ["ā", "á", "ǎ", "à", "a"],
        ["ō", "ó", "ǒ", "ò", "o"],
        ["ē", "é", "ě", "è", "e"],
        ["ī", "í", "ǐ", "ì", "i"],
        ["ū", "ú", "ǔ", "ù", "u"],
        ["ǖ", "ǘ", "ǚ", "ǜ", "ü"],
        ["Ā", "Á", "Â", "À", "A"],
        ["Ō", "Ó", "Ô", "Ò", "O"],
        ["Ē", "É", "Ê", "È", "E"],
        ["Ī", "Í", "Î", "Ì", "I"],
        ["Ū", "Ú", "Û", "Ù", "U"]
      ]
    };
  },
  computed: {
    placeholder_value() {
      let value = "";
      let _this = this;
      if (_this.placeholder == "place_en") {
        value = "";
      } else {
        value = "";
      }
      if (_this.textAlign == "left" || !_this.textAlign) {
        value = " " + value;
      } else if (_this.textAlign == "center") {
        value = value;
      } else if (_this.textAlign == "right") {
        value += " ";
      }
      return value;
    }
  },
  watch: {
    value() {
      if (!this.isLocked && !this.content) {
        this.content = this.value;
      }
    }
  },
  mounted() {
    if (this.content) {
      this.textSize = this.content.length;
    }
  },
  methods: {
    // 输入中文开始时
    compositStart(e) {
      this.lock = false;
      let id = "#" + this.id;
      document.querySelector(id).focus();
      // document.execCommand("selectAll", false, null);
      document.getSelection().collapseToEnd();
    },
    // 输入中文结束时
    compositEnd(e) {
      this.lock = true;
      this.input(e);
    },
    input(e) {
      if (this.lock) {
        this.textSize = e.target.innerHTML.length;
        if (this.textSize >= this.maxLength) {
          this.textSize = this.maxLength;
          this.fullContent = e.target.innerHTML.substring(0, this.maxLength);
          e.target.innerHTML = e.target.innerHTML.substring(0, this.maxLength);
        } else {
          this.fullContent = "";
        }
        this.$emit("input", e.target.innerHTML);
        // this.content = e.target.innerHTML;
        this.textFocus();
      } else if (this.fullContent) {
        // 目标对象：超过200字时候的中文输入法
        // 原由：虽然不会输入成功，但是输入过程中字母依然会显现在输入框内
        // 弊端：谷歌浏览器输入法的界面偶尔会闪现
        e.target.innerHTML = this.fullContent;
        this.lock = true;
        this.textFocus();
      }
      this.$emit("saveBlankTF", e.target.innerHTML, this.hengIndex);
    },
    // 粘贴富文本转为纯文本
    copyText(e) {
      e.stopPropagation();
      e.preventDefault();
      let text = "";
      let event = e.originalEvent || e;
      if (event.clipboardData && event.clipboardData.getData) {
        text = event.clipboardData.getData("text/plain");
      } else if (window.clipboardData && window.clipboardData.getData) {
        text = window.clipboardData.getData("Text");
      }
      if (document.queryCommandSupported("insertText")) {
        document.execCommand("insertText", false, text);
      } else {
        document.execCommand("paste", false, text);
      }
    },
    // 文本输入框聚焦，焦点在最后位置
    textFocus(type) {
      let _this = this;
      setTimeout(() => {
        let id = "#" + _this.id;
        document.querySelector(id).focus();
        if (type === "tone") {
          document.execCommand("selectAll", false, null);
        }

        document.getSelection().collapseToEnd();
      }, 0);
    },
    handleReplaceTone(e) {
      let _this = this;
      _this.$nextTick(() => {
        let value = e.target.innerHTML;
        _this.resArr = [];
        if (value) {
          let reg = /\s+/g;
          let valueArr = value.split(reg);
          valueArr.forEach((item, index) => {
            this.handleValue(item);
          });
          let str = "";
          setTimeout(() => {
            _this.resArr.forEach(item => {
              str += " ";
              item.forEach(sItem => {
                if (sItem.number && sItem.con) {
                  let number = Number(sItem.number);
                  let con = sItem.con;
                  let word = _this.addTone(number, con);
                  str += word;
                } else if (sItem.number) {
                  str += sItem.number;
                } else if (sItem.con) {
                  str += " " + sItem.con + " ";
                }
              });
            });
            e.target.innerHTML = str.trim();
            _this.fullContent = str.trim();
            _this.$emit("input", str.trim());
            _this.textFocus("tone");
          }, 10);
        }
      });
    },
    handleValue(valItem) {
      let reg = /\d/;
      let reg2 = /[A-Za-z]+\d/g;
      let numList = [];
      let valArr = valItem.split("");
      if (reg2.test(valItem)) {
        for (let i = 0; i < valArr.length; i++) {
          let item = valItem[i];
          if (reg.test(item)) {
            let numIndex =
              numList.length == 0 ? 0 : numList[numList.length - 1].index;
            let con = valItem.substring(numIndex, i);
            con = con.replace(/\d/g, "");
            let obj = {
              index: i,
              number: item,
              con,
              isTran: true
            };
            numList.push(obj);
          }
        }
      } else {
        numList = [];
      }
      if (numList.length == 0) {
        this.resArr.push([{ con: valItem }]);
      } else {
        this.resArr.push(numList);
      }
    },
    addTone(number, con) {
      let _this = this;
      let zmList = ["a", "o", "e", "i", "u", "v", "A", "O", "E", "I", "U"];
      if (number) {
        for (let i = 0; i < zmList.length; i++) {
          let zm = zmList[i];
          if (con.indexOf(zm) > -1) {
            let zm2 = _this.tableData[i][number - 1];
            if (con.indexOf("iu") > -1) {
              zm2 = _this.tableData[4][number - 1];
              con = con.replace("u", zm2);
            } else if (con.indexOf("ui") > -1) {
              zm2 = _this.tableData[3][number - 1];
              con = con.replace("i", zm2);
            } else if (
              con.indexOf("yv") > -1 ||
              con.indexOf("jv") > -1 ||
              con.indexOf("qv") > -1 ||
              con.indexOf("xv") > -1
            ) {
              zm2 = _this.tableData[4][number - 1];
              con = con.replace("v", zm2);
            } else {
              con = con.replace(zm, zm2);
            }

            break;
          }
        }
      }
      return con;
    },
    handleBlur(e) {
      this.isLocked = false;
      e.target.innerHTML = e.target.innerHTML.replace(/&nbsp;/gi, "").trim();
      this.$emit("input", e.target.innerHTML);
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss">
.edit-div-npc {
  width: 100%;
  // height: 100%; 不可加
  overflow: auto;
  word-break: break-all;
  outline: none;
  user-select: text;
  white-space: pre-wrap;
  text-align: left;
  padding: 0 4px;
  &[contenteditable="true"] {
    user-modify: read-write-plaintext-only;
    &:empty:before {
      content: attr(placeholder);
      display: block;
      color: #ccc;
    }
  }
}
.limit {
  position: absolute;
  right: 0px;
  bottom: 0px;
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.45);
}
</style>