sdsad
This commit is contained in:
@@ -9,575 +9,329 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const execRteCommand = (rte, cmd, value, docOverride) => {
|
const escapeHtml = (text) => String(text || '')
|
||||||
try {
|
.replace(/&/g, '&')
|
||||||
if (rte && typeof rte.exec === 'function') {
|
.replace(/</g, '<')
|
||||||
rte.exec(cmd, value);
|
.replace(/>/g, '>')
|
||||||
return true;
|
.replace(/"/g, '"')
|
||||||
}
|
.replace(/'/g, ''');
|
||||||
} catch {}
|
|
||||||
try {
|
const sanitizeInlineHtml = (rawHtml, fallbackText) => {
|
||||||
const doc = docOverride
|
const wrapper = document.createElement('div');
|
||||||
|| rte?.doc
|
wrapper.innerHTML = String(rawHtml || '');
|
||||||
|| rte?.el?.ownerDocument
|
|
||||||
|| document;
|
wrapper.querySelectorAll('script,style').forEach((node) => node.remove());
|
||||||
if (rte?.el && typeof rte.el.focus === 'function') {
|
|
||||||
rte.el.focus();
|
const inlineTags = new Set(['A', 'B', 'STRONG', 'I', 'EM', 'U', 'S', 'BR', 'SUB', 'SUP', 'SPAN']);
|
||||||
}
|
const blockTags = new Set([
|
||||||
const ok = doc.execCommand(cmd, false, value);
|
'DIV', 'P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6',
|
||||||
if (ok === false && cmd === 'insertText') {
|
'UL', 'OL', 'LI', 'TABLE', 'TBODY', 'THEAD', 'TFOOT', 'TR', 'TD', 'TH',
|
||||||
doc.execCommand('insertHTML', false, String(value || '').replace(/</g, '<').replace(/>/g, '>'));
|
'SECTION', 'ARTICLE', 'ASIDE', 'HEADER', 'FOOTER',
|
||||||
}
|
]);
|
||||||
return true;
|
|
||||||
} catch {}
|
const unwrap = (el, addBreak) => {
|
||||||
return false;
|
const frag = document.createDocumentFragment();
|
||||||
|
while (el.firstChild) {
|
||||||
|
frag.appendChild(el.firstChild);
|
||||||
|
}
|
||||||
|
if (addBreak) {
|
||||||
|
frag.appendChild(document.createElement('br'));
|
||||||
|
}
|
||||||
|
el.replaceWith(frag);
|
||||||
};
|
};
|
||||||
|
|
||||||
const normalizeRteActionList = (editor, names) => {
|
Array.from(wrapper.querySelectorAll('*')).forEach((el) => {
|
||||||
const cfg = editor.getConfig ? editor.getConfig() : {};
|
const tag = el.tagName;
|
||||||
cfg.richTextEditor = cfg.richTextEditor || {};
|
if (inlineTags.has(tag)) {
|
||||||
const base = Array.isArray(cfg.richTextEditor.actions)
|
Array.from(el.attributes).forEach((attr) => {
|
||||||
? cfg.richTextEditor.actions.slice()
|
const name = attr.name.toLowerCase();
|
||||||
: ['bold', 'italic', 'underline', 'strikethrough', 'link'];
|
if (tag === 'a') {
|
||||||
names.forEach((name) => {
|
if (!['href', 'target', 'rel', 'style'].includes(name)) {
|
||||||
const exists = base.some((item) => (typeof item === 'string' ? item === name : item && item.name === name));
|
el.removeAttribute(attr.name);
|
||||||
if (!exists) base.push(name);
|
}
|
||||||
});
|
} else if (name !== 'style') {
|
||||||
cfg.richTextEditor.actions = base;
|
el.removeAttribute(attr.name);
|
||||||
};
|
}
|
||||||
|
});
|
||||||
const ensureTextToolbarButton = (editor, component) => {
|
|
||||||
if (!component || !component.is) return;
|
|
||||||
const isTextLike = component.is('text') || component.is('button') || component.is('link');
|
|
||||||
if (!isTextLike) return;
|
|
||||||
const toolbar = (component.get && component.get('toolbar')) || [];
|
|
||||||
if (toolbar.some((item) => item && item.command === 'bridge-open-richtext')) return;
|
|
||||||
toolbar.push({
|
|
||||||
label: '<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M4 20h4l10-10-4-4L4 16v4zm14.7-11.3c.4-.4.4-1 0-1.4l-2-2c-.4-.4-1-.4-1.4 0l-1.3 1.3 4 4 1.7-1.9z" fill="currentColor"/></svg>',
|
|
||||||
attributes: { title: 'Richtext bearbeiten' },
|
|
||||||
command: 'bridge-open-richtext',
|
|
||||||
});
|
|
||||||
component.set && component.set('toolbar', toolbar);
|
|
||||||
};
|
|
||||||
|
|
||||||
const openRichTextModal = (editor, component) => {
|
|
||||||
if (!component || !component.is || !(component.is('text') || component.is('button') || component.is('link'))) {
|
|
||||||
log('RTE', 'Bitte zuerst ein Text-Element auswaehlen.', '#888');
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
unwrap(el, blockTags.has(tag));
|
||||||
|
});
|
||||||
|
|
||||||
const modal = editor.Modal;
|
let html = wrapper.innerHTML
|
||||||
if (!modal) return;
|
.replace(/<br\s*\/?>/gi, '<br>')
|
||||||
if (editor.__bridgeRteModalOpen) return;
|
.replace(/(<br>)+$/g, '')
|
||||||
editor.__bridgeRteModalOpen = true;
|
.trim();
|
||||||
editor.__bridgeRteAllowClose = false;
|
if (!html) {
|
||||||
let reopenGuard = false;
|
const text = String(fallbackText || wrapper.textContent || '').trim();
|
||||||
const closeModal = () => {
|
if (text) html = escapeHtml(text);
|
||||||
editor.__bridgeRteAllowClose = true;
|
}
|
||||||
editor.__bridgeRteModalOpen = false;
|
return html;
|
||||||
if (typeof modal.__bridgeOriginalClose === 'function') {
|
};
|
||||||
modal.__bridgeOriginalClose();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (typeof modal.close === 'function') {
|
|
||||||
modal.close();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const mdl = modal.getModel && modal.getModel();
|
|
||||||
if (mdl && typeof mdl.set === 'function') {
|
|
||||||
mdl.set('open', false);
|
|
||||||
} else if (modal.el) {
|
|
||||||
modal.el.style.display = 'none';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!modal.__bridgeCloseLocked) {
|
const isTextLike = (component) => !!(component && component.is && (component.is('text') || component.is('button') || component.is('link')));
|
||||||
modal.__bridgeCloseLocked = true;
|
|
||||||
modal.__bridgeOriginalClose = modal.close ? modal.close.bind(modal) : null;
|
const applyContentToComponent = (editor, component, html) => {
|
||||||
modal.close = function (...args) {
|
if (!component) return;
|
||||||
if (!editor.__bridgeRteModalOpen && typeof modal.__bridgeOriginalClose === 'function') {
|
const content = String(html || '');
|
||||||
return modal.__bridgeOriginalClose(...args);
|
if (component.set) component.set('content', content);
|
||||||
}
|
if (component.view && component.view.el) {
|
||||||
if (editor.__bridgeRteAllowClose && typeof modal.__bridgeOriginalClose === 'function') {
|
component.view.el.innerHTML = content;
|
||||||
editor.__bridgeRteAllowClose = false;
|
}
|
||||||
return modal.__bridgeOriginalClose(...args);
|
if (component.view && typeof component.view.render === 'function') {
|
||||||
}
|
component.view.render();
|
||||||
if (!editor.__bridgeRteModalOpen && !modal.__bridgeOriginalClose) {
|
}
|
||||||
const mdl = modal.getModel && modal.getModel();
|
if (component.trigger) {
|
||||||
if (mdl && typeof mdl.set === 'function') {
|
component.trigger('change:content');
|
||||||
mdl.set('open', false);
|
component.trigger('change:components');
|
||||||
} else if (modal.el) {
|
}
|
||||||
modal.el.style.display = 'none';
|
if (editor && typeof editor.trigger === 'function') {
|
||||||
}
|
editor.trigger('component:update', component);
|
||||||
}
|
}
|
||||||
if (editor.__bridgeRteAllowClose && !modal.__bridgeOriginalClose) {
|
};
|
||||||
editor.__bridgeRteAllowClose = false;
|
|
||||||
const mdl = modal.getModel && modal.getModel();
|
const openRichTextModal = (editor, component) => {
|
||||||
if (mdl && typeof mdl.set === 'function') {
|
if (!isTextLike(component)) {
|
||||||
mdl.set('open', false);
|
log('RTE', 'Bitte zuerst ein Text-Element auswaehlen.', '#888');
|
||||||
} else if (modal.el) {
|
return;
|
||||||
modal.el.style.display = 'none';
|
}
|
||||||
}
|
|
||||||
}
|
const modal = editor && editor.Modal;
|
||||||
};
|
if (!modal || editor.__bridgeRteModalOpen) return;
|
||||||
|
editor.__bridgeRteModalOpen = true;
|
||||||
|
|
||||||
|
const closeModal = () => {
|
||||||
|
editor.__bridgeRteModalOpen = false;
|
||||||
|
if (typeof modal.close === 'function') {
|
||||||
|
modal.close();
|
||||||
|
} else if (modal.getModel && modal.getModel().set) {
|
||||||
|
modal.getModel().set('open', false);
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const doc = document;
|
const doc = document;
|
||||||
const container = doc.createElement('div');
|
const container = doc.createElement('div');
|
||||||
container.style.display = 'flex';
|
container.style.display = 'flex';
|
||||||
container.style.flexDirection = 'column';
|
container.style.flexDirection = 'column';
|
||||||
container.style.gap = '10px';
|
container.style.gap = '10px';
|
||||||
container.style.height = '100%';
|
container.style.height = '100%';
|
||||||
container.style.minHeight = '360px';
|
container.style.minHeight = '360px';
|
||||||
|
|
||||||
const toolbar = doc.createElement('div');
|
const toolbar = doc.createElement('div');
|
||||||
toolbar.style.display = 'flex';
|
toolbar.style.display = 'flex';
|
||||||
toolbar.style.flexWrap = 'wrap';
|
toolbar.style.flexWrap = 'wrap';
|
||||||
toolbar.style.gap = '6px';
|
toolbar.style.gap = '6px';
|
||||||
toolbar.style.alignItems = 'center';
|
toolbar.style.alignItems = 'center';
|
||||||
|
|
||||||
const content = doc.createElement('div');
|
const content = doc.createElement('div');
|
||||||
content.contentEditable = 'true';
|
content.contentEditable = 'true';
|
||||||
content.style.flex = '1';
|
content.style.flex = '1';
|
||||||
content.style.minHeight = '280px';
|
content.style.minHeight = '280px';
|
||||||
content.style.border = '1px solid #cbd5f5';
|
content.style.border = '1px solid #cbd5f5';
|
||||||
content.style.borderRadius = '6px';
|
content.style.borderRadius = '6px';
|
||||||
content.style.padding = '12px';
|
content.style.padding = '12px';
|
||||||
content.style.background = '#ffffff';
|
content.style.background = '#ffffff';
|
||||||
content.style.overflow = 'auto';
|
content.style.overflow = 'auto';
|
||||||
content.style.fontFamily = 'Arial, sans-serif';
|
content.style.fontFamily = 'Arial, sans-serif';
|
||||||
content.style.fontSize = '14px';
|
content.style.fontSize = '14px';
|
||||||
|
|
||||||
const initialHtml = (component.view && component.view.el && component.view.el.innerHTML)
|
const initialHtml = (component.get && component.get('content'))
|
||||||
|| (component.get && component.get('content'))
|
|| (component.view && component.view.el && component.view.el.innerHTML)
|
||||||
|| '';
|
|| '';
|
||||||
content.innerHTML = initialHtml;
|
content.innerHTML = initialHtml;
|
||||||
|
|
||||||
const addButton = (labelHtml, title, cmd, valueGetter) => {
|
const exec = (cmd, value) => {
|
||||||
const btn = doc.createElement('button');
|
|
||||||
btn.type = 'button';
|
|
||||||
btn.innerHTML = labelHtml;
|
|
||||||
btn.title = title;
|
|
||||||
btn.style.padding = '4px 8px';
|
|
||||||
btn.style.border = '1px solid #cbd5f5';
|
|
||||||
btn.style.borderRadius = '4px';
|
|
||||||
btn.style.background = '#f8fafc';
|
|
||||||
btn.style.cursor = 'pointer';
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
content.focus();
|
|
||||||
const value = typeof valueGetter === 'function' ? valueGetter() : valueGetter;
|
|
||||||
if (value === null || value === undefined) return;
|
|
||||||
if (cmd === 'createLink' && !value) return;
|
|
||||||
execRteCommand(null, cmd, value, content.ownerDocument);
|
|
||||||
});
|
|
||||||
toolbar.appendChild(btn);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addSelect = (options, title, onChange) => {
|
|
||||||
const select = doc.createElement('select');
|
|
||||||
select.title = title;
|
|
||||||
select.style.padding = '4px 8px';
|
|
||||||
select.style.border = '1px solid #cbd5f5';
|
|
||||||
select.style.borderRadius = '4px';
|
|
||||||
select.style.background = '#ffffff';
|
|
||||||
options.forEach((opt) => {
|
|
||||||
const optEl = doc.createElement('option');
|
|
||||||
optEl.value = opt.value;
|
|
||||||
optEl.textContent = opt.label;
|
|
||||||
select.appendChild(optEl);
|
|
||||||
});
|
|
||||||
select.addEventListener('change', () => {
|
|
||||||
const value = select.value;
|
|
||||||
content.focus();
|
|
||||||
if (value) onChange(value);
|
|
||||||
});
|
|
||||||
toolbar.appendChild(select);
|
|
||||||
return select;
|
|
||||||
};
|
|
||||||
|
|
||||||
const insertText = (text) => {
|
|
||||||
content.focus();
|
|
||||||
if (!execRteCommand(null, 'insertText', text)) {
|
|
||||||
execRteCommand(null, 'insertHTML', String(text).replace(/</g, '<').replace(/>/g, '>'));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const icon = (path) => `<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="${path}" fill="currentColor"/></svg>`;
|
|
||||||
addButton('<strong>B</strong>', 'Fett', 'bold');
|
|
||||||
addButton('<em>I</em>', 'Kursiv', 'italic');
|
|
||||||
addButton('<span style="text-decoration:underline">U</span>', 'Unterstrichen', 'underline');
|
|
||||||
addButton('<span style="text-decoration:line-through">S</span>', 'Durchgestrichen', 'strikethrough');
|
|
||||||
addButton(icon('M4 7h10v2H4zM4 11h16v2H4zM4 15h10v2H4z'), 'Liste (ungeordnet)', 'insertUnorderedList');
|
|
||||||
addButton(icon('M4 7h14v2H4zM4 11h14v2H4zM4 15h14v2H4z') + '<span style="font-size:10px;margin-left:4px">1.</span>', 'Liste (geordnet)', 'insertOrderedList');
|
|
||||||
addButton(icon('M4 7h10v2H4zM4 11h16v2H4zM4 15h12v2H4z'), 'Linksbundig', 'justifyLeft');
|
|
||||||
addButton(icon('M5 7h14v2H5zM4 11h16v2H4zM5 15h14v2H5z'), 'Zentriert', 'justifyCenter');
|
|
||||||
addButton(icon('M10 7h10v2H10zM4 11h16v2H4zM8 15h12v2H8z'), 'Rechtsbundig', 'justifyRight');
|
|
||||||
addButton(icon('M4 7h16v2H4zM4 11h16v2H4zM4 15h16v2H4z'), 'Blocksatz', 'justifyFull');
|
|
||||||
addButton('Link', 'Link einfuegen', 'createLink', () => prompt('Link-URL eingeben', 'https://'));
|
|
||||||
addButton('Unlink', 'Link entfernen', 'unlink');
|
|
||||||
addButton('Sub', 'Tiefgestellt', 'subscript');
|
|
||||||
addButton('Sup', 'Hochgestellt', 'superscript');
|
|
||||||
addButton('Einr.', 'Einzug', 'indent');
|
|
||||||
addButton('Aus.', 'Ausruecken', 'outdent');
|
|
||||||
addButton('Clear', 'Formatierung entfernen', 'removeFormat');
|
|
||||||
|
|
||||||
const fontOptions = (B.RTE_FONTS && Array.isArray(B.RTE_FONTS) && B.RTE_FONTS.length)
|
|
||||||
? B.RTE_FONTS
|
|
||||||
: [
|
|
||||||
{ label: 'Arial', value: 'Arial, sans-serif' },
|
|
||||||
{ label: 'Calibri', value: 'Calibri, sans-serif' },
|
|
||||||
{ label: 'Cambria', value: 'Cambria, serif' },
|
|
||||||
{ label: 'Georgia', value: 'Georgia, serif' },
|
|
||||||
{ label: 'Tahoma', value: 'Tahoma, sans-serif' },
|
|
||||||
{ label: 'Times New Roman', value: 'Times New Roman, serif' },
|
|
||||||
{ label: 'Trebuchet MS', value: 'Trebuchet MS, sans-serif' },
|
|
||||||
{ label: 'Verdana', value: 'Verdana, sans-serif' },
|
|
||||||
];
|
|
||||||
addSelect([
|
|
||||||
{ label: 'Schriftart', value: '' },
|
|
||||||
...fontOptions,
|
|
||||||
], 'Schriftart', (value) => execRteCommand(null, 'fontName', value, content.ownerDocument));
|
|
||||||
|
|
||||||
addSelect([
|
|
||||||
{ label: 'Groesse', value: '' },
|
|
||||||
{ label: '10px', value: '1' },
|
|
||||||
{ label: '12px', value: '2' },
|
|
||||||
{ label: '14px', value: '3' },
|
|
||||||
{ label: '16px', value: '4' },
|
|
||||||
{ label: '18px', value: '5' },
|
|
||||||
{ label: '24px', value: '6' },
|
|
||||||
{ label: '32px', value: '7' },
|
|
||||||
], 'Schriftgroesse', (value) => execRteCommand(null, 'fontSize', value, content.ownerDocument));
|
|
||||||
|
|
||||||
const emojiBtn = doc.createElement('button');
|
|
||||||
emojiBtn.type = 'button';
|
|
||||||
emojiBtn.textContent = ':-)';
|
|
||||||
emojiBtn.title = 'Emoticon einfuegen';
|
|
||||||
emojiBtn.style.padding = '4px 8px';
|
|
||||||
emojiBtn.style.border = '1px solid #cbd5f5';
|
|
||||||
emojiBtn.style.borderRadius = '4px';
|
|
||||||
emojiBtn.style.background = '#f8fafc';
|
|
||||||
emojiBtn.style.cursor = 'pointer';
|
|
||||||
emojiBtn.addEventListener('click', () => {
|
|
||||||
const pick = prompt('Emoticon eingeben', ':)');
|
|
||||||
if (pick) insertText(pick);
|
|
||||||
});
|
|
||||||
toolbar.appendChild(emojiBtn);
|
|
||||||
|
|
||||||
container.appendChild(toolbar);
|
|
||||||
container.appendChild(content);
|
|
||||||
|
|
||||||
const actions = doc.createElement('div');
|
|
||||||
actions.style.display = 'flex';
|
|
||||||
actions.style.justifyContent = 'flex-end';
|
|
||||||
actions.style.gap = '8px';
|
|
||||||
|
|
||||||
const cancelBtn = doc.createElement('button');
|
|
||||||
cancelBtn.type = 'button';
|
|
||||||
cancelBtn.textContent = 'Abbrechen';
|
|
||||||
cancelBtn.style.padding = '6px 12px';
|
|
||||||
cancelBtn.style.border = '1px solid #cbd5f5';
|
|
||||||
cancelBtn.style.borderRadius = '4px';
|
|
||||||
cancelBtn.style.background = '#f8fafc';
|
|
||||||
cancelBtn.style.cursor = 'pointer';
|
|
||||||
cancelBtn.addEventListener('click', () => {
|
|
||||||
closeModal();
|
|
||||||
});
|
|
||||||
|
|
||||||
const saveBtn = doc.createElement('button');
|
|
||||||
saveBtn.type = 'button';
|
|
||||||
saveBtn.textContent = 'Speichern';
|
|
||||||
saveBtn.style.padding = '6px 12px';
|
|
||||||
saveBtn.style.border = '1px solid #0ea5e9';
|
|
||||||
saveBtn.style.borderRadius = '4px';
|
|
||||||
saveBtn.style.background = '#0ea5e9';
|
|
||||||
saveBtn.style.color = '#ffffff';
|
|
||||||
saveBtn.style.cursor = 'pointer';
|
|
||||||
const normalizeRteHtml = (rawHtml) => {
|
|
||||||
const wrapper = doc.createElement('div');
|
|
||||||
wrapper.innerHTML = String(rawHtml || '').trim();
|
|
||||||
// Unwrap single empty div wrapper inserted by contenteditable
|
|
||||||
if (wrapper.children.length === 1 && wrapper.firstElementChild.tagName === 'DIV' && wrapper.firstElementChild.attributes.length === 0) {
|
|
||||||
wrapper.innerHTML = wrapper.firstElementChild.innerHTML;
|
|
||||||
}
|
|
||||||
// Drop empty div/br artifacts
|
|
||||||
wrapper.querySelectorAll('div').forEach((el) => {
|
|
||||||
if (!el.attributes.length && !el.textContent.trim() && !el.querySelector('img,br,span,b,strong,i,em,u,a,ul,ol,li')) {
|
|
||||||
el.remove();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
let html = wrapper.innerHTML.replace(/<br\s*\/?>/gi, '').trim();
|
|
||||||
if (!html) {
|
|
||||||
const fallbackText = wrapper.textContent.trim();
|
|
||||||
if (fallbackText) {
|
|
||||||
html = fallbackText.replace(/</g, '<').replace(/>/g, '>');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return html;
|
|
||||||
};
|
|
||||||
|
|
||||||
saveBtn.addEventListener('click', () => {
|
|
||||||
const rawHtml = content.innerHTML || '';
|
|
||||||
let html = normalizeRteHtml(rawHtml);
|
|
||||||
try {
|
|
||||||
console.warn('[RTE SAVE DEBUG]', {
|
|
||||||
rawHtml,
|
|
||||||
normalizedHtml: html,
|
|
||||||
textContent: String(content.textContent || '').trim()
|
|
||||||
});
|
|
||||||
} catch {}
|
|
||||||
const isTextLike = component && component.is && (component.is('text') || component.is('button') || component.is('link'));
|
|
||||||
try {
|
|
||||||
if (html) {
|
|
||||||
if (!isTextLike && component.components) {
|
|
||||||
component.components(html);
|
|
||||||
}
|
|
||||||
if (component.set) {
|
|
||||||
component.set('content', html);
|
|
||||||
component.trigger && component.trigger('change:content');
|
|
||||||
component.trigger && component.trigger('change:components');
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.warn('[RTE SAVE DEBUG] Skip empty content update.');
|
|
||||||
}
|
|
||||||
if (component.view && component.view.render) {
|
|
||||||
component.view.render();
|
|
||||||
}
|
|
||||||
if (editor && typeof editor.trigger === 'function') {
|
|
||||||
editor.trigger('component:update', component);
|
|
||||||
}
|
|
||||||
} catch {}
|
|
||||||
closeModal();
|
|
||||||
});
|
|
||||||
|
|
||||||
actions.appendChild(cancelBtn);
|
|
||||||
actions.appendChild(saveBtn);
|
|
||||||
container.appendChild(actions);
|
|
||||||
|
|
||||||
modal.setTitle('Richtext Editor');
|
|
||||||
modal.setContent(container);
|
|
||||||
const mdl = modal.getModel && modal.getModel();
|
|
||||||
if (mdl && typeof mdl.set === 'function') {
|
|
||||||
mdl.set('closeOnEsc', false);
|
|
||||||
mdl.set('closeOnClick', false);
|
|
||||||
}
|
|
||||||
if (typeof modal.onceClose === 'function') {
|
|
||||||
modal.onceClose(() => {
|
|
||||||
editor.__bridgeRteModalOpen = false;
|
|
||||||
editor.__bridgeRteAllowClose = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (mdl && typeof mdl.on === 'function') {
|
|
||||||
const handler = () => {
|
|
||||||
if (editor.__bridgeRteAllowClose) {
|
|
||||||
mdl.off && mdl.off('change:open', handler);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!mdl.get('open') && !reopenGuard) {
|
|
||||||
reopenGuard = true;
|
|
||||||
mdl.set('open', true);
|
|
||||||
setTimeout(() => { reopenGuard = false; }, 0);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
mdl.on('change:open', handler);
|
|
||||||
}
|
|
||||||
try {
|
try {
|
||||||
modal.open({ closeOnEsc: false, closeOnClick: false });
|
content.focus();
|
||||||
} catch {
|
const docRef = content.ownerDocument || document;
|
||||||
modal.open();
|
docRef.execCommand(cmd, false, value);
|
||||||
}
|
} catch {}
|
||||||
|
|
||||||
const modalEl = modal.getEl ? modal.getEl() : modal.el;
|
|
||||||
const closeBtn = modalEl && modalEl.querySelector ? modalEl.querySelector('.gjs-mdl-btn-close') : null;
|
|
||||||
if (closeBtn && !closeBtn.__bridgeRteBound) {
|
|
||||||
closeBtn.__bridgeRteBound = true;
|
|
||||||
closeBtn.addEventListener('click', () => {
|
|
||||||
editor.__bridgeRteAllowClose = true;
|
|
||||||
}, true);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const setupRichTextEditor = (editor) => {
|
const addButton = (labelHtml, title, cmd, valueGetter) => {
|
||||||
if (!editor || !editor.RichTextEditor) return;
|
const btn = doc.createElement('button');
|
||||||
const rte = editor.RichTextEditor;
|
btn.type = 'button';
|
||||||
const icon = (path) => `<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="${path}" fill="currentColor"/></svg>`;
|
btn.innerHTML = labelHtml;
|
||||||
const logRteBlur = (label, detail) => {
|
btn.title = title;
|
||||||
const msg = `[RTE BLUR] ${label}${detail ? ' | ' + detail : ''}`;
|
btn.style.padding = '4px 8px';
|
||||||
try { console.log(msg); } catch {}
|
btn.style.border = '1px solid #cbd5f5';
|
||||||
log('RTE BLUR', msg, '#888');
|
btn.style.borderRadius = '4px';
|
||||||
try {
|
btn.style.background = '#f8fafc';
|
||||||
if (window.parent && window.parent !== window) {
|
btn.style.cursor = 'pointer';
|
||||||
window.parent.postMessage({ source: 'bridge-core', type: 'rte-blur', detail: msg }, '*');
|
btn.addEventListener('click', () => {
|
||||||
}
|
const value = typeof valueGetter === 'function' ? valueGetter() : valueGetter;
|
||||||
} catch {}
|
if (value === null || value === undefined) return;
|
||||||
};
|
if (cmd === 'createLink' && !value) return;
|
||||||
const resolveFontOptions = () => (B.RTE_FONTS && Array.isArray(B.RTE_FONTS) && B.RTE_FONTS.length)
|
exec(cmd, value);
|
||||||
? B.RTE_FONTS
|
|
||||||
: [
|
|
||||||
{ label: 'Arial', value: 'Arial, sans-serif' },
|
|
||||||
{ label: 'Calibri', value: 'Calibri, sans-serif' },
|
|
||||||
{ label: 'Cambria', value: 'Cambria, serif' },
|
|
||||||
{ label: 'Georgia', value: 'Georgia, serif' },
|
|
||||||
{ label: 'Tahoma', value: 'Tahoma, sans-serif' },
|
|
||||||
{ label: 'Times New Roman', value: 'Times New Roman, serif' },
|
|
||||||
{ label: 'Trebuchet MS', value: 'Trebuchet MS, sans-serif' },
|
|
||||||
{ label: 'Verdana', value: 'Verdana, sans-serif' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const addAction = (name, icon, title, command, valueGetter) => {
|
|
||||||
if (rte.get && rte.get(name)) return;
|
|
||||||
rte.add(name, {
|
|
||||||
icon,
|
|
||||||
attributes: { title },
|
|
||||||
result: (rteInstance) => {
|
|
||||||
const value = typeof valueGetter === 'function' ? valueGetter() : valueGetter;
|
|
||||||
if (value === null || value === undefined) return;
|
|
||||||
if ((command === 'insertText' || command === 'fontName' || command === 'fontSize' || command === 'createLink') && !value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
execRteCommand(rteInstance, command, value);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
addAction('bridge-align-left', icon('M4 7h10v2H4zM4 11h16v2H4zM4 15h12v2H4z'), 'Linksbundig', 'justifyLeft');
|
|
||||||
addAction('bridge-align-center', icon('M5 7h14v2H5zM4 11h16v2H4zM5 15h14v2H5z'), 'Zentriert', 'justifyCenter');
|
|
||||||
addAction('bridge-align-right', icon('M10 7h10v2H10zM4 11h16v2H4zM8 15h12v2H8z'), 'Rechtsbundig', 'justifyRight');
|
|
||||||
addAction('bridge-align-justify', icon('M4 7h16v2H4zM4 11h16v2H4zM4 15h16v2H4z'), 'Blocksatz', 'justifyFull');
|
|
||||||
addAction('bridge-ul', icon('M4 7h10v2H4zM4 11h16v2H4zM4 15h10v2H4z'), 'Liste (ungeordnet)', 'insertUnorderedList');
|
|
||||||
addAction('bridge-ol', icon('M4 7h16v2H4zM4 11h16v2H4zM4 15h16v2H4z'), 'Liste (geordnet)', 'insertOrderedList');
|
|
||||||
addAction('bridge-emoji', ':-)', 'Emoticon einfuegen', 'insertText', () => prompt('Emoticon eingeben', ':)'));
|
|
||||||
addAction('bridge-font-family', 'F', 'Schriftart', 'fontName', () => {
|
|
||||||
const fonts = resolveFontOptions();
|
|
||||||
const example = fonts.map((f) => f.label).slice(0, 5).join(', ');
|
|
||||||
return prompt(`Schriftart (z.B. ${example})`, fonts[0]?.label || 'Arial');
|
|
||||||
});
|
|
||||||
addAction('bridge-font-size', 'Px', 'Schriftgroesse', 'fontSize', () => {
|
|
||||||
const raw = prompt('Schriftgroesse in px (10-32)', '14');
|
|
||||||
const val = Number(raw || 14);
|
|
||||||
if (Number.isNaN(val)) return '3';
|
|
||||||
const map = [
|
|
||||||
{ px: 10, cmd: '1' },
|
|
||||||
{ px: 12, cmd: '2' },
|
|
||||||
{ px: 14, cmd: '3' },
|
|
||||||
{ px: 16, cmd: '4' },
|
|
||||||
{ px: 18, cmd: '5' },
|
|
||||||
{ px: 24, cmd: '6' },
|
|
||||||
{ px: 32, cmd: '7' },
|
|
||||||
];
|
|
||||||
let best = map[0];
|
|
||||||
map.forEach((entry) => {
|
|
||||||
if (Math.abs(entry.px - val) < Math.abs(best.px - val)) best = entry;
|
|
||||||
});
|
|
||||||
return best.cmd;
|
|
||||||
});
|
|
||||||
if (!(rte.get && rte.get('bridge-open-richtext'))) {
|
|
||||||
rte.add('bridge-open-richtext', {
|
|
||||||
icon: '<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M4 20h4l10-10-4-4L4 16v4zm14.7-11.3c.4-.4.4-1 0-1.4l-2-2c-.4-.4-1-.4-1.4 0l-1.3 1.3 4 4 1.7-1.9z" fill="currentColor"/></svg>',
|
|
||||||
attributes: { title: 'Richtext Editor' },
|
|
||||||
result: () => {
|
|
||||||
const component = editor.getSelected && editor.getSelected();
|
|
||||||
openRichTextModal(editor, component);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (editor.Commands && editor.Commands.add) {
|
|
||||||
editor.Commands.add('bridge-open-richtext', {
|
|
||||||
run(ed, sender, opts = {}) {
|
|
||||||
if (sender && sender.set) sender.set('active', 0);
|
|
||||||
const component = opts.component || ed.getSelected();
|
|
||||||
openRichTextModal(ed, component);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
normalizeRteActionList(editor, [
|
|
||||||
'bridge-open-richtext',
|
|
||||||
'bridge-font-family',
|
|
||||||
'bridge-font-size',
|
|
||||||
'bridge-align-left',
|
|
||||||
'bridge-align-center',
|
|
||||||
'bridge-align-right',
|
|
||||||
'bridge-align-justify',
|
|
||||||
'bridge-ul',
|
|
||||||
'bridge-ol',
|
|
||||||
'bridge-emoji',
|
|
||||||
'bridge-placeholder',
|
|
||||||
]);
|
|
||||||
|
|
||||||
const isTextLike = (model) => !!(model && model.is && (model.is('text') || model.is('button') || model.is('link')));
|
|
||||||
let lastTextSelection = { id: null, ts: 0 };
|
|
||||||
let lastTextComponent = null;
|
|
||||||
editor.on('component:selected', (model) => {
|
|
||||||
ensureTextToolbarButton(editor, model);
|
|
||||||
if (!isTextLike(model)) return;
|
|
||||||
const now = Date.now();
|
|
||||||
if (lastTextSelection.id === model.cid && (now - lastTextSelection.ts) < 450) {
|
|
||||||
openRichTextModal(editor, model);
|
|
||||||
}
|
|
||||||
lastTextComponent = model;
|
|
||||||
lastTextSelection = { id: model.cid, ts: now };
|
|
||||||
});
|
|
||||||
editor.on('component:deselected', (model) => {
|
|
||||||
if (isTextLike(model)) {
|
|
||||||
lastTextComponent = model;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
editor.on('component:add', (model) => ensureTextToolbarButton(editor, model));
|
|
||||||
editor.on('component:dblclick', (model) => {
|
|
||||||
if (isTextLike(model)) {
|
|
||||||
openRichTextModal(editor, model);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
editor.on('canvas:frame:load', () => {
|
|
||||||
const body = editor.Canvas && editor.Canvas.getBody && editor.Canvas.getBody();
|
|
||||||
if (!body || body.__bridgeRteDblclickBound) return;
|
|
||||||
body.__bridgeRteDblclickBound = true;
|
|
||||||
body.addEventListener('dblclick', () => {
|
|
||||||
const selected = editor.getSelected && editor.getSelected();
|
|
||||||
if (isTextLike(selected)) {
|
|
||||||
openRichTextModal(editor, selected);
|
|
||||||
}
|
|
||||||
}, true);
|
|
||||||
const blurHandler = (evt) => {
|
|
||||||
const target = evt && evt.target;
|
|
||||||
if (!target) return;
|
|
||||||
const isEditable = !!(target.isContentEditable || (target.getAttribute && target.getAttribute('contenteditable') === 'true'));
|
|
||||||
if (!isEditable) return;
|
|
||||||
const selected = lastTextComponent || (editor.getSelected && editor.getSelected());
|
|
||||||
const selectedEl = selected && selected.view && selected.view.el;
|
|
||||||
if (selected && selectedEl && (selectedEl === target || selectedEl.contains(target))) {
|
|
||||||
const html = String(target.innerHTML || '').trim();
|
|
||||||
try {
|
|
||||||
const content = selected && selected.get ? selected.get('content') : '';
|
|
||||||
console.warn('[RTE BLUR DEBUG]', {
|
|
||||||
tag: target.tagName,
|
|
||||||
htmlLen: html.length,
|
|
||||||
contentLen: String(content || '').length,
|
|
||||||
modelType: selected && selected.get ? selected.get('type') : undefined,
|
|
||||||
modelId: selected && (selected.getId ? selected.getId() : selected.get && selected.get('id')),
|
|
||||||
});
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
let contentInfo = '';
|
|
||||||
try {
|
|
||||||
const content = selected && selected.get ? selected.get('content') : '';
|
|
||||||
contentInfo = String(content || '').trim() ? 'Content vorhanden' : 'Content leer';
|
|
||||||
} catch {}
|
|
||||||
logRteBlur('contenteditable blur', contentInfo);
|
|
||||||
};
|
|
||||||
body.addEventListener('blur', blurHandler, true);
|
|
||||||
body.addEventListener('focusout', blurHandler, true);
|
|
||||||
});
|
|
||||||
editor.on('rte:disable', (model) => {
|
|
||||||
const target = model || (editor.getSelected && editor.getSelected());
|
|
||||||
if (!isTextLike(target)) return;
|
|
||||||
const content = target && target.get ? target.get('content') : '';
|
|
||||||
const msg = String(content || '').trim() ? 'Content vorhanden' : 'Content leer';
|
|
||||||
logRteBlur('rte:disable fuer Text-Komponente', msg);
|
|
||||||
});
|
});
|
||||||
|
toolbar.appendChild(btn);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const addSelect = (options, title, onChange) => {
|
||||||
|
const select = doc.createElement('select');
|
||||||
|
select.title = title;
|
||||||
|
select.style.padding = '4px 8px';
|
||||||
|
select.style.border = '1px solid #cbd5f5';
|
||||||
|
select.style.borderRadius = '4px';
|
||||||
|
select.style.background = '#ffffff';
|
||||||
|
options.forEach((opt) => {
|
||||||
|
const optEl = doc.createElement('option');
|
||||||
|
optEl.value = opt.value;
|
||||||
|
optEl.textContent = opt.label;
|
||||||
|
select.appendChild(optEl);
|
||||||
|
});
|
||||||
|
select.addEventListener('change', () => {
|
||||||
|
const value = select.value;
|
||||||
|
if (value) onChange(value);
|
||||||
|
});
|
||||||
|
toolbar.appendChild(select);
|
||||||
|
return select;
|
||||||
|
};
|
||||||
|
|
||||||
|
const icon = (path) => `<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="${path}" fill="currentColor"/></svg>`;
|
||||||
|
addButton('<strong>B</strong>', 'Fett', 'bold');
|
||||||
|
addButton('<em>I</em>', 'Kursiv', 'italic');
|
||||||
|
addButton('<span style="text-decoration:underline">U</span>', 'Unterstrichen', 'underline');
|
||||||
|
addButton('<span style="text-decoration:line-through">S</span>', 'Durchgestrichen', 'strikethrough');
|
||||||
|
addButton(icon('M4 7h10v2H4zM4 11h16v2H4zM4 15h10v2H4z'), 'Liste (ungeordnet)', 'insertUnorderedList');
|
||||||
|
addButton(icon('M4 7h14v2H4zM4 11h14v2H4zM4 15h14v2H4z') + '<span style="font-size:10px;margin-left:4px">1.</span>', 'Liste (geordnet)', 'insertOrderedList');
|
||||||
|
addButton(icon('M4 7h10v2H4zM4 11h16v2H4zM4 15h12v2H4z'), 'Linksbundig', 'justifyLeft');
|
||||||
|
addButton(icon('M5 7h14v2H5zM4 11h16v2H4zM5 15h14v2H5z'), 'Zentriert', 'justifyCenter');
|
||||||
|
addButton(icon('M10 7h10v2H10zM4 11h16v2H4zM8 15h12v2H8z'), 'Rechtsbundig', 'justifyRight');
|
||||||
|
addButton(icon('M4 7h16v2H4zM4 11h16v2H4zM4 15h16v2H4z'), 'Blocksatz', 'justifyFull');
|
||||||
|
addButton('Link', 'Link einfuegen', 'createLink', () => prompt('Link-URL eingeben', 'https://'));
|
||||||
|
addButton('Unlink', 'Link entfernen', 'unlink');
|
||||||
|
addButton('Sub', 'Tiefgestellt', 'subscript');
|
||||||
|
addButton('Sup', 'Hochgestellt', 'superscript');
|
||||||
|
addButton('Einr.', 'Einzug', 'indent');
|
||||||
|
addButton('Aus.', 'Ausruecken', 'outdent');
|
||||||
|
addButton('Clear', 'Formatierung entfernen', 'removeFormat');
|
||||||
|
|
||||||
|
const fontOptions = (B.RTE_FONTS && Array.isArray(B.RTE_FONTS) && B.RTE_FONTS.length)
|
||||||
|
? B.RTE_FONTS
|
||||||
|
: [
|
||||||
|
{ label: 'Arial', value: 'Arial, sans-serif' },
|
||||||
|
{ label: 'Calibri', value: 'Calibri, sans-serif' },
|
||||||
|
{ label: 'Cambria', value: 'Cambria, serif' },
|
||||||
|
{ label: 'Georgia', value: 'Georgia, serif' },
|
||||||
|
{ label: 'Tahoma', value: 'Tahoma, sans-serif' },
|
||||||
|
{ label: 'Times New Roman', value: 'Times New Roman, serif' },
|
||||||
|
{ label: 'Trebuchet MS', value: 'Trebuchet MS, sans-serif' },
|
||||||
|
{ label: 'Verdana', value: 'Verdana, sans-serif' },
|
||||||
|
];
|
||||||
|
addSelect([{ label: 'Schriftart', value: '' }, ...fontOptions], 'Schriftart', (value) => exec('fontName', value));
|
||||||
|
addSelect([
|
||||||
|
{ label: 'Groesse', value: '' },
|
||||||
|
{ label: '10px', value: '1' },
|
||||||
|
{ label: '12px', value: '2' },
|
||||||
|
{ label: '14px', value: '3' },
|
||||||
|
{ label: '16px', value: '4' },
|
||||||
|
{ label: '18px', value: '5' },
|
||||||
|
{ label: '24px', value: '6' },
|
||||||
|
{ label: '32px', value: '7' },
|
||||||
|
], 'Schriftgroesse', (value) => exec('fontSize', value));
|
||||||
|
|
||||||
|
const emojiBtn = doc.createElement('button');
|
||||||
|
emojiBtn.type = 'button';
|
||||||
|
emojiBtn.textContent = ':-)';
|
||||||
|
emojiBtn.title = 'Emoticon einfuegen';
|
||||||
|
emojiBtn.style.padding = '4px 8px';
|
||||||
|
emojiBtn.style.border = '1px solid #cbd5f5';
|
||||||
|
emojiBtn.style.borderRadius = '4px';
|
||||||
|
emojiBtn.style.background = '#f8fafc';
|
||||||
|
emojiBtn.style.cursor = 'pointer';
|
||||||
|
emojiBtn.addEventListener('click', () => {
|
||||||
|
const pick = prompt('Emoticon eingeben', ':)');
|
||||||
|
if (pick) exec('insertText', pick);
|
||||||
|
});
|
||||||
|
toolbar.appendChild(emojiBtn);
|
||||||
|
|
||||||
|
container.appendChild(toolbar);
|
||||||
|
container.appendChild(content);
|
||||||
|
|
||||||
|
const actions = doc.createElement('div');
|
||||||
|
actions.style.display = 'flex';
|
||||||
|
actions.style.justifyContent = 'flex-end';
|
||||||
|
actions.style.gap = '8px';
|
||||||
|
|
||||||
|
const cancelBtn = doc.createElement('button');
|
||||||
|
cancelBtn.type = 'button';
|
||||||
|
cancelBtn.textContent = 'Abbrechen';
|
||||||
|
cancelBtn.style.padding = '6px 12px';
|
||||||
|
cancelBtn.style.border = '1px solid #cbd5f5';
|
||||||
|
cancelBtn.style.borderRadius = '4px';
|
||||||
|
cancelBtn.style.background = '#f8fafc';
|
||||||
|
cancelBtn.style.cursor = 'pointer';
|
||||||
|
cancelBtn.addEventListener('click', closeModal);
|
||||||
|
|
||||||
|
const saveBtn = doc.createElement('button');
|
||||||
|
saveBtn.type = 'button';
|
||||||
|
saveBtn.textContent = 'Speichern';
|
||||||
|
saveBtn.style.padding = '6px 12px';
|
||||||
|
saveBtn.style.border = '1px solid #0ea5e9';
|
||||||
|
saveBtn.style.borderRadius = '4px';
|
||||||
|
saveBtn.style.background = '#0ea5e9';
|
||||||
|
saveBtn.style.color = '#ffffff';
|
||||||
|
saveBtn.style.cursor = 'pointer';
|
||||||
|
saveBtn.addEventListener('click', () => {
|
||||||
|
const rawHtml = content.innerHTML || '';
|
||||||
|
const html = sanitizeInlineHtml(rawHtml, content.textContent || '');
|
||||||
|
applyContentToComponent(editor, component, html);
|
||||||
|
closeModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
actions.appendChild(cancelBtn);
|
||||||
|
actions.appendChild(saveBtn);
|
||||||
|
container.appendChild(actions);
|
||||||
|
|
||||||
|
modal.setTitle('Richtext Editor');
|
||||||
|
modal.setContent(container);
|
||||||
|
const mdl = modal.getModel && modal.getModel();
|
||||||
|
if (mdl && mdl.set) {
|
||||||
|
mdl.set('closeOnEsc', true);
|
||||||
|
mdl.set('closeOnClick', true);
|
||||||
|
}
|
||||||
|
modal.open();
|
||||||
|
};
|
||||||
|
|
||||||
|
const ensureTextToolbarButton = (component) => {
|
||||||
|
if (!isTextLike(component) || !component.get) return;
|
||||||
|
const toolbar = component.get('toolbar') || [];
|
||||||
|
if (toolbar.some((item) => item && item.command === 'bridge-open-richtext')) return;
|
||||||
|
toolbar.push({
|
||||||
|
label: '<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M4 20h4l10-10-4-4L4 16v4zm14.7-11.3c.4-.4.4-1 0-1.4l-2-2c-.4-.4-1-.4-1.4 0l-1.3 1.3 4 4 1.7-1.9z" fill="currentColor"/></svg>',
|
||||||
|
attributes: { title: 'Richtext bearbeiten' },
|
||||||
|
command: 'bridge-open-richtext',
|
||||||
|
});
|
||||||
|
component.set('toolbar', toolbar);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setupRichTextEditor = (editor) => {
|
||||||
|
if (!editor) return;
|
||||||
|
if (editor.Commands && editor.Commands.add) {
|
||||||
|
editor.Commands.add('bridge-open-richtext', {
|
||||||
|
run(ed, sender, opts = {}) {
|
||||||
|
if (sender && sender.set) sender.set('active', 0);
|
||||||
|
const component = opts.component || ed.getSelected();
|
||||||
|
openRichTextModal(ed, component);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const cfg = editor.getConfig ? editor.getConfig() : {};
|
||||||
|
cfg.richTextEditor = cfg.richTextEditor || {};
|
||||||
|
const actions = Array.isArray(cfg.richTextEditor.actions)
|
||||||
|
? cfg.richTextEditor.actions.slice()
|
||||||
|
: ['bold', 'italic', 'underline', 'strikethrough', 'link'];
|
||||||
|
if (!actions.includes('bridge-open-richtext')) actions.push('bridge-open-richtext');
|
||||||
|
cfg.richTextEditor.actions = actions;
|
||||||
|
|
||||||
|
editor.on('component:selected', (model) => ensureTextToolbarButton(model));
|
||||||
|
editor.on('component:add', (model) => ensureTextToolbarButton(model));
|
||||||
|
editor.on('component:dblclick', (model) => {
|
||||||
|
if (isTextLike(model)) openRichTextModal(editor, model);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
B.setupRichTextEditor = setupRichTextEditor;
|
B.setupRichTextEditor = setupRichTextEditor;
|
||||||
})();
|
})();
|
||||||
|
|||||||
Reference in New Issue
Block a user