queenshow/src/modules/editor/components/CompUI/baseUI/CkEditor.tsx

import { useEditor } from "@/modules/editor";
import { Bold, Italic } from "@ckeditor/ckeditor5-basic-styles";
import { InlineEditor } from "@ckeditor/ckeditor5-editor-inline";
import { Essentials } from "@ckeditor/ckeditor5-essentials";
import { Alignment } from "@ckeditor/ckeditor5-alignment";
import { FontFamily, FontSize } from "@ckeditor/ckeditor5-font";
import { Link } from "@ckeditor/ckeditor5-link";
import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
import { defineComponent } from "vue";
import { string } from "vue-types";

export const CkEditor = defineComponent({
  props: {
    value: string().def("请输入文本"),
  },
  emits: ["change"],
  setup(props, { emit }) {
    const { store } = useEditor();
    const config = {
      plugins: [
        Essentials,
        Bold,
        Italic,
        Link,
        Paragraph,
        FontSize,
        FontFamily,
        Alignment,
      ],
      fontSize: {
        options: [9, 11, 13, "default", 17, 19, 21],
      },
      toolbar: {
        items: [
          "undo",
          "redo",
          "|",
          "fontFamily",
          "fontsize",
          "bold",
          "italic",
          "|",
          "alignment",
          "|",
          "link",
        ],
      },
    };
    return () => (
      <ckeditor
        editor={InlineEditor}
        onBlur={(e: any, editor: InlineEditor) =>
          emit("change", editor.getData())
        }
        onReady={(editor: InlineEditor) => {
          editor.setData(props.value);
          if (!store.isEditMode) {
            editor.enableReadOnlyMode("editor");
          }
        }}
        config={config}
      />
    );
  },
});