ckeditor.js 1.94 KB
import { AutoImage, ClassicEditor, Essentials, Paragraph, Bold, Italic, Underline, Strikethrough, BlockQuote, Heading, Link, Image, ImageToolbar, ImageCaption, ImageStyle, ImageResize, Table, TableToolbar, MediaEmbed, ImageUpload, EasyImage, List, Alignment, Font, Highlight, HorizontalLine, Indent, IndentBlock, PasteFromOffice, Code, CodeBlock } from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

if (null !== document.querySelector( '.editor' )) {
    ClassicEditor
    .create(document.querySelector('.editor'), {
        plugins: [
            Essentials, Paragraph, Bold, Italic, Underline, Strikethrough, BlockQuote,
            Heading, Link, Image, ImageToolbar, ImageCaption, ImageStyle, ImageResize,
            Table, TableToolbar, MediaEmbed, List, Alignment, Font, Highlight,
            HorizontalLine, Indent, IndentBlock, PasteFromOffice, Code, CodeBlock, AutoImage
        ],
        toolbar: [
            'heading', '|', 'bold', 'italic', 'underline', 'strikethrough', 'blockquote', '|',
            'link', 'bulletedList', 'numberedList', 'alignment', '|',
            'uploadImage',
            'insertImageFromUrl',
            'insertImageFromServer','|', 'insertTable',
            'mediaEmbed', 'undo', 'redo', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
            'horizontalLine', 'code', 'codeBlock', 'indent', 'outdent', 'alignment:left', 'alignment:center',
            'alignment:right', 'alignment:justify', 'image'
        ],
        image: {
            toolbar: [
                'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|',
                'toggleImageCaption', 'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
        },
    })
    .then(editor => {
        console.log('Editor was initialized', editor);
    })
    .catch(error => {
        console.error('There was a problem initializing the editor.', error);
    });

}