JS实现 带有话题的文本编辑 + 图片编辑(上)

<template>
  <div class="nineImgs_wrap">
    <div class="edit_container">
      <span class="title">#{{title}}#</span>
      <div
        class="edit_box"
        contenteditable="true"
        v-html="message"
        ref="editBox"
        id="editBox"
        @input="changeText"
        v-focus
        :style="{‘text-indent‘:indentNumber + ‘em‘}"
      ></div>
    </div>
  </div>
</template>

data() {
    return {
      title: "你对后浪的感触",
      message: ‘片中说：科技繁荣，文化繁茂，城市繁华，现代文明的成果被层层打开，可以尽情享用。我要说，那个追着无人机几条街的孩子，那些高中入学率只有一半的学生，那些996的职员，那些被房价压得喘不过气的年轻人，这也是青年，这也是我们的生活。现代文明的成果并没有传递到每个人，现代社会的结构性矛盾却无时不刻不成为着重压在每个人头顶的利剑。‘,
      indentNumber: 0,
    };
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  },
  created() {
    this.indentNumber = this.title.length + 4.5
  },
  methods: {
    changeText(){
      this.commentInner = this.$refs.editBox.innerHTML
      console.log(this.commentInner);
      
    },
  }

<style lang="less" scoped>
.nineImgs_wrap {
  width: 100%;
  padding: 30px;
  font-size: 18px;
  .edit_container {
    width: 100%;
    position: relative;
    margin-bottom: 40px;
    .title {
      color: #1a7bd7;
      margin-right: 7px;
      position: absolute;
      left: 0;
    }
    .edit_box {
      border: 0;
      width: 100%;
      height: 100%;
      // background: rgba(0, 0, 0, 0.2);
      outline: none;
      min-height: 200px;
      margin-bottom: 20px;
      color: #000000;
      text-align: left;
    }
  }
}
</style>