text

src/modules/editor/components/CompUI/basicUI/Text/TextToolbar.tsx

@@ -134,7 +134,8 @@ export const TextToolbar = defineComponent({
       },
     ];
     function changeVal(e: { dataIndex: string; value: any }) {
-      actions.updateCompData(props.component, e.dataIndex, e.value);
+      console.log(e);
+      // actions.updateCompData(props.component, e.dataIndex, e.value);
     }
     return () => {
       const { component } = props;

src/modules/editor/components/CompUI/basicUI/Text/component2.tsx

@@ -66,97 +66,104 @@ const EditorComp = defineComponent({
   emits: ["lost"],
 
   setup(props, { emit }) {
-    const inputRef = ref();
     let editorRefVal = ref<HeadlessEditor>().value;
     const comp = useCompData(props.compId);
     const { store, actions, helper, controls } = useEditor();
 
     let blurCanceler: any = null;
-    // onMounted(() => {
-    //   blurCanceler = blurHandle();
-    //   nextTick(() => {
-    //     initHeight();
-    //   });
-    // });
-    // onUnmounted(() => {
-    //   blurCanceler?.();
-    // });
-    // const preHeight = ref<number>(0);
-    // const initHeight = () => {
-    //   const h = helper.pxToDesignSize(inputRef.value?.$el.clientHeight);
-    //   const isChange = Math.abs(preHeight.value - h) > 1;
-    //   preHeight.value = h;
-    //   actions.updateCompData(comp, "layout.size.1", preHeight.value);
-    //   helper.extendStreamCard(store.currStreamCardId);
-    //   if (isChange) {
-    //     actions.selectObjs([]);
-    //     setTimeout(() => {
-    //       actions.selectObjs([props.compId]);
-    //     }, 0);
-    //   }
-    // };
-    // function isInCkBodyWrapper(dom: HTMLElement) {
-    //   if (editorInstance.value) {
-    //     const in1 =
-    //       editorInstance.value.ui.view.toolbar.element?.contains(dom) ||
-    //       editorInstance.value.ui.view.editable.element?.contains(dom);
-    //     if (in1) return true;
-
-    //     const ckBodyWrapper = document.querySelector(".ck-body-wrapper");
-    //     if (ckBodyWrapper === dom || ckBodyWrapper?.contains(dom)) {
-    //       return true;
-    //     }
-    //   }
-    //   return false;
-    // }
-
-    // function blurHandle() {
-    //   function blur(e: MouseEvent) {
-    //     const target = e.target as HTMLElement;
-
-    //     if (!editorInstance.value) return;
-
-    //     if (isInCkBodyWrapper(target)) {
-    //       e.stopPropagation();
-    //       return;
-    //     }
-    //     actions.submitUpdate();
-    //     emit("lost");
-    //   }
-    //   document.addEventListener("mousedown", blur, {
-    //     capture: true,
-    //   });
-    //   return () => {
-    //     document.removeEventListener("mousedown", blur, { capture: true });
-    //   };
-    // }
+
+    onUnmounted(() => {
+      blurCanceler?.();
+    });
+    const preHeight = ref<number>(0);
+    const initHeight = () => {
+      const dom: HTMLElement | null = document.querySelector(
+        `#editor_${props.compId}`
+      );
+      if (!dom) {
+        return false;
+      }
+      const h = helper.pxToDesignSize(dom.clientHeight);
+      const isChange = Math.abs(preHeight.value - h) > 1;
+      preHeight.value = h;
+      actions.updateCompData(comp, "layout.size.1", preHeight.value);
+      helper.extendStreamCard(store.currStreamCardId);
+      if (isChange) {
+        actions.selectObjs([]);
+        setTimeout(() => {
+          actions.selectObjs([props.compId]);
+        }, 0);
+      }
+    };
+    function isInCkBodyWrapper(dom: HTMLElement) {
+      if (editorRefVal) {
+        const in1 =
+          editorRefVal.ui.view.toolbar.element?.contains(dom) ||
+          editorRefVal.ui.view.editable.element?.contains(dom);
+        if (in1) return true;
+
+        const ckBodyWrapper = document.querySelector(".ck-body-wrapper");
+        if (ckBodyWrapper === dom || ckBodyWrapper?.contains(dom)) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    function blurHandle() {
+      function blur(e: MouseEvent) {
+        const target = e.target as HTMLElement;
+
+        if (!editorRefVal) return;
+
+        if (isInCkBodyWrapper(target)) {
+          e.stopPropagation();
+          return;
+        }
+        actions.submitUpdate();
+        emit("lost");
+      }
+      document.addEventListener("mousedown", blur, {
+        capture: true,
+      });
+      return () => {
+        document.removeEventListener("mousedown", blur, { capture: true });
+      };
+    }
     const initEditor = async () => {
       const dom: HTMLElement | null = document.querySelector(
-        `#${props.compId}`
+        `#editor_${props.compId}`
       );
       if (dom) {
         editorRefVal = await HeadlessEditor.create(dom);
         editorRefVal.setData(comp.value);
         editorRefVal.focus();
-        // const range = document.createRange();
-        // range.selectNodeContents(inputRef.value.$el);
-        // const selection = window.getSelection();
-        // selection?.removeAllRanges();
-        // selection?.addRange(range);
-        editorRefVal.on("input", (value: any) => {
+        const range = document.createRange();
+        range.selectNodeContents(dom);
+        const selection = window.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+        console.log(editorRefVal);
+        editorRefVal.model.document.on("change:data", () => {
+          const value = editorRefVal?.getData();
+          console.log(value);
           if (comp.value !== value) {
             actions.updateCompData(comp, "value", value);
           }
         });
-      
+        comp.instance = editorRefVal;
       }
     };
 
     onMounted(() => {
       initEditor();
+      blurCanceler = blurHandle();
+      nextTick(() => {
+        initHeight();
+      });
     });
     return () => {
-      return <div class={textStyle} id={props.compId} ref={inputRef}></div>;
+      return <div class={textStyle} id={`editor_${props.compId}`}></div>;
     };
 
     // return () => (

src/modules/editor/components/CompUI/basicUI/Text/index.ts

@@ -2,7 +2,7 @@ import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";
 import { createAttrsForm } from "../../defines/createAttrsForm";
 import { createCompHooks } from "../../defines/createCompHooks";
 import { TextToolbar } from "./TextToolbar";
-export { Component } from "./component";
+export { Component } from "./component2";
 
 export const options = {
   name: "文本",

src/modules/editor/objects/DesignTemp/DesignComp.ts

@@ -11,10 +11,10 @@ export class DesignComp {
   thumbnail = "";
   compKey: ICompKeys = "Text";
   value: any = undefined;
-  layout: Layout = {size: [200, 200]};
+  layout: Layout = { size: [200, 200] };
   background: Background = {};
   children: Record<string, any> & { default?: string[] } = {};
-
+  instance: any = null;
   constructor(data?: Partial<DesignComp>) {
     if (!data) return;
     if (data instanceof DesignComp) return data;
@@ -57,15 +57,15 @@ export class DesignComp {
     return this.layout.size?.[1] || 0;
   }
   getBoundRect() {
-    const out = {x:0, y: 0, w: 0, h:0}
+    const out = { x: 0, y: 0, w: 0, h: 0 };
     if (!this.$el) return out;
-    const r= this.$el.getBoundingClientRect();
+    const r = this.$el.getBoundingClientRect();
     out.w = r.width;
     out.h = r.height;
     out.x = r.left;
     out.y = r.top;
     return out;
- }
+  }
 
   setH(height: number) {
     if (!this.layout.size) this.layout.size = [];