mediaAll/src/components/editor.vue

<template>
  <div style="position: relative">
    <div
      :class="{ text: true }"
      contenteditable
      ref="editor"
      v-html="rawText"
      @input="input"
    ></div>
    <div v-if="!rawText" class="defaultText" v-html="defaultSl + dfaultText"></div>
  </div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
// import { ref, onMounted } from 'vue';
import config from '@/config/index';

export default {
  props: {
    rawText: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      dfaultText: config.base.default_text || '',
      defaultSl: '<p style="margin: 10px auto; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 16px; line-height: 34.2px; font-family: &quot;Microsoft Yahei&quot;  color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);"><span>（示例）</span></p>' 
    };
  },
  beforeMount() {},
  methods: {
    input(e) {
      this.$emit('update:rawText', e.target.innerHTML || '');
    },
  },
  emits: ['update:rawText'],
};
</script>

<style scoped>
.selectSpan {
  border-bottom: 3px solid #fff;
}
.text {
  height: calc(100vh - 186px);
  overflow-y: auto;
  outline: none;
  padding: 1em;
}
.text img {
  margin: 0 auto;
}
.text p {
  text-indent: 2em;
}

.defaultText {
  color: #999;
  position: absolute;
  z-index: -1;
  padding: 1em;
  top: 0;
}
</style>