|
@@ -1,9 +1,9 @@
|
|
|
<template>
|
|
|
- <div contenteditable class="text" v-html="rawText" @input="input"></div>
|
|
|
+ <div contenteditable ref="editor" class="text" @input="input"></div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
|
|
|
-
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
export default {
|
|
|
props: {
|
|
|
rawText: {
|
|
@@ -11,11 +11,25 @@ export default {
|
|
|
default: '',
|
|
|
},
|
|
|
},
|
|
|
- setup() {},
|
|
|
+ watch: {
|
|
|
+ rawText(t) {
|
|
|
+ if (this.editor.innerHTML === t) return;
|
|
|
+ this.editor.innerHTML = t;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ setup(props) {
|
|
|
+ const editor = ref(null);
|
|
|
+ onMounted(() => {
|
|
|
+ editor.value.innerHTML = props.rawText;
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ editor,
|
|
|
+ };
|
|
|
+ },
|
|
|
methods: {
|
|
|
- input(e){
|
|
|
- this.$emit('update:rawText', e.target.innerHTML)
|
|
|
- }
|
|
|
+ input(e) {
|
|
|
+ this.$emit('update:rawText', e.target.innerHTML);
|
|
|
+ },
|
|
|
},
|
|
|
emits: ['update:rawText'],
|
|
|
};
|