text

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

@@ -8,6 +8,7 @@ import {
 } from "@ckeditor/ckeditor5-basic-styles";
 import { InlineEditor } from "@ckeditor/ckeditor5-editor-inline";
 import { Essentials } from "@ckeditor/ckeditor5-essentials";
+import Heading from "@ckeditor/ckeditor5-heading/src/heading";
 import { FontColor, FontFamily, FontSize } from "@ckeditor/ckeditor5-font";
 import { Link } from "@ckeditor/ckeditor5-link";
 import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
@@ -42,6 +43,7 @@ function GetConfig() {
       Link,
       Underline,
       Strikethrough,
+      Heading,
       Paragraph,
       FontColor,
       FontSize,
@@ -193,7 +195,7 @@ const EditorComp = defineComponent({
         if (!editorInstance.value) return;
 
         if (isInCkBodyWrapper(target)) {
-          // e.stopPropagation();
+          e.stopPropagation();
           return;
         }
         actions.submitUpdate();
@@ -253,11 +255,19 @@ const EditorComp = defineComponent({
 });
 
 const textStyle = css`
-  font-size: 12px;
+  font-size: 14px;
   width: 100%;
   color: #666;
   word-break: break-all;
-
+  h2 {
+    color: #111;
+    font-size: 24px;
+    font-weight: 600;
+  }
+  h3 {
+    font-size: 18px;
+    color: #333;
+  }
   p {
     margin: 0;
   }

src/modules/editor/components/Viewport/Slider/SliderLeft/Text.tsx

@@ -1,7 +1,8 @@
 import { useEditor } from "@/modules/editor";
 import { Button } from "ant-design-vue";
 import { defineUI } from "queenjs";
-
+import { css } from "@linaria/core";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 export default defineUI({
   setup() {
     const editor = useEditor();
@@ -16,8 +17,77 @@ export default defineUI({
           >
             添加文本框
           </Button>
+          <div class={"pt-20px"}>
+            <div>默认</div>
+            <div class={[ButtonStyle, "space-y-10px mt-16px"]}>
+              <div
+                class={"btn_item text-16px font-600"}
+                onClick={() => {
+                  const h2 =
+                    '<h2 style="line-height:1.5;text-align:center;">请输入标题</h2>';
+                  editor.actions.clickCompToDesign(
+                    "Text",
+                    (comp: DesignComp) => {
+                      editor.actions.updateCompData(comp, "value", h2);
+                    }
+                  );
+                }}
+              >
+                添加标题
+              </div>
+              <div
+                class={"btn_item font-600"}
+                onClick={() => {
+                  const h3 =
+                    '<h3 style="line-height:1.5;text-align:center;">请输入副标题</h3>';
+                  editor.actions.clickCompToDesign(
+                    "Text",
+                    (comp: DesignComp) => {
+                      editor.actions.updateCompData(comp, "value", h3);
+                    }
+                  );
+                }}
+              >
+                添加副标题
+              </div>
+              <div
+                class={"btn_item text-12px"}
+                onClick={() => {
+                  const text =
+                    '<p style="text-align:center;line-height:1.5;">请输入正文</p>';
+                  editor.actions.clickCompToDesign(
+                    "Text",
+                    (comp: DesignComp) => {
+                      editor.actions.updateCompData(comp, "value", text);
+                    }
+                  );
+                }}
+              >
+                添加一段正文
+              </div>
+            </div>
+          </div>
         </div>
       );
     };
   },
 });
+const ButtonStyle = css`
+  .btn_item {
+    line-height: 46px;
+    background-color: #303030;
+    border-radius: 4px;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+    &:hover {
+      background-color: rgba(48, 48, 48, 0.8);
+    }
+    &:active {
+      background-color: rgba(48, 48, 48, 1);
+    }
+    .inficon {
+      font-size: 30px;
+    }
+  }
+`;