queenshow/src/modules/editor/components/CompUI/basicUI/Text/component.tsx

import { useEditor } from "@/modules/editor";
import { Alignment } from "@ckeditor/ckeditor5-alignment";
import { Bold, Italic } from "@ckeditor/ckeditor5-basic-styles";
import { InlineEditor } from "@ckeditor/ckeditor5-editor-inline";
import { Essentials } from "@ckeditor/ckeditor5-essentials";
import { FontColor, FontFamily, FontSize } from "@ckeditor/ckeditor5-font";
import { Link } from "@ckeditor/ckeditor5-link";
import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
import { css } from "@linaria/core";
import { defineComponent, ref, watch, watchEffect } from "vue";
import { string } from "vue-types";
import { useCompData } from ".";
import { View } from "../View";
import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
export const Component = defineComponent({
  props: {
    compId: string().def(""),
  },
  setup(props) {
    const comp = useCompData(props.compId);
    const { store, helper, actions, controls } = useEditor();
    const config = {
      language: "zh-cn",
      plugins: [
        Essentials,
        Bold,
        Italic,
        Link,
        Paragraph,
        FontColor,
        FontSize,
        FontFamily,
        Alignment,
      ],
      fontSize: {
        options: [12, 14, 16, 18, 20, 24, 28, 32, 38, 42, 46, 52, 60],
      },
      toolbar: {
        items: [
          // "undo",
          // "redo",
          // "|",
          "fontColor",
          "fontsize",
          "bold",
          "italic",
          "|",
          "alignment",
          // "|",
          // "link",
        ],
      },
    };

    let editorInstance: InlineEditor;
    let timeOut = ref();

    watchEffect(() => {
      console.log("1111", store.textEditingState);
      if (!store.textEditingState) {
        editorInstance?.setData(comp.value);
      }
    });
    const toolbarClickListener = () => {
      editorInstance.ui.view.toolbar.element?.addEventListener("click", () => {
        if (timeOut.value) {
          clearTimeout(timeOut.value);
          timeOut.value = null;
        }
      });
    };

    return () => (
      <View
        class={[textStyle, store.currCompId === props.compId && "drag-disable"]}
        compId={props.compId}
      >
        <ckeditor
          class={textStyle}
          editor={InlineEditor}
          onBlur={() => {
            // actions.updateCompData(
            //   helper.findComp(props.compId) as DesignComp,
            //   "value",
            //   editorInstance.getData()
            // );
            // store.setTextEditingState(false);

            // console.log("blur", editorInstance);
            timeOut.value = setTimeout(() => {
              store.setTextEditingState(false);
              controls.historyCtrl.history.submit();
            }, 500);
          }}
          onFocus={() => {
            store.setTextEditingState(true);
          }}
          onInput={(e: any) => {
            if (editorInstance) {
              actions.setTextarea(
                helper.findComp(props.compId) as DesignComp,
                "value",
                e
              );
            }
          }}
          onReady={(editor: InlineEditor) => {
            editorInstance = editor;
            editor.setData(comp.value);
            toolbarClickListener();
            if (store.isPreview) {
              editor.enableReadOnlyMode("editor");
            }
          }}
          config={config}
        />
      </View>
    );
  },
});

const textStyle = css`
  font-size: 12px;
  color: #666;
  p {
    margin: 0;
  }
  .ck.ck-editor__editable_inline {
    cursor: text;
    overflow: hidden;
    pointer-events: none;

    > :last-child,
    > :first-child {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &.drag-disable {
    .ck.ck-editor__editable_inline {
      pointer-events: auto;
    }
  }
`;