/** * This configuration was generated using the CKEditor 5 Builder. You can modify it anytime using this link: * https://ckeditor.com/ckeditor-5/builder/#installation/NoNgNARATAdAnDADBSBWKUDsBGTjMAsiU6iAHBtgQMzZlVn2EjWYlTkhkiLKQAmAUxSIwwbGAkTRo7AF1Ig6kX4BjKBDlA== */ import { ClassicEditor, Autosave, Essentials, Paragraph, Autoformat, TextTransformation, LinkImage, Link, ImageBlock, ImageToolbar, BlockQuote, Bold, CloudServices, ImageUpload, ImageInsertViaUrl, AutoImage, Table, TableToolbar, Emoji, Mention, Heading, ImageTextAlternative, ImageCaption, ImageStyle, Indent, IndentBlock, ImageInline, Italic, List, MediaEmbed, TableCaption, TodoList, Underline, Fullscreen, Markdown, PasteFromMarkdownExperimental, Strikethrough, Code, Subscript, Superscript, FontBackgroundColor, FontColor, FontFamily, FontSize, Highlight, AutoLink, HorizontalLine, CodeBlock, Alignment, Style, GeneralHtmlSupport, PlainTableOutput, ShowBlocks, SourceEditing, HtmlComment, TextPartLanguage, Title, BalloonToolbar, BlockToolbar } from 'ckeditor5'; import translations from 'ckeditor5/translations/de.js'; /** * Create a free account with a trial: https://portal.ckeditor.com/checkout?plan=free */ const LICENSE_KEY = 'GPL'; // or . const editorConfig = { toolbar: { items: [ 'undo', 'redo', '|', 'sourceEditing', 'showBlocks', 'textPartLanguage', 'fullscreen', '|', 'heading', 'style', '|', 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|', 'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'code', '|', 'emoji', 'horizontalLine', 'link', 'mediaEmbed', 'insertTable', 'highlight', 'blockQuote', 'codeBlock', '|', 'alignment', '|', 'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent' ], shouldNotGroupWhenFull: true }, plugins: [ Alignment, Autoformat, AutoImage, AutoLink, Autosave, BalloonToolbar, BlockQuote, BlockToolbar, Bold, CloudServices, Code, CodeBlock, Emoji, Essentials, FontBackgroundColor, FontColor, FontFamily, FontSize, Fullscreen, GeneralHtmlSupport, Heading, Highlight, HorizontalLine, HtmlComment, ImageBlock, ImageCaption, ImageInline, ImageInsertViaUrl, ImageStyle, ImageTextAlternative, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, Link, LinkImage, List, Markdown, MediaEmbed, Mention, Paragraph, PasteFromMarkdownExperimental, PlainTableOutput, ShowBlocks, SourceEditing, Strikethrough, Style, Subscript, Superscript, Table, TableCaption, TableToolbar, TextPartLanguage, TextTransformation, Title, TodoList, Underline ], balloonToolbar: ['bold', 'italic', '|', 'link', '|', 'bulletedList', 'numberedList'], blockToolbar: [ 'fontSize', 'fontColor', 'fontBackgroundColor', '|', 'bold', 'italic', '|', 'link', 'insertTable', '|', 'bulletedList', 'numberedList', 'outdent', 'indent' ], fontFamily: { supportAllValues: true }, fontSize: { options: [10, 12, 14, 'default', 18, 20, 22], supportAllValues: true }, fullscreen: { onEnterCallback: container => container.classList.add( 'editor-container', 'editor-container_classic-editor', 'editor-container_include-style', 'editor-container_include-block-toolbar', 'editor-container_include-fullscreen', 'main-container' ) }, heading: { options: [ { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' }, { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' }, { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }, { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }, { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' }, { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' }, { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' } ] }, htmlSupport: { allow: [ { name: /^.*$/, styles: true, attributes: true, classes: true } ] }, image: { toolbar: ['toggleImageCaption', 'imageTextAlternative', '|', 'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText'] }, initialData: '', language: 'de', licenseKey: LICENSE_KEY, link: { addTargetToExternalLinks: true, defaultProtocol: 'https://', decorators: { toggleDownloadable: { mode: 'manual', label: 'Downloadable', attributes: { download: 'file' } } } }, mention: { feeds: [ { marker: '@', feed: [ /* See: https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html */ ] } ] }, placeholder: 'Type or paste your content here!', style: { definitions: [ { name: 'Article category', element: 'h3', classes: ['category'] }, { name: 'Title', element: 'h2', classes: ['document-title'] }, { name: 'Subtitle', element: 'h3', classes: ['document-subtitle'] }, { name: 'Info box', element: 'p', classes: ['info-box'] }, { name: 'CTA Link Primary', element: 'a', classes: ['button', 'button--green'] }, { name: 'CTA Link Secondary', element: 'a', classes: ['button', 'button--black'] }, { name: 'Marker', element: 'span', classes: ['marker'] }, { name: 'Spoiler', element: 'span', classes: ['spoiler'] } ] }, table: { contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'] }, translations: [translations] }; window.ckEditorReady = ClassicEditor .create(document.querySelector('#editor'), editorConfig) .then(editor => { window.editor = editor; // optional global verfügbar return editor; // wichtig: Promise gibt editor zurück }) .catch(err => console.error('CKEditor konnte nicht geladen werden:', err));