ckeditor alle free
This commit is contained in:
st-server
357
main.js
Normal file
357
main.js
Normal file
@@ -0,0 +1,357 @@
|
||||
/**
|
||||
* 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 <YOUR_LICENSE_KEY>.
|
||||
|
||||
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));
|
||||
Reference in New Issue
Block a user