editor => { editor.on('init', () => { editor.formatter.apply('paragraphFormat'); }); editor.on('ExecCommand', function (e) { if (e.command === 'InsertUnorderedList') { const ulElement = editor.selection.getNode()?.closest('ul'); ulElement.style.listStyleType = 'square'; } }); editor.ui.registry.addButton('dtcannedText', { icon: 'dt-canned-text-icon', tooltip: __communityT('Insert canned response'), onAction: () => { onAction({ type: 'ON_CANNED_RESPONSE_CLICK', payload: {}, }); }, }); editor.ui.registry.addButton('dtspoiler', { icon: 'dt-spoiler-icon', tooltip: __communityT('Insert Spoiler Tag'), onAction: () => { editor.execCommand('mceInsertContent', false, spoilerContent); const tempElement = editor.getDoc().getElementById('spoiler-temp-element'); if (tempElement) { const spoilerButtonSpan = tempElement .closest('div[data-spoiler-section="true"]') .querySelector('span[data-spoiler-button-chevron="true"]'); if (spoilerButtonSpan) { // Remove the content (downward triangle symbol) inside the span spoilerButtonSpan.innerHTML = ''; } } // Insert extra element to return focus here editor.focus(); editor.selection.select(tempElement); editor.selection.collapse(false); // Collapse selection to the end of the inserted element editor.dom.remove(tempElement); // Remove temporary element return; // Return after action completion }, }); if (parentEntity) { editor.ui.registry.addButton('dtQuoteBlock', { icon: 'dt-quote-icon', tooltip: __communityT('Quote'), onAction: function () { const PLACEHOLDER = { image: `Bild: Um diesen Inhalt anzuzeigen, erweitern Sie dieses Zitat.`, video: `Video: Um diesen Inhalt anzuzeigen, erweitern Sie dieses Zitat.`, table: `Tabelle: Um diesen Inhalt anzuzeigen, erweitern Sie dieses Zitat.`, spoiler: `Spoiler: Um diesen Inhalt anzuzeigen, erweitern Sie dieses Zitat.`, }; const IMAGE_REGEX = /]*src=\"([^\"]+)\"[^>]*>/g; const VIDEO_REGEX = /]*>[\s\S]*?]*src=\"([^\"]+)\"[^>]*>[\s\S]*?<\/video>/g; const TABLE_REGEX = //gi; const IFRAME_YOUTUBE_REGEX = /]*src=\"([^\"]*youtube\.com\/embed\/[^\"]*|[^\"]*youtu\.be\/[^\"]*)\"[^>]*><\/iframe>/gi; const IFRAME_VIMEO_REGEX = /]*src=\"([^\"]*vimeo\.com\/(video|channels|groups|album)?\/?[^\"]*)\"[^>]*><\/iframe>/gi; const IFRAME_SHOWPAD_REGEX = /]*src=\"([^\"]*\.showpad\.com\/share\/[^\"]*)\"[^>]*><\/iframe>/gi; const SPOILER_REGEX = /]*data-spoiler-section=\"true\"[^>]*>[\s\S]*?<\/div>/gi; const REPLACEMENTS = [ { regex: IMAGE_REGEX, placeholderKey: 'image' }, { regex: VIDEO_REGEX, placeholderKey: 'video' }, { regex: IFRAME_YOUTUBE_REGEX, placeholderKey: 'video' }, { regex: IFRAME_VIMEO_REGEX, placeholderKey: 'video' }, { regex: IFRAME_SHOWPAD_REGEX, placeholderKey: 'video' }, { regex: TABLE_REGEX, placeholderKey: 'table' }, { regex: SPOILER_REGEX, placeholderKey: 'spoiler' }, ]; const getFullQuoteAdaptedTitle = titleContainerEl => { const pTags = titleContainerEl.querySelectorAll('p'); const quoteTitleContentBlocks = Array.from(pTags).filter( p => p.closest("blockquote[data-dtbqquotedcontent='true']") === null ); const placeholder = titleContainerEl .querySelector("div[data-dtquotedplaceholderbutton='true']") ?.outerHTML.trim(); const topLevelPTags = Array.from(quoteTitleContentBlocks).filter( p => p.closest( "div[data-dtquotedcontent='true'],div[data-dtquotedcontenttitle='true'],div[data-dtquotedcontentdescription='true'], blockquote[data-dtbqquotedcontent='true'], div[data-dtquotedplaceholderbutton='true']" ) === null ); const fullQuoteAdaptedTitle = Array.from(topLevelPTags) .map(el => el.innerHTML.trim()) .filter(Boolean) .join(' '); if (!fullQuoteAdaptedTitle.trim()) { return ( placeholder || Array.from(quoteTitleContentBlocks) .map(el => el.innerHTML.trim()) .filter(Boolean) .join(' ') ); } return fullQuoteAdaptedTitle; }; const removeExtraQuotedContent = htmlString => { const parser = new DOMParser(); const doc = parser.parseFromString(htmlString, 'text/html'); const quotedDivs = doc.querySelectorAll("div[data-dtquotedcontentdescription='true']"); quotedDivs.forEach((div, index) => { div.remove(); }); return doc.body.innerHTML; }; const updateUserMentions = content => { const updatedMentionUserIdContent = content.replace( /(]*?)data-(mentioneduserid|mentionedplid)/g, '$1quote-$2' ); return updatedMentionUserIdContent; }; const wrapWithPTag = html => { const trimmed = html.trim(); return /^]/i.test(trimmed) ? trimmed : `

${trimmed}

`; }; const addInlineStyle = html => { if (html.trim().startsWith(']*)style=\"([^\"]*)\"/i, (match, beforeStyle, styleContent) => { const updatedStyle = styleContent.includes('display: inline') ? styleContent : `${styleContent} display: inline;`; return ` { let updatedHtml = html; REPLACEMENTS.forEach(({ regex, placeholderKey }) => { updatedHtml = updatedHtml.replace( regex, () => `

[${PLACEHOLDER[placeholderKey]}]

` ); }); return updatedHtml; }; const parser = new DOMParser(); const parsedDoc = parser.parseFromString(parentEntity.content, 'text/html'); const adaptedContent = removeExtraQuotedContent(updateUserMentions(parentEntity.content)); const adaptedTitle = addInlineStyle( wrapWithPTag(removeExtraQuotedContent(updateUserMentions(parentEntity.content))) ); const titleContainerEl = document.createElement('div'); titleContainerEl.innerHTML = replaceMediaWithLinks(adaptedTitle); const fullQuoteAdaptedTitle = getFullQuoteAdaptedTitle(titleContainerEl); titleContainerEl.remove(); editor.execCommand( 'mceInsertContent', false, `

${parentEntity.author.username}

${fullQuoteAdaptedTitle}

` ); }, }); } if (tinymce) { tinymce.IconManager.add('dt-icons', { icons: { bold: ` `, embed: ``, emoji: ` `, image: ` `, italic: ` `, link: ``, 'unordered-list': ` `, 'ordered-list': ` `, 'strike-through': ``, underline: ``, 'dt-quote-icon': ``, 'dt-spoiler-icon': ` `, table: ` `, 'dt-canned-text-icon': ` `, sourcecode: ` `, }, }); } editor.on('keydown', e => { if (e.key === 'Backspace' || e.key === 'Delete') { const node = editor.selection.getNode(); const removeQuoteBox = node => { if (node.getAttribute('data-dtbqquotedcontent') === 'true') { const prevSib = node.previousElementSibling; if (prevSib && prevSib.getAttribute('data-dtquotedcontent') === 'true') { prevSib.remove(); node.remove(); } } }; if (node.matches('blockquote')) { removeQuoteBox(node); } else if (node.querySelector('blockquote')) { node.querySelectorAll('blockquote').forEach(blockQuoteNode => { if (blockQuoteNode) { removeQuoteBox(blockQuoteNode); } }); } } }); const removeRestrictedStyles = content => { const restricted = [ { property: 'color' }, { property: 'background-color', allowed: ['--spr-cmt-dt-bg-color-11'] }, { property: 'font-family' }, { property: 'font-size', allowed: ['18px', '1.8rem', '15px', '1.5rem'] }, ]; const isRestricted = (prop, value) => { const rule = restricted.find(r => r.property === prop); if (!rule) return false; if (rule.allowed) { const isAllowed = rule.allowed.some(t => value.includes(t)); return !isAllowed; } return true; }; const regex = /<([a-zA-Z][\w:-]*)([^>]*?)\sstyle\s*=\s*["'](.*?)["']([^>]*)>/gi; return content.replace(regex, (match, tag, beforeStyle, styleContent, afterStyle) => { const styleArray = styleContent.split(';'); const filteredStyles = styleArray.filter(style => { const [key, value] = style.split(':').map(x => x.trim()); if (!key || !value) return false; return !isRestricted(key, value); }); if (filteredStyles.length === 0) { return `<${tag}${beforeStyle}${afterStyle}>`; } const newStyle = filteredStyles.join('; ') + ';'; return `<${tag}${beforeStyle} style="${newStyle}"${afterStyle}>`; }); }; const downgradeHeadings = htmlString => { const parser = new DOMParser(); const doc = parser.parseFromString(htmlString, 'text/html'); doc.querySelectorAll('h1').forEach(el => { const h3 = document.createElement('h3'); h3.innerHTML = el.innerHTML; el.replaceWith(h3); }); doc.querySelectorAll('h2').forEach(el => { const h4 = document.createElement('h4'); h4.innerHTML = el.innerHTML; el.replaceWith(h4); }); return doc.body.innerHTML; }; // helper to apply inline styles to blockquotes on paste const adaptBlockquotes = html => { const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); // Get all non-adapted blockquotes (deepest will appear later in NodeList) const blockquotes = Array.from( doc.querySelectorAll('blockquote:not([data-dtbqquotedcontent])') ).reverse(); // Helper to create elements with attributes & optional innerHTML const createElement = (tag, attrs = {}, innerHTML = '') => { const el = doc.createElement(tag); Object.entries(attrs).forEach(([key, value]) => el.setAttribute(key, value)); if (innerHTML) el.innerHTML = innerHTML; return el; }; blockquotes.forEach(bq => { const contentDiv = createElement( 'div', { style: 'width: 100%; display: block', 'data-dtquotedcontentdescription': 'true' }, bq.innerHTML ); const boxDiv = createElement('div', { style: 'width: 0%; align-items: flex-start; flex-grow: 1; flex-direction: row; display: flex', 'data-dtquotedcontentbox': 'true', 'data-dtoriginaldisplay': 'flex', }); boxDiv.appendChild(contentDiv); const flexWrapper = createElement('div', { style: 'display: flex; justify-content: flex-start; align-items: flex-start; position: relative', }); flexWrapper.appendChild(boxDiv); const customDiv = createElement('div', { 'data-dtquotedcontent': 'true', style: ` background-color: var(--spr-cmt-dt-bg-color-11, transparent); padding: 2.4rem; border: 1px solid var(--spr-cmt-dt-border-color-12, #dcdcdc); border-left-width: 6px; margin-bottom: 24px; `, }); customDiv.appendChild(flexWrapper); // Hide original blockquote bq.setAttribute('style', 'display: none;'); bq.setAttribute('data-dtbqquotedcontent', 'true'); bq.setAttribute('data-mce-style', 'display: none;'); bq.insertAdjacentElement('afterend', customDiv); }); return doc.body.innerHTML; }; const URL_REGEX=/^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/m;const autoLinkHtml = (html) => { const fragments = html.split(/(\s+|<|>)/); return fragments .map(fragment => { if (URL_REGEX.test(fragment.trim())) { return `${fragment}`; } return fragment; }) .join(""); }; const removeVideoSection = htmlString => { const parser = new DOMParser(); const doc = parser.parseFromString(htmlString, 'text/html'); const videoSectionsToRemove = doc.querySelectorAll('span[data-video-section="true"]'); videoSectionsToRemove.forEach(videoSection => { videoSection.remove(); }); const videos = doc.querySelectorAll('video[data-video-content="true"]'); videos.forEach(video => { video.removeAttribute('data-video-content'); }); return doc.body.innerHTML; }; const convertPlainTextToHTML = plainTextString => '

' + plainTextString .replace(/ +/g, match => ' ' + ' '.repeat(match.length - 1)) .replace(/\n+/g, match => '

'.repeat(match.length - 1) + '

'); ('

'); editor.on('paste', e => { e.preventDefault(); const clipboardData = e.clipboardData || window.clipboardData; if (clipboardData.getData('text/html')) { const pastedHtml = clipboardData.getData('text/html'); const htmlAdapters = [ autoLinkHtml, removeVideoSection, downgradeHeadings, removeRestrictedStyles, adaptBlockquotes, ]; if (pastedHtml) { const adaptedHtml = htmlAdapters.reduce((acc, fn) => fn(acc), pastedHtml); editor.insertContent(adaptedHtml); } } else { const plainTextString = clipboardData.getData('text/plain'); if (plainTextString) { const htmlString = convertPlainTextToHTML(plainTextString); editor.insertContent(htmlString); } } }); let isCodePluginActive = false, tableInsertionInProgress = false; editor.on('ExecCommand', e => { if (e.command === 'mceCodeEditor') { isCodePluginActive = true; } }); editor.on('BeforeExecCommand', function (e) { if (e.command === 'mceInsertTable') { tableInsertionInProgress = true; } }); editor.on('BeforeSetContent', e => { if (tableInsertionInProgress) { let tempDiv = document.createElement('div'); tempDiv.innerHTML = e.content; let table = tempDiv.querySelector('table'); if (table) { let tbody = table.querySelector('tbody'); let firstRow = tbody?.querySelector('tr'); if (firstRow) { let thead = document.createElement('thead'); let newHeaderRow = document.createElement('tr'); firstRow.querySelectorAll('td').forEach(td => { let th = document.createElement('th'); th.innerHTML = td.innerHTML; newHeaderRow.appendChild(th); }); thead.appendChild(newHeaderRow); table.insertBefore(thead, tbody); firstRow.remove(); } tempDiv.style.overflow = 'auto'; e.content = tempDiv.innerHTML; tableInsertionInProgress = false; } } if (isCodePluginActive) { e.content = removeRestrictedStyles(e.content); isCodePluginActive = false; } }); }

Mobilfunkvertrag beim Konto von magneta TV hinzufügen

Festgefahren beim Glasfaseranschluss

Neue Apple-Geräte 2026: Stellt uns hier eure Fragen!

Voicemail App Telekom Synchronisationsfehler auf Smartphone

Aktivierte Option "Netflix Standard by Telekom" nicht manuell kündbar

Diese Rufnummer ist uns nicht bekannt

Das könnte Sie auch interessieren

Kaufberatung anfragen

Angebote anzeigen

Social Media