render style tags as plain text in md editor

ramp4-pcar4 · Nov 26, 2024 · 35c3200 · 35c3200
1 parent 6ab1b8b
commit 35c3200
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/src/components/text-editor.vue b/src/components/text-editor.vue
@@ -8,6 +8,8 @@
             height="400px"
             left-toolbar="undo redo clear | h bold italic strikethrough quote subsuper | ul ol table hr | addLink image code | save"
             :toolbar="toolbar"
+            @change="escapeStyleTags"
+            ref="textEditor"
         ></v-md-editor>
     </div>
 </template>
@@ -117,6 +119,19 @@ export default class TextEditorV extends Vue {
             this.panel.customStyles = (this.panel.customStyles || '').replace('text-align: left !important;', '');
         }
     }
+
+    escapeStyleTags(text: string, html: string): void {
+        const styleRegex = /<\/?\s*style\s*\/?>/gi;
+        if (this.$refs.textEditor?.text){
+            const regexMatch = text.match(styleRegex);
+            if (regexMatch) {
+                const escapedText = text.replaceAll(styleRegex, (match) => {
+                    return match.split(' ').join('').replace('<', '‹').replace('>', '›').toLowerCase();
+                });
+                this.$refs.textEditor.text = escapedText;
+            }
+        }
+    }
 }
 </script>