liyongli 2 年之前
父节点
当前提交
b2848c6cf8
共有 1 个文件被更改,包括 20 次插入6 次删除
  1. 20 6
      src/components/editor.vue

+ 20 - 6
src/components/editor.vue

@@ -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'],
 };