text font family

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

@@ -7,19 +7,33 @@ 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, onUnmounted, watch, watchEffect , ref, reactive, onMounted} from "vue";
-import { string} from "vue-types";
+import {
+  defineComponent,
+  onUnmounted,
+  watch,
+  watchEffect,
+  ref,
+  reactive,
+  onMounted,
+} from "vue";
+import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
 import { nextTick } from "process";
 import { settingsStore } from "@queenjs-modules/queditor/module/stores/settings";
 
 function GetConfig() {
-  const fontSizeOptions=[];
-  const list = [12, 14, 16, 18, 20, 24, 28, 32, 38, 42, 46, 52, 60]
+  const fontSizeOptions = [];
+  const list = [12, 14, 16, 18, 20, 24, 28, 32, 38, 42, 46, 52, 60];
   for (const s of list) {
-    fontSizeOptions.push({title: s+"", model: s + "px"})
+    fontSizeOptions.push({ title: s + "", model: s + "px" });
   }
+  const fontFamilyOptions = [
+    { title: "宋体", model: "宋体,Songti STSong,serif" },
+    { title: "黑体", model: "黑体,Heiti,STHeiti,sans-serif" },
+    { title: "仿宋", model: "仿宋,FangSong,STFangsong,serif" },
+    { title: "楷体", model: "楷体,KaiTi,STKaiti,sans-serif" },
+  ];
   const config = {
     // updateSourceElementOnDestroy: true,
     language: "zh-cn",
@@ -36,7 +50,11 @@ function GetConfig() {
     ],
     fontSize: {
       options: fontSizeOptions,
-      supportAllValues:true,
+      supportAllValues: true,
+    },
+    fontFamily: {
+      options: fontFamilyOptions,
+      supportAllValues: true,
     },
     toolbar: {
       items: [
@@ -44,6 +62,7 @@ function GetConfig() {
         // "redo",
         // "|",
         "fontColor",
+        "fontFamily",
         "fontsize",
         "bold",
         "italic",
@@ -63,39 +82,44 @@ export const Component = defineComponent({
   },
   setup(props) {
     const comp = useCompData(props.compId);
-    const { store, actions} = useEditor();
+    const { store, actions } = useEditor();
 
     const state = reactive({
-       editableId: ""
-    })
-    
-    if (store.isEditMode ) {
-        actions.on("textFocus", function(compId, focus){
-            if (compId != props.compId) return;
-            if (focus) {
-              state.editableId = "" + Date.now();
-              return;
-            }
-            state.editableId = "";
-        })
+      editableId: "",
+    });
+
+    if (store.isEditMode) {
+      actions.on("textFocus", function (compId, focus) {
+        if (compId != props.compId) return;
+        if (focus) {
+          state.editableId = "" + Date.now();
+          return;
+        }
+        state.editableId = "";
+      });
     }
 
     return () => (
       <View
         class={[textStyle]}
         compId={props.compId}
-        onDblclick={()=>{
-           if (store.isEditMode) {
-              state.editableId = "" + Date.now();
-           }
+        onDblclick={() => {
+          if (store.isEditMode) {
+            state.editableId = "" + Date.now();
+          }
         }}
       >
-      {
-          state.editableId ? <EditorComp compId={props.compId} key={state.editableId} onLost={()=>{
-            state.editableId = "";
-          }} /> 
-          : <div innerHTML={comp.value} />
-      }
+        {state.editableId ? (
+          <EditorComp
+            compId={props.compId}
+            key={state.editableId}
+            onLost={() => {
+              state.editableId = "";
+            }}
+          />
+        ) : (
+          <div innerHTML={comp.value} />
+        )}
       </View>
     );
   },
@@ -107,24 +131,24 @@ const EditorComp = defineComponent({
   },
   emits: ["lost"],
 
-  setup(props, {emit}) {
+  setup(props, { emit }) {
     const inputRef = ref();
     let editorInstance = ref<InlineEditor>();
     const comp = useCompData(props.compId);
-    const { store, actions , helper, controls} = useEditor();
+    const { store, actions, helper, controls } = useEditor();
 
-   let blurCanceler:any= null;
-    onMounted(()=>{
+    let blurCanceler: any = null;
+    onMounted(() => {
       blurCanceler = blurHandle();
     });
-    onUnmounted(()=>{
+    onUnmounted(() => {
       blurCanceler?.();
-    })
+    });
 
     function blurHandle() {
       function blur(e: MouseEvent) {
         const target = e.target as HTMLElement;
-        if ( !editorInstance.value) return;
+        if (!editorInstance.value) return;
         if (
           editorInstance.value.ui.view.toolbar.element?.contains(target) ||
           editorInstance.value.ui.view.editable.element?.contains(target)
@@ -143,37 +167,41 @@ const EditorComp = defineComponent({
       };
     }
 
-    return ()=><ckeditor
-          class={textStyle}
-          ref={inputRef}
-          editor={InlineEditor}
-          onInput={(value: any) => {
-            if (editorInstance.value && comp.value !== value) {
-              actions.updateCompData(comp, "value", value);
-              nextTick(()=>{
-                actions.updateCompDatas(comp, ["value", "layout.size.1"], [value, helper.pxToDesignSize(inputRef.value?.$el.clientHeight)])
-                controls.selectCtrl.upgateGizmoStyle();
-                helper.extendStreamCard(store.currStreamCardId);
-              })
-            }
-          }}
-          onReady={(editor: InlineEditor) => {
-            editorInstance.value = editor;
-            console.log("editor")
-            editor.setData(comp.value);
-            editor.focus();
-            const range = document.createRange();
-            range.selectNodeContents(inputRef.value.$el);
-            const  selection = window.getSelection();
-            selection?.removeAllRanges();
-            selection?.addRange(range);
-          }}
-          config={GetConfig()}
-        />
+    return () => (
+      <ckeditor
+        class={textStyle}
+        ref={inputRef}
+        editor={InlineEditor}
+        onInput={(value: any) => {
+          if (editorInstance.value && comp.value !== value) {
+            actions.updateCompData(comp, "value", value);
+            nextTick(() => {
+              actions.updateCompDatas(
+                comp,
+                ["value", "layout.size.1"],
+                [value, helper.pxToDesignSize(inputRef.value?.$el.clientHeight)]
+              );
+              controls.selectCtrl.upgateGizmoStyle();
+              helper.extendStreamCard(store.currStreamCardId);
+            });
+          }
+        }}
+        onReady={(editor: InlineEditor) => {
+          editorInstance.value = editor;
+          console.log("editor");
+          editor.setData(comp.value);
+          editor.focus();
+          const range = document.createRange();
+          range.selectNodeContents(inputRef.value.$el);
+          const selection = window.getSelection();
+          selection?.removeAllRanges();
+          selection?.addRange(range);
+        }}
+        config={GetConfig()}
+      />
+    );
   },
-})
-
-
+});
 
 const textStyle = css`
   font-size: 0.24rem;