diff --git a/public/assets/js/bridge/rte-editor.js b/public/assets/js/bridge/rte-editor.js index 86da449..6900358 100644 --- a/public/assets/js/bridge/rte-editor.js +++ b/public/assets/js/bridge/rte-editor.js @@ -128,6 +128,42 @@ } }; + const collectFrameCss = (editor) => { + const cssParts = []; + try { + const frameDoc = editor && editor.Canvas && editor.Canvas.getDocument ? editor.Canvas.getDocument() : null; + if (frameDoc) { + frameDoc.querySelectorAll('style').forEach((styleEl) => { + const css = String(styleEl.textContent || '').trim(); + if (css) cssParts.push(css); + }); + frameDoc.querySelectorAll('link[rel="stylesheet"][href]').forEach((linkEl) => { + const href = linkEl.getAttribute('href'); + if (!href) return; + try { + const abs = new URL(href, frameDoc.baseURI).href; + cssParts.push(`@import url("${abs}");`); + } catch {} + }); + } + } catch {} + return cssParts.join('\n'); + }; + + const getEditableTag = (component) => { + const viewEl = component && component.view ? component.view.el : null; + const raw = (component && component.get && (component.get('tagName') || component.get('tag'))) + || (viewEl && viewEl.tagName) + || 'div'; + const tag = String(raw || 'div').toLowerCase(); + const allowed = new Set([ + 'div', 'p', 'span', 'a', 'button', + 'strong', 'b', 'em', 'i', 'u', 's', + 'sub', 'sup', 'ul', 'ol', 'li', + ]); + return allowed.has(tag) ? tag : 'div'; + }; + const openRichTextModal = (editor, component) => { if (!isTextLike(component)) { log('RTE', 'Bitte zuerst ein Text-Element auswaehlen.', '#888'); @@ -190,7 +226,7 @@ toolbar.style.gap = '6px'; toolbar.style.alignItems = 'center'; - const content = doc.createElement('div'); + const content = doc.createElement(getEditableTag(component)); content.contentEditable = 'true'; content.style.flex = '1'; content.style.minHeight = '280px'; @@ -201,6 +237,11 @@ content.style.overflow = 'auto'; content.style.fontFamily = 'Arial, sans-serif'; content.style.fontSize = '14px'; + if (component && component.view && component.view.el) { + const viewEl = component.view.el; + if (viewEl.className) content.className = viewEl.className; + if (viewEl.id) content.id = viewEl.id; + } const modelContent = (component.get && component.get('content')) || ''; const viewHtml = (component.view && component.view.el && component.view.el.innerHTML) || ''; @@ -483,7 +524,8 @@ try { editorCss = editor && typeof editor.getCss === 'function' ? String(editor.getCss() || '') : ''; } catch {} - injectedStyle.textContent = `${fontCss}\n${editorCss}`.trim(); + const frameCss = collectFrameCss(editor); + injectedStyle.textContent = `${fontCss}\n${editorCss}\n${frameCss}`.trim(); if (injectedStyle.textContent) { container.appendChild(injectedStyle); }