Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

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,31 +82,31 @@ 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();
+          }
         }}
       >
       {
@@ -107,24 +126,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)