mediaAll/src/components/editor.vue

<template>
  <div contenteditable ref="editor" v-html="rawText" class="text" @input="input"></div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
// import { ref, onMounted } from 'vue';
export default {
  props: {
    rawText: {
      type: String,
      default: '',
    },
  },
  setup() {},
  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;
}
</style>