ycysd

public/assets/js/bridge/rte-editor.js

@@ -164,6 +164,75 @@
         return allowed.has(tag) ? tag : 'div';
     };
 
+    const applyComponentPreviewStyles = (component, content) => {
+        if (!component || !content) return;
+        const mergeStyles = () => {
+            const out = {};
+            const fromGetStyle = (component.getStyle && component.getStyle()) || {};
+            const fromGetAttr = (component.get && component.get('style')) || {};
+            const add = (obj) => {
+                if (!obj || typeof obj !== 'object' || Array.isArray(obj)) return;
+                Object.entries(obj).forEach(([key, val]) => {
+                    if (val === undefined || val === null || val === '') return;
+                    out[key] = val;
+                });
+            };
+            add(fromGetStyle);
+            add(fromGetAttr);
+            return out;
+        };
+        const styleObj = mergeStyles();
+        const applyStyle = (prop, value) => {
+            if (!value) return;
+            try { content.style[prop] = value; } catch {}
+        };
+        const pick = (keys) => {
+            for (const key of keys) {
+                if (styleObj[key]) return styleObj[key];
+            }
+            return '';
+        };
+        applyStyle('fontFamily', pick(['font-family', 'fontFamily']));
+        applyStyle('fontSize', pick(['font-size', 'fontSize']));
+        applyStyle('fontWeight', pick(['font-weight', 'fontWeight']));
+        applyStyle('fontStyle', pick(['font-style', 'fontStyle']));
+        applyStyle('textDecoration', pick(['text-decoration', 'textDecoration', 'text-decoration-line']));
+        applyStyle('color', pick(['color']));
+        applyStyle('lineHeight', pick(['line-height', 'lineHeight']));
+        applyStyle('letterSpacing', pick(['letter-spacing', 'letterSpacing']));
+        applyStyle('textAlign', pick(['text-align', 'textAlign']));
+        applyStyle('backgroundColor', pick(['background-color', 'backgroundColor']));
+    };
+
+    const applyComputedPreviewStyles = (component, content) => {
+        try {
+            const viewEl = component && component.view ? component.view.el : null;
+            if (!viewEl || !viewEl.ownerDocument) return;
+            const computed = viewEl.ownerDocument.defaultView
+                ? viewEl.ownerDocument.defaultView.getComputedStyle(viewEl)
+                : null;
+            if (!computed) return;
+            const map = {
+                fontFamily: 'font-family',
+                fontSize: 'font-size',
+                fontWeight: 'font-weight',
+                fontStyle: 'font-style',
+                textDecoration: 'text-decoration-line',
+                color: 'color',
+                lineHeight: 'line-height',
+                letterSpacing: 'letter-spacing',
+                textAlign: 'text-align',
+                backgroundColor: 'background-color',
+            };
+            Object.entries(map).forEach(([prop, cssProp]) => {
+                const val = computed.getPropertyValue(cssProp);
+                if (val && val.trim()) {
+                    try { content.style[prop] = val.trim(); } catch {}
+                }
+            });
+        } catch {}
+    };
+
     const openRichTextModal = (editor, component) => {
         if (!isTextLike(component)) {
             log('RTE', 'Bitte zuerst ein Text-Element auswaehlen.', '#888');
@@ -272,6 +341,8 @@
                 content.style.fontSize = existingStyle.fontSize;
             }
         }
+        applyComponentPreviewStyles(component, content);
+        applyComputedPreviewStyles(component, content);
 
         let savedRange = null;
         const saveSelection = () => {