ihassansattar
commented
5 months ago Any update on this?
Open hassan-debug opened 6 months ago
ihassansattar
commented
5 months ago Any update on this?
ecorona9
commented
5 months ago same here, I'm trying to enable the existing darkmode for the strapi plugin. @nshenderov pls help? 🥺
LucaNerlich
commented
5 months ago We have not added anything to strapiRoot/config/plugins.js.
The on-build autogenerated strapiRoot/.strapi/client/app.js now includes the ckeditor5 lines:
We have added this ckeditor txt file to: strapiRoot/config/ckeditor.txt.
globalThis.CKEditorConfig = {
/* By default custom configs and theme
defined in this file are going to be spread into
default configs and theme these two properties below
allow you to redefine default objects completely: */
//configsOverwrite:true,
//themeOverwrite:true,
/* Here you can redefine default configs
or add completely new ones.
Each config includes:
"styles", "field" and "editorConfig" properties.
Property "field" is required. */
configs:{
toolbar:{
// styles:``,
// field:{},
// editorConfig:{}
},
custom:{
/* Styles for this specific editor version.
This will be passed into the editor's parent container. */
styles:`
// --ck-focus-ring:3px dashed #5CB176;
// .ck.ck-content.ck-editor__editable {
// &.ck-focused:not(.ck-editor__nested-editable) {
// border: var(--ck-focus-ring) !important;
// }
// }
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred{
max-height: 4000px;
}
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused{
min-height: 400px;
max-height: 4000px;
}
`,
/* Custom field option */
field: {
key: "custom",
value: "custom",
metadatas: {
intlLabel: {
id: "ckeditor5.preset.custom.label",
defaultMessage: "Custom version",
},
},
},
/* CKEditor configuration */
editorConfig:{
/* You can find all available built-in plugins
in the admin/src/components/Input/CKEditor/configs/base.js */
plugins: [
CKEditor5.autoformat.Autoformat,
CKEditor5.basicStyles.Bold,
CKEditor5.basicStyles.Italic,
CKEditor5.basicStyles.Underline,
CKEditor5.essentials.Essentials,
CKEditor5.heading.Heading,
CKEditor5.image.Image,
CKEditor5.image.ImageCaption,
CKEditor5.image.ImageStyle,
CKEditor5.image.ImageToolbar,
CKEditor5.image.ImageUpload,
CKEditor5.indent.Indent,
CKEditor5.link.Link,
CKEditor5.list.List,
CKEditor5.paragraph.Paragraph,
CKEditor5.pasteFromOffice.PasteFromOffice,
CKEditor5.table.Table,
CKEditor5.table.TableToolbar,
CKEditor5.table.TableColumnResize,
CKEditor5.table.TableCaption,
CKEditor5.strapiPlugins.StrapiMediaLib,
CKEditor5.strapiPlugins.StrapiUploadAdapter,
CKEditor5.font.FontSize,
CKEditor5.font.FontColor,
CKEditor5.basicStyles.Subscript,
CKEditor5.basicStyles.Superscript,
CKEditor5.basicStyles.Strikethrough,
CKEditor5.horizontalLine.HorizontalLine,
CKEditor5.list.TodoList,
CKEditor5.alignment.Alignment,
CKEditor5.indent.Indent,
CKEditor5.removeFormat.RemoveFormat,
CKEditor5.basicStyles.Code,
CKEditor5.codeBlock.CodeBlock,
CKEditor5.blockQuote.BlockQuote,
CKEditor5.specialCharacters.SpecialCharacters,
CKEditor5.specialCharacters.SpecialCharactersArrows,
CKEditor5.specialCharacters.SpecialCharactersCurrency,
CKEditor5.specialCharacters.SpecialCharactersEssentials,
CKEditor5.specialCharacters.SpecialCharactersLatin,
CKEditor5.specialCharacters.SpecialCharactersMathematical,
CKEditor5.specialCharacters.SpecialCharactersText,
],
/* By default, the language of the plugin's UI will be chosen
based on the language defined in this config file
or on the preferred language from the strapi's user config
and if both of them are not set then 'en' will be used as a fallback.
( language.ui -> preferred language -> 'en' ) */
/* For content it will chose the language based on i18n (if! ignorei18n)
or on language.content property defined here
and it will use UI language as a fallback.
ignorei18n ? language.content : i18n; -> language.ui */
language:{
// ignorei18n: true,
// ui:'he',
// content:'he'
},
toolbar: [
'heading',
'fontSize',
'fontColor',
'|',
'bold',
'italic',
'underline',
'subscript',
'superscript',
'strikethrough',
'horizontalLine',
'|',
'link',
'bulletedList',
'numberedList',
'todoList',
'|',
'alignment',
'indent',
'outdent',
'|',
'insertTable',
'removeFormat',
'specialCharacters',
'blockQuote',
'code',
'codeBlock',
'|',
'fullScreen',
'undo',
'redo',
],
/*toolbar: [
{
label:' ',
tooltip: null,
icon:'paragraph',
items: [ 'heading','style','SourceEditing']
},
'|',
{
label:' ',
tooltip: null,
icon:'text',
items: [ 'bold', 'italic','fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor' ]
},
{
label:' ',
tooltip: null,
icon:`
<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<rect x="0" fill="none" width="24" height="24"/>
<g>
<path d="M14.348 12H21v2h-4.613c.24.515.368 1.094.368 1.748 0 1.317-.474 2.355-1.423 3.114-.947.76-2.266 1.138-3.956 1.138-1.557 0-2.934-.293-4.132-.878v-2.874c.985.44 1.818.75 2.5.928.682.18 1.306.27 1.872.27.68 0 1.2-.13 1.562-.39.363-.26.545-.644.545-1.158 0-.285-.08-.54-.24-.763-.16-.222-.394-.437-.704-.643-.18-.12-.483-.287-.88-.49H3v-2H14.347zm-3.528-2c-.073-.077-.143-.155-.193-.235-.126-.202-.19-.44-.19-.713 0-.44.157-.795.47-1.068.313-.273.762-.41 1.348-.41.492 0 .993.064 1.502.19.51.127 1.153.35 1.93.67l1-2.405c-.753-.327-1.473-.58-2.16-.76-.69-.18-1.414-.27-2.173-.27-1.544 0-2.753.37-3.628 1.108-.874.738-1.312 1.753-1.312 3.044 0 .302.036.58.088.848h3.318z"/>
</g>
</svg>`,
items: [ 'underline', 'strikethrough', 'superscript', 'subscript' ]
},
'removeFormat',
'|',
'alignment',
'outdent',
'indent',
'|',
'bulletedList', 'numberedList',
'|',
'link','blockquote','insertTable','specialCharacters',
'blockQuote', 'code','codeBlock',
'|', 'horizontalLine', '|',
'|', 'showBlocks',
'|', 'undo', 'redo', '|',
],*/
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' },
]
},
image: {
toolbar: [
'imageStyle:inline',
'imageStyle:block',
'imageStyle:side',
'|',
'toggleImageCaption',
'imageTextAlternative'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'|',
'toggleTableCaption'
]
}
}
}
},
/* Here you can customize the plugin's theme.
This will be passed as "createGlobalStyle". */
theme:{
// common:``,
// light:``,
// dark:``,
// additional:``
}
}run npm run build afterwards and it works fine - explicitly tested via the styles override.
fabiennecornel
commented
5 months ago you need to go to strapi > content-type builder > create a new component, fill in a name, you can select the custom ckeditor component there.
after that you need to replace where you used richtext, with the just made custom richtext component (it's possible without losing the content of those fields)
then this config worked for me:
globalThis.CKEditorConfig = {
/* By default custom configs and theme
defined in this file are going to be spread into
default configs and theme these two properties below
allow you to redefine default objects completely: */
//configsOverwrite:true,
//themeOverwrite:true,
/* Here you can redefine default configs
or add completely new ones.
Each config includes:
"styles", "field" and "editorConfig" properties.
Property "field" is required. */
configs:{
toolbar:{
// styles:``,
// field:{},
editorConfig:{
toolbar: [
'heading',
'|',
'bold', 'italic', 'link', 'bulletedList', 'numberedList',
'|',
'strapiMediaLib', 'insertTable',
'|',
'undo'
],
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' },
]
},
}
},
custom:{
/* Styles for this specific editor version.
This will be passed into the editor's parent container. */
styles:`
// --ck-focus-ring:3px dashed #5CB176;
// .ck.ck-content.ck-editor__editable {
// &.ck-focused:not(.ck-editor__nested-editable) {
// border: var(--ck-focus-ring) !important;
// }
// }
// .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred{
// min-height: 400px;
// max-height: 400px;
// }
// .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused{
// min-height: 400px;
// max-height: 1700px;
// }
`,
/* Custom field option */
field: {
key: "custom",
value: "custom",
metadatas: {
intlLabel: {
id: "ckeditor5.preset.custom.label",
defaultMessage: "Custom version",
},
},
},
/* CKEditor configuration */
editorConfig:{
/* You can find all available built-in plugins
in the admin/src/components/Input/CKEditor/configs/base.js */
plugins: [
CKEditor5.autoformat.Autoformat,
CKEditor5.basicStyles.Bold,
CKEditor5.basicStyles.Italic,
CKEditor5.essentials.Essentials,
CKEditor5.heading.Heading,
CKEditor5.image.Image,
CKEditor5.image.ImageCaption,
CKEditor5.image.ImageStyle,
CKEditor5.image.ImageToolbar,
CKEditor5.image.ImageUpload,
CKEditor5.indent.Indent,
CKEditor5.link.Link,
CKEditor5.list.List,
CKEditor5.paragraph.Paragraph,
CKEditor5.pasteFromOffice.PasteFromOffice,
CKEditor5.table.Table,
CKEditor5.table.TableToolbar,
CKEditor5.table.TableColumnResize,
CKEditor5.table.TableCaption,
CKEditor5.strapiPlugins.StrapiMediaLib,
CKEditor5.strapiPlugins.StrapiUploadAdapter,
],
/* By default, the language of the plugin's UI will be chosen
based on the language defined in this config file
or on the preferred language from the strapi's user config
and if both of them are not set then 'en' will be used as a fallback.
( language.ui -> preferred language -> 'en' ) */
/* For content it will chose the language based on i18n (if! ignorei18n)
or on language.content property defined here
and it will use UI language as a fallback.
ignorei18n ? language.content : i18n; -> language.ui */
language:{
// ignorei18n: true,
// ui:'he',
// content:'he'
},
toolbar: [
'heading',
'|',
'bold', 'italic', 'link', 'bulletedList', 'numberedList',
'|',
'strapiMediaLib', 'insertTable',
'|',
'undo', 'redo'
],
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' },
]
},
image: {
toolbar: [
'imageStyle:inline',
'imageStyle:block',
'imageStyle:side',
'|',
'toggleImageCaption',
'imageTextAlternative'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'|',
'toggleTableCaption'
]
}
}
}
},
/* Here you can customize the plugin's theme.
This will be passed as "createGlobalStyle". */
theme:{
// common:``,
// light:``,
// dark:``,
// additional:``
}
}the magic happens around row 25
mauro-montano
commented
3 months ago I have ckeditor5 working fine but when I tried to add some configuration related to the link under the table configuration to test is not working
link : {
decorators: [
{
mode: 'manual',
label: 'Open in the same tab',
attributes: {
rel: 'noopener noreferrer'
}
}
],
},@fabiennecornel @LucaNerlich can anyone help me?
thomasInes
commented
3 months ago anyone running into the same issue, make sure your field is using a version that correspond to your config.
eg. if the config is in the "custom" section of your ckeditor.txt (like in the config example on the homepage of this repo), then your field must use "Custom version", which can be changed in the content-type builder in Strapi
I Installed the plugin and then create a
ckeditor.txtfile in mysrc/configdirectory and try to remove change the tool bar and set ckEditor to fullscreen but i noticed that changes made to ckeditor.txt not applied to editor i build app each time i made changes but it no changes reflected can some guide me how can i apply changesstapi version: 4.15, node : 18, database: postgres