From cf27c2cb79bdc481cfafd6ab445eda217fb9a0a2 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Sat, 20 Mar 2021 22:25:45 +0100 Subject: [PATCH] ckeditor5, it works ! compiled by webpack encore, and display on textarea --- .../public/modules/ckeditor5/ckeditor5.css | 333 ------------------ .../modules/ckeditor5/ckeditor5/index.js | 29 -- .../public/modules/ckeditor5/index.js | 88 ++++- .../ChillMainBundle/chill.webpack.config.js | 61 +++- 4 files changed, 117 insertions(+), 394 deletions(-) delete mode 100644 src/Bundle/ChillMainBundle/Resources/public/modules/ckeditor5/ckeditor5.css delete mode 100644 src/Bundle/ChillMainBundle/Resources/public/modules/ckeditor5/ckeditor5/index.js diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/ckeditor5/ckeditor5.css b/src/Bundle/ChillMainBundle/Resources/public/modules/ckeditor5/ckeditor5.css deleted file mode 100644 index 0c10efc60..000000000 --- a/src/Bundle/ChillMainBundle/Resources/public/modules/ckeditor5/ckeditor5.css +++ /dev/null @@ -1,333 +0,0 @@ -/* - * CKEditor 5 (v25.0.0) content styles. - * Generated on Wed, 27 Jan 2021 08:22:01 GMT. - * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html - */ - -:root { - --ck-color-mention-background: hsla(341, 100%, 30%, 0.1); - --ck-color-mention-text: hsl(341, 100%, 30%); - --ck-highlight-marker-blue: hsl(201, 97%, 72%); - --ck-highlight-marker-green: hsl(120, 93%, 68%); - --ck-highlight-marker-pink: hsl(345, 96%, 73%); - --ck-highlight-marker-yellow: hsl(60, 97%, 73%); - --ck-highlight-pen-green: hsl(112, 100%, 27%); - --ck-highlight-pen-red: hsl(0, 85%, 49%); - --ck-image-style-spacing: 1.5em; - --ck-todo-list-checkmark-size: 16px; -} - -/* ckeditor5-image/theme/imagestyle.css */ -.ck-content .image-style-side { - float: right; - margin-left: var(--ck-image-style-spacing); - max-width: 50%; -} -/* ckeditor5-image/theme/imagestyle.css */ -.ck-content .image-style-align-left { - float: left; - margin-right: var(--ck-image-style-spacing); -} -/* ckeditor5-image/theme/imagestyle.css */ -.ck-content .image-style-align-center { - margin-left: auto; - margin-right: auto; -} -/* ckeditor5-image/theme/imagestyle.css */ -.ck-content .image-style-align-right { - float: right; - margin-left: var(--ck-image-style-spacing); -} -/* ckeditor5-image/theme/imageresize.css */ -.ck-content .image.image_resized { - max-width: 100%; - display: block; - box-sizing: border-box; -} -/* ckeditor5-image/theme/imageresize.css */ -.ck-content .image.image_resized img { - width: 100%; -} -/* ckeditor5-image/theme/imageresize.css */ -.ck-content .image.image_resized > figcaption { - display: block; -} -/* ckeditor5-image/theme/imagecaption.css */ -.ck-content .image > figcaption { - display: table-caption; - caption-side: bottom; - word-break: break-word; - color: hsl(0, 0%, 20%); - background-color: hsl(0, 0%, 97%); - padding: .6em; - font-size: .75em; - outline-offset: -1px; -} -/* ckeditor5-image/theme/image.css */ -.ck-content .image { - display: table; - clear: both; - text-align: center; - margin: 1em auto; -} -/* ckeditor5-image/theme/image.css */ -.ck-content .image img { - display: block; - margin: 0 auto; - max-width: 100%; - min-width: 50px; -} -/* ckeditor5-highlight/theme/highlight.css */ -.ck-content .marker-yellow { - background-color: var(--ck-highlight-marker-yellow); -} -/* ckeditor5-highlight/theme/highlight.css */ -.ck-content .marker-green { - background-color: var(--ck-highlight-marker-green); -} -/* ckeditor5-highlight/theme/highlight.css */ -.ck-content .marker-pink { - background-color: var(--ck-highlight-marker-pink); -} -/* ckeditor5-highlight/theme/highlight.css */ -.ck-content .marker-blue { - background-color: var(--ck-highlight-marker-blue); -} -/* ckeditor5-highlight/theme/highlight.css */ -.ck-content .pen-red { - color: var(--ck-highlight-pen-red); - background-color: transparent; -} -/* ckeditor5-highlight/theme/highlight.css */ -.ck-content .pen-green { - color: var(--ck-highlight-pen-green); - background-color: transparent; -} -/* ckeditor5-font/theme/fontsize.css */ -.ck-content .text-tiny { - font-size: .7em; -} -/* ckeditor5-font/theme/fontsize.css */ -.ck-content .text-small { - font-size: .85em; -} -/* ckeditor5-font/theme/fontsize.css */ -.ck-content .text-big { - font-size: 1.4em; -} -/* ckeditor5-font/theme/fontsize.css */ -.ck-content .text-huge { - font-size: 1.8em; -} -/* ckeditor5-block-quote/theme/blockquote.css */ -.ck-content blockquote { - overflow: hidden; - padding-right: 1.5em; - padding-left: 1.5em; - margin-left: 0; - margin-right: 0; - font-style: italic; - border-left: solid 5px hsl(0, 0%, 80%); -} -/* ckeditor5-block-quote/theme/blockquote.css */ -.ck-content[dir="rtl"] blockquote { - border-left: 0; - border-right: solid 5px hsl(0, 0%, 80%); -} -/* ckeditor5-basic-styles/theme/code.css */ -.ck-content code { - background-color: hsla(0, 0%, 78%, 0.3); - padding: .15em; - border-radius: 2px; -} -/* ckeditor5-table/theme/table.css */ -.ck-content .table { - margin: 1em auto; - display: table; -} -/* ckeditor5-table/theme/table.css */ -.ck-content .table table { - border-collapse: collapse; - border-spacing: 0; - width: 100%; - height: 100%; - border: 1px double hsl(0, 0%, 70%); -} -/* ckeditor5-table/theme/table.css */ -.ck-content .table table td, -.ck-content .table table th { - min-width: 2em; - padding: .4em; - border: 1px solid hsl(0, 0%, 75%); -} -/* ckeditor5-table/theme/table.css */ -.ck-content .table table th { - font-weight: bold; - background: hsla(0, 0%, 0%, 5%); -} -/* ckeditor5-table/theme/table.css */ -.ck-content[dir="rtl"] .table th { - text-align: right; -} -/* ckeditor5-table/theme/table.css */ -.ck-content[dir="ltr"] .table th { - text-align: left; -} -/* ckeditor5-page-break/theme/pagebreak.css */ -.ck-content .page-break { - position: relative; - clear: both; - padding: 5px 0; - display: flex; - align-items: center; - justify-content: center; -} -/* ckeditor5-page-break/theme/pagebreak.css */ -.ck-content .page-break::after { - content: ''; - position: absolute; - border-bottom: 2px dashed hsl(0, 0%, 77%); - width: 100%; -} -/* ckeditor5-page-break/theme/pagebreak.css */ -.ck-content .page-break__label { - position: relative; - z-index: 1; - padding: .3em .6em; - display: block; - text-transform: uppercase; - border: 1px solid hsl(0, 0%, 77%); - border-radius: 2px; - font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif; - font-size: 0.75em; - font-weight: bold; - color: hsl(0, 0%, 20%); - background: hsl(0, 0%, 100%); - box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -/* ckeditor5-list/theme/todolist.css */ -.ck-content .todo-list { - list-style: none; -} -/* ckeditor5-list/theme/todolist.css */ -.ck-content .todo-list li { - margin-bottom: 5px; -} -/* ckeditor5-list/theme/todolist.css */ -.ck-content .todo-list li .todo-list { - margin-top: 5px; -} -/* ckeditor5-list/theme/todolist.css */ -.ck-content .todo-list .todo-list__label > input { - -webkit-appearance: none; - display: inline-block; - position: relative; - width: var(--ck-todo-list-checkmark-size); - height: var(--ck-todo-list-checkmark-size); - vertical-align: middle; - border: 0; - left: -25px; - margin-right: -15px; - right: 0; - margin-left: 0; -} -/* ckeditor5-list/theme/todolist.css */ -.ck-content .todo-list .todo-list__label > input::before { - display: block; - position: absolute; - box-sizing: border-box; - content: ''; - width: 100%; - height: 100%; - border: 1px solid hsl(0, 0%, 20%); - border-radius: 2px; - transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border; -} -/* ckeditor5-list/theme/todolist.css */ -.ck-content .todo-list .todo-list__label > input::after { - display: block; - position: absolute; - box-sizing: content-box; - pointer-events: none; - content: ''; - left: calc( var(--ck-todo-list-checkmark-size) / 3 ); - top: calc( var(--ck-todo-list-checkmark-size) / 5.3 ); - width: calc( var(--ck-todo-list-checkmark-size) / 5.3 ); - height: calc( var(--ck-todo-list-checkmark-size) / 2.6 ); - border-style: solid; - border-color: transparent; - border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0; - transform: rotate(45deg); -} -/* ckeditor5-list/theme/todolist.css */ -.ck-content .todo-list .todo-list__label > input[checked]::before { - background: hsl(126, 64%, 41%); - border-color: hsl(126, 64%, 41%); -} -/* ckeditor5-list/theme/todolist.css */ -.ck-content .todo-list .todo-list__label > input[checked]::after { - border-color: hsl(0, 0%, 100%); -} -/* ckeditor5-list/theme/todolist.css */ -.ck-content .todo-list .todo-list__label .todo-list__label__description { - vertical-align: middle; -} -/* ckeditor5-media-embed/theme/mediaembed.css */ -.ck-content .media { - clear: both; - margin: 1em 0; - display: block; - min-width: 15em; -} -/* ckeditor5-html-embed/theme/htmlembed.css */ -.ck-content .raw-html-embed { - margin: 1em auto; - min-width: 15em; - font-style: normal; -} -/* ckeditor5-horizontal-line/theme/horizontalline.css */ -.ck-content hr { - margin: 15px 0; - height: 4px; - background: hsl(0, 0%, 87%); - border: 0; -} -/* ckeditor5-code-block/theme/codeblock.css */ -.ck-content pre { - padding: 1em; - color: hsl(0, 0%, 20.8%); - background: hsla(0, 0%, 78%, 0.3); - border: 1px solid hsl(0, 0%, 77%); - border-radius: 2px; - text-align: left; - direction: ltr; - tab-size: 4; - white-space: pre-wrap; - font-style: normal; - min-width: 200px; -} -/* ckeditor5-code-block/theme/codeblock.css */ -.ck-content pre code { - background: unset; - padding: 0; - border-radius: 0; -} -/* ckeditor5-mention/theme/mention.css */ -.ck-content .mention { - background: var(--ck-color-mention-background); - color: var(--ck-color-mention-text); -} -@media print { - /* ckeditor5-page-break/theme/pagebreak.css */ - .ck-content .page-break { - padding: 0; - } - /* ckeditor5-page-break/theme/pagebreak.css */ - .ck-content .page-break::after { - display: none; - } -} \ No newline at end of file diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/ckeditor5/ckeditor5/index.js b/src/Bundle/ChillMainBundle/Resources/public/modules/ckeditor5/ckeditor5/index.js deleted file mode 100644 index fb4fbc110..000000000 --- a/src/Bundle/ChillMainBundle/Resources/public/modules/ckeditor5/ckeditor5/index.js +++ /dev/null @@ -1,29 +0,0 @@ -//require('@ckeditor/ckeditor5-editor-classic/theme/classiceditor.css'); - -import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; -import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; -import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; -import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; -import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown'; -//require('./ckeditor5.css'); - -let Fields = document.querySelectorAll('textarea'); - -Fields.forEach(function(field) { - ClassicEditor - .create( field, { - plugins: [ - Markdown, - Essentials, - Bold, - Italic, - ], - } ) - .then( editor => { - console.log( editor ); - }) - .catch( error => { - console.error( error ); - }) - ; -}) diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/ckeditor5/index.js b/src/Bundle/ChillMainBundle/Resources/public/modules/ckeditor5/index.js index fb4fbc110..1b4f71868 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/modules/ckeditor5/index.js +++ b/src/Bundle/ChillMainBundle/Resources/public/modules/ckeditor5/index.js @@ -1,29 +1,81 @@ -//require('@ckeditor/ckeditor5-editor-classic/theme/classiceditor.css'); +import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; +import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'; +import MarkdownPlugin from '@ckeditor/ckeditor5-markdown-gfm/src/markdown'; +import UploadAdapterPlugin from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'; +import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat'; +import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold'; +import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic'; +import BlockQuotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote'; +import EasyImagePlugin from '@ckeditor/ckeditor5-easy-image/src/easyimage'; +import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading'; +import ImagePlugin from '@ckeditor/ckeditor5-image/src/image'; +import ImageCaptionPlugin from '@ckeditor/ckeditor5-image/src/imagecaption'; +import ImageStylePlugin from '@ckeditor/ckeditor5-image/src/imagestyle'; +import ImageToolbarPlugin from '@ckeditor/ckeditor5-image/src/imagetoolbar'; +import ImageUploadPlugin from '@ckeditor/ckeditor5-image/src/imageupload'; +import LinkPlugin from '@ckeditor/ckeditor5-link/src/link'; +import ListPlugin from '@ckeditor/ckeditor5-list/src/list'; +import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'; -import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; -import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; -import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; -import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; -import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown'; -//require('./ckeditor5.css'); +export default class ClassicEditor extends ClassicEditorBase {} + +ClassicEditor.builtinPlugins = [ + EssentialsPlugin, + MarkdownPlugin, + UploadAdapterPlugin, + AutoformatPlugin, + BoldPlugin, + ItalicPlugin, + BlockQuotePlugin, + EasyImagePlugin, + HeadingPlugin, + ImagePlugin, + ImageCaptionPlugin, + ImageStylePlugin, + ImageToolbarPlugin, + ImageUploadPlugin, + LinkPlugin, + ListPlugin, + ParagraphPlugin +]; + +ClassicEditor.defaultConfig = { + toolbar: { + items: [ + 'heading', + '|', + 'bold', + 'italic', + 'link', + 'bulletedList', + 'numberedList', + 'uploadImage', + 'blockQuote', + 'undo', + 'redo' + ] + }, + image: { + toolbar: [ + 'imageStyle:full', + 'imageStyle:side', + '|', + 'imageTextAlternative' + ] + }, + language: 'fr' +}; let Fields = document.querySelectorAll('textarea'); Fields.forEach(function(field) { ClassicEditor - .create( field, { - plugins: [ - Markdown, - Essentials, - Bold, - Italic, - ], - } ) + .create( field ) .then( editor => { - console.log( editor ); + console.log( 'Editor was initialized', editor ); }) .catch( error => { - console.error( error ); + console.error( error.stack ); }) ; -}) +}) \ No newline at end of file diff --git a/src/Bundle/ChillMainBundle/chill.webpack.config.js b/src/Bundle/ChillMainBundle/chill.webpack.config.js index ec268b99d..46a853ade 100644 --- a/src/Bundle/ChillMainBundle/chill.webpack.config.js +++ b/src/Bundle/ChillMainBundle/chill.webpack.config.js @@ -1,28 +1,61 @@ -// this file loads all assets from the Chill main bundle +const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' ); +const { styles } = require( '@ckeditor/ckeditor5-dev-utils' ); + +// Compile and loads all assets from the Chill Main Bundle module.exports = function(encore, entries) { // Push into "chill" entrypoint entries.push(__dirname + '/Resources/public/main.js'); - encore // Add new separate entrypoints + encore .addEntry('login', __dirname + '/Resources/public/modules/login_page/index.js') .addEntry('tabs', __dirname + '/Resources/public/modules/tabs/index.js') // chill2 new assets .addEntry('ckeditor5', __dirname + '/Resources/public/modules/ckeditor5/index.js') - .addEntry('bootstrap', __dirname + '/Resources/public/modules/bootstrap/index.js') .addEntry('forkawesome', __dirname + '/Resources/public/modules/forkawesome/index.js') - - // Alias are used by Webpack when trying to resolve modules - // cfr. https://github.com/symfony/webpack-encore/pull/217/files#diff-e727e4bdf3657fd1d798edcd6b099d6e092f8573cba266154583a746bba0f346 - .addAliases({ - - // sass resolve - ChillMainSass: __dirname + '/Resources/public/sass', - - // typescript resolve - ShowHide: __dirname + '/Resources/public/modules/show_hide' - }) + //.addEntry('bootstrap', __dirname + '/Resources/public/modules/bootstrap/index.js') ; + + // Aliases are used when webpack is trying to resolve modules (sass, typescript) + encore.addAliases({ + ChillMainSass: __dirname + '/Resources/public/sass', + ShowHide: __dirname + '/Resources/public/modules/show_hide' + }); + + //// Build CKEditor5 + encore + .addPlugin( new CKEditorWebpackPlugin( { + language: 'fr', + addMainLanguageTranslationsToAllAssets: true, + verbose: true, + strict: true, + //additionalLanguages: ['en', 'nl', 'es'], + } ) ) + + // Use raw-loader for CKEditor 5 SVG files. + .addRule( { + test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/, + loader: 'raw-loader' + } ) + + // Configure other image loaders to exclude CKEditor 5 SVG files. + .configureLoaderRule( 'images', loader => { + loader.exclude = /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/; + } ) + + // Configure PostCSS loader. + .addLoader({ + test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/, + loader: 'postcss-loader', + options: styles.getPostCssConfig( { + themeImporter: { + themePath: require.resolve('@ckeditor/ckeditor5-theme-lark') + }, + minify: true + } ) + } ) + ; + }; \ No newline at end of file