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; } }); }

Das Experten-Team für diesen Testbereich

Das könnte Sie auch interessieren

Kaufberatung anfragen

Angebote anzeigen

Social Media