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

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

@@ -59,6 +59,7 @@ HeadlessEditor.defaultConfig = {
   lineHeight: {
     options: [1, 1.5, 2, 2.5, 3],
   },
+  link: {},
 } as HeadlessConfig;
 
 export default HeadlessEditor;

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

@@ -9,18 +9,19 @@ import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { LinkOutlined } from "@ant-design/icons-vue";
 
 import { css } from "@linaria/core";
-import { Button, Divider, InputNumber, Select } from "ant-design-vue";
-import { defineComponent, nextTick } from "vue";
+import { Button, Divider } from "ant-design-vue";
+import { defineComponent } from "vue";
 import { any } from "vue-types";
 
 import ToolbarsUI from "../../formItems/ToolbarsUI";
 import {
   AlignComp,
-  LineHeightComp,
-  TextColor,
-  FontStyleComp,
   FontFamily,
   FontSize,
+  FontStyleComp,
+  LineHeightComp,
+  LinkButton,
+  TextColor,
 } from "./ToolbarComp";
 
 export const TextToolbar = defineComponent({
@@ -124,13 +125,7 @@ export const TextToolbar = defineComponent({
         label: "链接",
         dataIndex: "link",
         component: (props: any) => (
-          <Button
-            icon={<LinkOutlined />}
-            type="text"
-            onClick={() => {
-              console.log(props);
-            }}
-          ></Button>
+          <LinkButton icon={<LinkOutlined />} {...props} />
         ),
         itemProps: {
           class: "!mx-2px",
@@ -147,12 +142,18 @@ export const TextToolbar = defineComponent({
     ];
     const changeVal = (e: { dataIndex: string; value: any }) => {
       const editor = controls.textEditor;
+      console.log(e);
       if (!editor) {
         return;
       }
       // const command = editor ? editor.commands.get(e.dataIndex) : null;
       // console.log(e, command);
-      editor.execute(e.dataIndex, { value: e.value });
+
+      if (e.dataIndex == "link") {
+        editor.execute(e.dataIndex, e.value);
+      } else {
+        editor.execute(e.dataIndex, { value: e.value });
+      }
       editor.editing.view.focus();
 
       // const command =  editor.commands.get(e.commandName)

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

@@ -10,9 +10,10 @@ import { Button, Dropdown, InputNumber, Menu, Tooltip } from "ant-design-vue";
 
 import Pickr from "@simonwep/pickr";
 import "@simonwep/pickr/dist/themes/nano.min.css";
-import { defineComponent, onMounted, reactive } from "vue";
+import { defineComponent, onMounted, reactive, watch } from "vue";
 import { any, string } from "vue-types";
 import Select from "@queenjs-modules/queditor/components/FormUI/Items/Select";
+import { queenApi } from "queenjs";
 
 export const TextColor = defineComponent({
   props: {
@@ -21,6 +22,7 @@ export const TextColor = defineComponent({
   emits: ["change"],
   setup(props, { emit }) {
     let picker: any = null;
+
     function initPicker() {
       picker = Pickr.create({
         el: ".color_picker",
@@ -43,16 +45,23 @@ export const TextColor = defineComponent({
         },
       });
 
-      picker.on("change", (color: any) => {
-        const hexa = color.toHEXA().toString();
-        // emit("change", hexa);
-      });
+      // picker.on("change", (color: any) => {
+      //   const hexa = color.toHEXA().toString();
+      //   console.log("change", hexa);
+      //   // emit("change", hexa);
+      // });
       picker.on("save", (color: any) => {
         picker.hide();
         const hexa = color.toHEXA().toString();
         emit("change", hexa);
       });
     }
+    watch(
+      () => props.value,
+      () => {
+        picker.setColor(props.value);
+      }
+    );
     onMounted(() => {
       initPicker();
     });
@@ -178,6 +187,7 @@ export const FontStyleComp = defineComponent({
     const state = reactive({
       isOn: props.value || false,
     });
+
     const triggerStyle = () => {
       state.isOn = !state.isOn;
       emit("change", state.isOn);
@@ -236,6 +246,26 @@ export const FontSize = defineComponent({
     );
   },
 });
+export const LinkButton = defineComponent({
+  props: {
+    icon: any(),
+    value: any(),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const showLinkInput = async () => {
+      const res = await queenApi.showInput({
+        title: "请输入链接地址",
+        defaultValue: "http://",
+      });
+      emit("change", res);
+    };
+    return () => (
+      <Button type="text" icon={props.icon} onClick={showLinkInput}></Button>
+    );
+  },
+});
+
 const currStyle = css`
   color: @inf-primary-color;
   &:hover,

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

@@ -97,14 +97,13 @@ const EditorComp = defineComponent({
       }
     };
     function isInCkBodyWrapper(dom: HTMLElement) {
-
-      const out = {in: false, stop: true};
+      const out = { in: false, stop: true };
 
       if (editorRefVal) {
         const in1 =
           editorRefVal.ui.view.toolbar.element?.contains(dom) ||
           editorRefVal.ui.view.editable.element?.contains(dom);
-        if (in1)  {
+        if (in1) {
           out.in = true;
           return out;
         }
@@ -115,19 +114,24 @@ const EditorComp = defineComponent({
           out.stop = false;
           return out;
         }
+        const ckBodyWrapper = document.querySelector(".ck-body-wrapper");
+        if (ckBodyWrapper === dom || ckBodyWrapper?.contains(dom)) {
+          out.in = true;
+          return out;
+        }
       }
 
       let n = 0;
-      let curr:any = dom;
+      let curr: any = dom;
       do {
         if (curr.id == "toptoolbar") {
           out.in = true;
           return out;
-        };
+        }
         curr = curr.parentElement;
-        n +=1;
+        n += 1;
         if (n > 10) break;
-      }while(curr)
+      } while (curr);
       return out;
     }
 
@@ -136,7 +140,7 @@ const EditorComp = defineComponent({
         const target = e.target as HTMLElement;
 
         if (!editorRefVal) return;
-        const test = isInCkBodyWrapper(target)
+        const test = isInCkBodyWrapper(target);
         if (test.in) {
           if (test.stop) {
             e.stopPropagation();