text

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

@@ -68,7 +68,7 @@ const EditorComp = defineComponent({
 
   setup(props, { emit }) {
     let editorRefVal = ref<HeadlessEditor>().value;
-    let editorDomRef=ref<HTMLElement>()
+    let editorDomRef = ref<HTMLElement>();
     const comp = useCompData(props.compId);
     const { store, actions, helper, controls } = useEditor();
 
@@ -210,7 +210,7 @@ const EditorComp = defineComponent({
       });
     });
     return () => {
-      return <div class={textStyle} ref={editorDomRef} ></div>;
+      return <div class={textStyle} ref={editorDomRef}></div>;
     };
   },
 });
@@ -220,7 +220,16 @@ const textStyle = css`
   width: 100%;
   color: #666;
   word-break: break-all;
-
+  h2 {
+    color: #111111;
+    font-size: 24px;
+    margin-bottom: 0;
+  }
+  h3 {
+    color: #333333;
+    font-size: 18px;
+    margin-bottom: 0;
+  }
   p {
     margin: 0;
   }

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

@@ -33,7 +33,7 @@ export default defineUI({
                 class={"btn_item text-16px font-600"}
                 onClick={() => {
                   const h2 =
-                    '<p style="line-height:1.5;text-align:center;"><span style="color:#111111;font-size:24px"><strong>请输入标题</strong></span></p>';
+                    '<h2 style="line-height:1.5;text-align:center;"><span style="color:#111111;font-size:24px;">请输入标题</span></h2>';
                   editor.actions.clickCompToDesign(
                     "Text",
                     (comp: DesignComp) => {
@@ -48,7 +48,7 @@ export default defineUI({
                 class={"btn_item font-600"}
                 onClick={() => {
                   const h3 =
-                    '<p style="line-height:1.5;text-align:center;"><span style="color:#333333;font-size:18px">请输入副标题</span></p>';
+                    '<h3 style="line-height:1.5;text-align:center;"><span style="color:#333333;font-size:18px;">请输入副标题</span></h3>';
                   editor.actions.clickCompToDesign(
                     "Text",
                     (comp: DesignComp) => {

src/modules/editor/controllers/TextEditorCtrl/index.ts

@@ -31,7 +31,7 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
     if (!this.state.currEditor) {
       let alink = `<a href="${res}"><span style="font-size:14px">${res}</span></a>`;
       const compValue = this.store.currComp.value;
-      const pTagReg = /(<p[\s\S]*?>)([\s\S]*?)(<\/p>)/gi;
+      const pTagReg = /(<(p|h2|h3)[\s\S]*?>)([\s\S]*?)(<\/(p|h2|h3)>)/gi;
       const blocks = compValue.match(pTagReg);
       if (!blocks) {
         return;
@@ -58,7 +58,7 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
     }
     const compValue = this.store.currComp.value;
 
-    const pTagReg = /(<p[\s\S]*?>)([\s\S]*?)(<\/p>)/gi;
+    const pTagReg = /(<(p|h2|h3)[\s\S]*?>)([\s\S]*?)(<\/(p|h2|h3)>)/gi;
     const blocks = compValue.match(pTagReg);
     if (!blocks) {
       return;
@@ -79,7 +79,7 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
     this.actions.updateCompData(this.store.currComp, "value", blocks.join(""));
   }
   blockStyleChange(item: string, key: string, e: any) {
-    const pStyleReg = /<p[\s|\s]*style=[\s|\S]*?>/;
+    const pStyleReg = /<(p|h2|h3)[\s|\s]*style=[\s|\S]*?>/;
     let blockStr = item;
     const hasStyles = item.indexOf(stylesKey[key]);
     if (hasStyles != -1) {
@@ -89,25 +89,25 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
       return blockStr;
     }
     if (pStyleReg.test(item)) {
-      const addStyleReg = /(<p[\s|\s]*style=[\s|\S]*?)(">[\s|\S]*)/;
-      blockStr = item.replace(addStyleReg, `$1${stylesKey[key]}:${e.value};$2`);
+      const addStyleReg = /(<(p|h2|h3)[\s|\s]*style=[\s|\S]*?)(">[\s|\S]*)/;
+      blockStr = item.replace(addStyleReg, `$1${stylesKey[key]}:${e.value};$3`);
     } else {
-      const noStyleReg = /(<p[\s|\s]*)(>[\s|\S]*)/;
+      const noStyleReg = /(<(p|h2|h3)[\s|\s]*)(>[\s|\S]*)/;
       blockStr = item.replace(
         noStyleReg,
-        `$1 style="${stylesKey[key]}:${e.value};"$2`
+        `$1 style="${stylesKey[key]}:${e.value};"$3`
       );
     }
     return blockStr;
   }
   spanStyleChange(item: string, key: string, e: any) {
-    const pTagReg = /(<p[\s\S]*?>)([\s\S]*?)(<\/p>)/gi;
+    const pTagReg = /(<(p|h2|h3)[\s\S]*?>)([\s\S]*?)(<\/(p|h2|h3)>)/gi;
     let spanStr = item;
     const hasSpan: any = spanStr.indexOf("span");
     if (hasSpan == -1) {
       spanStr = spanStr.replace(
         pTagReg,
-        '$1<span style="font-size:14px;">$2</span>$3'
+        '$1<span style="font-size:14px;">$3</span>$4'
       );
     }
     const hasStyles = item.indexOf(stylesKey[key]);
@@ -134,7 +134,7 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
 
   addCompValueTags(key: string, e: any) {
     const compValue = this.store.currComp.value;
-    const pTagReg = /(<p[\s\S]*?>)([\s\S]*?)(<\/p>)/gi;
+    const pTagReg = /(<(p|h2|h3)[\s\S]*?>)([\s\S]*?)(<\/(p|h2|h3)>)/gi;
     const blocks = compValue.match(pTagReg);
     if (!blocks) {
       return;
@@ -147,7 +147,7 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
       }
       const spanStr = item.replace(
         pTagReg,
-        '$1<span style="font-size:14px;">$2</span>$3'
+        '$1<span style="font-size:14px;">$3</span>$4'
       );
       blocks[index] = this.formatSortTags(spanStr, key, e);
     });