From 17c7923f0da96103e0673c26ddc21a431282a6a5 Mon Sep 17 00:00:00 2001 From: godai78 Date: Fri, 27 Jan 2023 09:43:17 +0100 Subject: [PATCH 1/3] Adding toolbar items. --- .../components/CKEditorInput/Configurator.js | 37 ++++++++++++++++--- 1 file changed, 32 insertions(+), 5 deletions(-) diff --git a/admin/src/components/CKEditorInput/Configurator.js b/admin/src/components/CKEditorInput/Configurator.js index 31e2670..8d20600 100644 --- a/admin/src/components/CKEditorInput/Configurator.js +++ b/admin/src/components/CKEditorInput/Configurator.js @@ -17,7 +17,9 @@ import ckeditor5IndentDll from "@ckeditor/ckeditor5-indent/build/indent.js"; import ckeditor5LinkDll from "@ckeditor/ckeditor5-link/build/link.js"; import ckeditor5ListDll from "@ckeditor/ckeditor5-list/build/list.js"; import ckeditor5PasteFromOfficeDll from "@ckeditor/ckeditor5-paste-from-office/build/paste-from-office.js"; +import ckeditor5FindAndReplaceDll from "@ckeditor/ckeditor5-find-and-replace/build/find-and-replace.js"; import ckeditor5RemoveFormatDll from "@ckeditor/ckeditor5-remove-format/build/remove-format.js"; +import ckeditor5SpecialCharactersDll from "@ckeditor/ckeditor5-special-characters/build/special-characters.js"; import ckeditor5TableDll from "@ckeditor/ckeditor5-table/build/table.js"; import ckeditor5WordCountDll from "@ckeditor/ckeditor5-word-count/build/word-count.js"; import ckeditor5MaximumLengthDll from "@reinmar/ckeditor5-maximum-length/build/maximum-length.js"; @@ -164,6 +166,11 @@ const CKEDITOR_BASE_CONFIG_FOR_PRESETS = { window.CKEditor5.autoformat.Autoformat, window.CKEditor5.basicStyles.Bold, window.CKEditor5.basicStyles.Italic, + window.CKEditor5.basicStyles.Underline, + window.CKEditor5.basicStyles.Strikethrough, + window.CKEditor5.basicStyles.Code, + window.CKEditor5.basicStyles.Subscript, + window.CKEditor5.basicStyles.Superscript, window.CKEditor5.blockQuote.BlockQuote, window.CKEditor5.codeBlock.CodeBlock, window.CKEditor5.essentials.Essentials, @@ -171,6 +178,7 @@ const CKEDITOR_BASE_CONFIG_FOR_PRESETS = { window.CKEditor5.font.FontFamily, window.CKEditor5.font.FontColor, window.CKEditor5.font.FontBackgroundColor, + window.CKEditor5.findAndReplace.FindAndReplace, window.CKEditor5.heading.Heading, window.CKEditor5.horizontalLine.HorizontalLine, window.CKEditor5.htmlEmbed.HtmlEmbed, @@ -185,10 +193,14 @@ const CKEDITOR_BASE_CONFIG_FOR_PRESETS = { window.CKEditor5.link.Link, window.CKEditor5.link.LinkImage, window.CKEditor5.list.List, + window.CKEditor5.list.ListProperties, + window.CKEditor5.list.TodoList, window.CKEditor5.mediaEmbed.MediaEmbed, window.CKEditor5.paragraph.Paragraph, window.CKEditor5.pasteFromOffice.PasteFromOffice, window.CKEditor5.removeFormat.RemoveFormat, + window.CKEditor5.specialCharacters.SpecialCharacters, + window.CKEditor5.specialCharacters.SpecialCharactersEssentials, window.CKEditor5.table.Table, window.CKEditor5.table.TableToolbar, window.CKEditor5.table.TableProperties, @@ -199,18 +211,26 @@ const CKEDITOR_BASE_CONFIG_FOR_PRESETS = { StrapiMediaLib ], toolbar: [ + 'undo', 'redo', + '|', 'heading', '|', - 'bold', 'italic', 'link', 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'removeFormat', + 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|', - 'bulletedList', 'numberedList', + 'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'code', 'removeFormat', '|', - 'outdent', 'indent', 'alignment', + 'link', 'strapiMediaLib', 'mediaEmbed', 'insertTable', '|', - 'strapiMediaLib', 'mediaEmbed', 'blockQuote', 'insertTable', 'horizontalLine', 'codeBlock', 'htmlEmbed', + 'alignment', '|', - 'undo', 'redo' + 'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent', + '|', + 'horizontalLine', 'blockQuote', 'codeBlock', 'htmlEmbed', 'specialCharacters', + '|', + + 'findAndReplace' ], + shouldNotGroupWhenFull: true, heading: { options: [ { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' }, @@ -220,6 +240,13 @@ const CKEDITOR_BASE_CONFIG_FOR_PRESETS = { { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' }, ] }, + list: { + properties: { + styles: true, + startIndex: true, + reversed: true + } + }, image: { resizeUnit: "%", resizeOptions: [ { From c3f0c48d5edc69b26e7d05433e11c6083d15239a Mon Sep 17 00:00:00 2001 From: godai78 Date: Fri, 27 Jan 2023 11:30:08 +0100 Subject: [PATCH 2/3] Docs: UI toolbar tinkering. --- .../components/CKEditorInput/Configurator.js | 43 ++++++++++++------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/admin/src/components/CKEditorInput/Configurator.js b/admin/src/components/CKEditorInput/Configurator.js index 8d20600..87df236 100644 --- a/admin/src/components/CKEditorInput/Configurator.js +++ b/admin/src/components/CKEditorInput/Configurator.js @@ -210,27 +210,40 @@ const CKEDITOR_BASE_CONFIG_FOR_PRESETS = { window.CKEditor5.wordCount.WordCount, StrapiMediaLib ], - toolbar: [ - 'undo', 'redo', - '|', + toolbar: { + items: [ 'heading', - '|', - 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', - '|', - 'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'code', 'removeFormat', + { + label: 'Fonts', + withText: true, + items: [ 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor' ] + }, + 'bold', 'italic', 'underline', + { + label: 'More basic styles', + icon: 'threeVerticalDots', + items: [ 'strikethrough', 'superscript', 'subscript', 'code', 'removeFormat' ] + }, '|', 'link', 'strapiMediaLib', 'mediaEmbed', 'insertTable', + { + label: 'More media', + icon: 'threeVerticalDots', + items: [ 'horizontalLine', 'blockQuote', 'codeBlock', 'htmlEmbed', 'specialCharacters' ] + }, '|', 'alignment', + { + label: 'Lists', + withText: true, + items: [ 'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent' ] + }, + 'findAndReplace', '|', - 'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent', - '|', - 'horizontalLine', 'blockQuote', 'codeBlock', 'htmlEmbed', 'specialCharacters', - '|', - - 'findAndReplace' - ], - shouldNotGroupWhenFull: true, + 'undo', 'redo' + ], + shouldNotGroupWhenFull: true + }, heading: { options: [ { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' }, From 813c7a452c1e733a53539d385fd882b9ea004706 Mon Sep 17 00:00:00 2001 From: godai78 Date: Fri, 27 Jan 2023 12:25:22 +0100 Subject: [PATCH 3/3] Adding highlight. --- admin/src/components/CKEditorInput/Configurator.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/admin/src/components/CKEditorInput/Configurator.js b/admin/src/components/CKEditorInput/Configurator.js index 87df236..16143ba 100644 --- a/admin/src/components/CKEditorInput/Configurator.js +++ b/admin/src/components/CKEditorInput/Configurator.js @@ -8,6 +8,7 @@ import ckeditor5CodeBlockDll from "@ckeditor/ckeditor5-code-block/build/code-blo import ckeditor5EssentialsDll from "@ckeditor/ckeditor5-essentials/build/essentials.js"; import ckeditor5FontDll from "@ckeditor/ckeditor5-font/build/font.js"; import ckeditor5HeadingDll from "@ckeditor/ckeditor5-heading/build/heading.js"; +import ckeditor5HighlightDll from '@ckeditor/ckeditor5-highlight/build/highlight.js'; import ckeditor5HtmlEmbedDll from "@ckeditor/ckeditor5-html-embed/build/html-embed.js"; import ckeditor5HorizontalLineDll from "@ckeditor/ckeditor5-horizontal-line/build/horizontal-line.js"; import ckeditor5MarkdownDll from '@ckeditor/ckeditor5-markdown-gfm/build/markdown-gfm'; @@ -180,6 +181,7 @@ const CKEDITOR_BASE_CONFIG_FOR_PRESETS = { window.CKEditor5.font.FontBackgroundColor, window.CKEditor5.findAndReplace.FindAndReplace, window.CKEditor5.heading.Heading, + window.CKEditor5.highlight.Highlight, window.CKEditor5.horizontalLine.HorizontalLine, window.CKEditor5.htmlEmbed.HtmlEmbed, window.CKEditor5.image.Image, @@ -229,7 +231,7 @@ const CKEDITOR_BASE_CONFIG_FOR_PRESETS = { { label: 'More media', icon: 'threeVerticalDots', - items: [ 'horizontalLine', 'blockQuote', 'codeBlock', 'htmlEmbed', 'specialCharacters' ] + items: [ 'horizontalLine', 'blockQuote', 'codeBlock', 'htmlEmbed', 'specialCharacters', 'highlight' ] }, '|', 'alignment',