<!-- Created by dreamsqin on 2019/9/5 -->
<template>
  <div
    class="div-editable"
    contenteditable="true"
    v-html="innerText"
    @input="changeText"
    @focus="isChange = false"
    @blur="blurFunc"></div>
</template>

<script>
  export default {
    name: 'DivEditable',
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        innerText: this.value,
        isChange: true
      }
    },
    watch: {
      value() {
        if (this.isChange) {
          this.innerText = this.value
        }
      }
    },
    methods: {
      changeText() {
        this.$emit('input', this.$el.innerHTML)
      },
      blurFunc() {
        this.isChange = true
        this.$emit('blurFunc')
      }
    }
  }
</script>

<style lang="scss">
  .div-editable{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    word-break: break-all;
    outline: none;
    user-select: text;
    white-space: pre-wrap;
    text-align: left;
    &[contenteditable=true]{
      user-modify: read-write-plaintext-only;
      &:empty:before {
        content: attr(placeholder);
        display: block;
        color: #ccc;
      }
    }
  }
</style>

<template>
  <div class="test-page">
    <div class="contain">
      <div-editable
        v-model="testContent"
        @blurFunc="blurHighLight"></div-editable>
      <el-input
        class="input-style"
        v-model="testContent"></el-input>
      <el-button
        class="button-style"
        @click="changeText">改变值</el-button>
    </div>
  </div>
</template>

<script>
  import DivEditable from '@/components/DivEditable'
  export default {
    name: 'TestPage',
    data() {
      return {
        testContent: 'dreamsqin'
      }
    },
    components: {
      DivEditable
    },
    methods: {
      blurHighLight() {
        // 这里做数据过滤或样式变更操作
      },
      changeText() {
        this.testContent = '【标签1】dreamsqin'
        this.blurHighLight()
      }
    }
  }
</script>

<style lang="scss">
  .test-page{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .contain{
      width: 600px;
      height: 250px;
      border: 2px solid #000;
      .input-style,.button-style{
        margin-top: 10px;
      }
      .text-blue{
        color: #2080F7;
      }
    }
  }
</style>

<div  ref="editableDiv" class="contain"  v-html="innerText" contenteditable="true"  @input="inputText" @blur="inputBlur" @focus="inputFocus"></div>

value: {
    type: String,
    default: ''
}

innerText: this.value,
isBlur: true,

watch: {
    value() {
        if (this.isBlur) {
            this.innerText = this.value
        }
    }
},

// 监听输入框内容
inputText() {
    /*this.$emit('input', this.$refs.editor.innerHTML);*/
    this.value = this.$refs.editableDiv.innerHTML;
},
inputFocus() {
    this.isBlur = false;
},
inputBlur() {
    this.isBlur = true;
},