TYPO3 CKEditor – configuration not working - ckeditor

I have an TYPO3 8.7.7 installation and I am using rte_ckeditor. I am trying to configure the editor – but it seems not to work.
When I set RTE.default.preset = full or anything else nothing changes in my backend form.
But I need to configure some individual options. So I set the default preset to my own YAML file (RTE.default.preset = mytemplate) which is also registered in my extension ext_localconf.php with
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['mytemplate'] = 'EXT:mytemplate/Configuration/RTE/rte.yaml';
I have cleared typo3temp Folder, system caches via backend, all caches via install tool, deactivated and reactivated my template extension.
I also do not change anything in my backend form at the RTE.
The only thing it did sometimes, when I clear the system cache in backend and save the backend form TYPO3 shows me syntax error in my YAML file – which are all solved now, but it also do not show anything again. Just the default RTE...
My YAML file has nothing special... just come classes and the format tags "pre" relaced with "h6"
imports:
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
editor:
config:
contentsCss: ["EXT:mytemplate/Resources/Public/css/rte/rte.css"]
format_tags: "p;h1;h2;h3;h4;h5;h6"
stylesSet:
- { name: "align-left", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-left' }}
- { name: "align-center", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-center' }}
- { name: "align-right", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-right' }}
- { name: "align-justify", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-justify' }}
- { name: "Headline Stil 1", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6'], attributes: { 'class': 'headline-style-1' }}
- { name: "Headline Stil 2", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6'], attributes: { 'class': 'headline-style-2' }}
- { name: "Headline Stil 3", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6'], attributes: { 'class': 'headline-style-3' }}
- { name: "Headline Stil 4", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6'], attributes: { 'class': 'headline-style-4' }}
- { name: "Button-Link Primär", element: ['a'], attributes: { 'class': 'rte-btn-primary' }}
- { name: "Button-Link Sekundär", element: ['a'], attributes: { 'class': 'rte-btn-secondary' }}
- { name: "Button-Link Tertiär", element: ['a'], attributes: { 'class': 'rte-btn-tertiary' }}
toolbarGroups:
- { name: styles, groups: [ styles, format ] }
- { name: basicstyles, groups: [ basicstyles ] }
- { name: paragraph, groups: [ list, indent, blocks, align ] }
- { name: links, groups: [ links ] }
- { name: clipboard, groups: [ clipboard, cleanup, undo ] }
- { name: editing, groups: [ spellchecker ] }
- { name: insert, groups: [ insert ] }
- { name: tools, groups: [ table, specialchar ] }
- { name: document, groups: [ mode ] }
justifyClasses:
- align-left
- align-center
- align-right
- align-justify
extraPlugins:
- justify
removePlugins:
- image
removeButtons:
- Anchor
- Underline
- Strike
- Styles
What is the trick to get my config working?!

In my case I was using DCE Extension – an the preset got ignored. To use any preset use this DCE field Config:
<config>
<type>text</type>
<rows>5</rows>
<cols>30</cols>
<eval>trim,required</eval>
<enableRichtext>1</enableRichtext>
<richtextConfiguration>mypreset</richtextConfiguration>
</config>
I informed the Ext developer of DCE Ext and he updated the RTE Config "preset" already.

Related

Different Gatsby templates for Netlify CMS collection types?

Building a portfolio site using Gatsby and Netlify CMS. I'd like to have 2 different post types, one for projects and one for blog posts. I don't see any way to differentiate the Netlify collection types in gatsby-node.ts.
This is my netlify config in static/admin/config.yml:
collections:
- name: 'blog'
label: 'Blog'
folder: 'content/blog'
create: true
slug: 'blog/{{slug}}'
path: '{{title}}/index'
editor:
preview: true
fields:
- { name: 'title', label: 'Title', widget: 'string' }
- { name: 'date', label: 'Publish Date', widget: 'datetime' }
- { name: 'description', label: 'Description', widget: 'string' }
- { name: 'body', label: 'Body', widget: 'markdown' }
- name: 'project'
label: 'Project'
folder: 'content/projects'
create: true
slug: 'projects/{{slug}}'
path: '{{title}}/index'
editor:
preview: true
fields:
- { name: 'title', label: 'Title', widget: 'string' }
- { name: 'date', label: 'Publish Date', widget: 'datetime' }
- { name: 'description', label: 'Description', widget: 'string' }
- { name: 'image', label: 'Image', widget: 'image' }
- { name: 'body', label: 'Body', widget: 'markdown' }
I'm loading them separately in gatsby-config.ts:
module.exports= {
// ...
plugins: [
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'blog',
path: `${__dirname}/content/blog`,
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'projects',
path: `${__dirname}/content/projects`,
},
},
]
// ...
}
I can create different post types in Netlify CMS which then create markdown files in the correct folders. I can't figure out how to query them separately so that I can use different templates to display them. I've been poking around in GraphiQL for hours looking for any bit of data which would differentiate these two post types.

How to add image upload functionality in Netlify CMS

Hi I'm new to Netlify CMS I just learned about it from a blog
so I have config.yml that creates two input fields in Netlify CMS
Sample:
collections:
- name: 'team'
label: 'Team'
folder: 'src/team'
create: true
slug: '{{slug}}'
fields:
- { label: 'Team Member', name: 'title', widget: 'string' }
- { label: 'Bio', name: 'bio', widget: 'markdown' }
I'm just wondering how can I add input field for the image
Thanks!
Just add
{ label: "Image", name: "thumbnail", widget: "image"}
into one of your fields
collections:
- name: 'team'
label: 'Team'
folder: 'src/team'
create: true
slug: '{{slug}}'
fields:
- { label: 'Team Member', name: 'title', widget: 'string' }
- { label: 'Bio', name: 'bio', widget: 'markdown' }
- { label: "Image", name: "thumbnail", widget: "image"}
Source: https://www.netlifycms.org/docs/add-to-your-site/

Adding "fontsize" to custom yaml file from ckeditor in TYPO3

I have the problem, that the "fontsize" field is not shown at my own custom configuration.
My YAML File looks like this:
# Load default processing options
imports:
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
# Add configuration for the editor
# For complete documentation see http://docs.ckeditor.com/#!/api/CKEDITOR.config
editor:
config:
contentsCss: ["EXT:rte_ckeditor/Resources/Public/Css/contents.css", "EXT:myext/Resources/Public/css/rte.css"]
format_tags: "p;h1;h2;h3;h4;h5;pre;div"
stylesSet:
# block level styles
- { name: "align-left", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-left' }}
- { name: "align-center", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-center' }}
- { name: "align-right", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-right' }}
- { name: "align-justify", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-justify' }}
- { name: "Interview", element: ['h5', 'p', 'span'], attributes: { 'class': 'ecx-interview' }}
- { name: 'Underline whole element', element: 'p', attributes: { 'class': 'p-carreer' } }
- { name: "Tiny Paragraph", element: "p", attributes: { 'class': 'p-tiny' }}
# Inline styles
- { name: 'Underline whole element', element: 'p', attributes: { 'class': 'p-carreer' } }
- { name: "Important", element: "span", attributes: { 'class': 'c-important' }}
- { name: "Tiny Word", element: "span", attributes: { 'class': 'c-tiny' }}
# List styles
- { name: 'Underline whole element', element: 'p', attributes: { 'class': 'p-carreer' } }
- { name: 'UL Style 2', element: 'ol', attributes: { 'class': 'ul-style2' } }
- { name: 'No UL Bullets', element: 'ul', attributes: { 'class': 'no-bullet' } }
# Link styles
- { name: "External Link", element: "a", attributes: { class: "external-link"} }
- { name: "Arrow-link", element: "a", attributes: { class: "ecx-explore-arrow-link more d-flex align-items-center"} }
# Form styles
- { name: "Table Responsive", element: "table", attributes: { 'class': 'contenttable table-responsive' } }
toolbar:
- [ 'Link', 'Unlink', 'Anchor', 'Table', 'SpecialChar', 'CodeSnippet', 'Youtube' ]
- [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ]
- [ 'NumberedList', 'BulletedList']
- [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord' ]
- [ 'Undo', 'Redo', 'RemoveFormat', 'ShowBlocks' ]
- "/"
- [ 'Format', 'Styles','Size' ]
- [ 'Bold', 'Italic', 'Underline', 'Blockquote', 'Subscript', 'Superscript']
- [ 'Source', 'Maximize', 'About']
extraPlugins:
- justify
- specialchar
- showblocks
- codesnippet
- font
justifyClasses:
- align-left
- align-center
- align-right
- align-justify
codeSnippet_theme: 'monokai_sublime'
removePlugins:
- image
processing:
allowTags:
- iframe
I've tried to import some other .yaml (full, processing, ... ) Files or to include the official font plugin from ckeditor but nothing work.
I'm using TYPO3 8.7.16.
The configuration looks like this in the backend: TYPO3 Backend custom configuration ckeditor
Thank you!
Using your configuration:
toolbar:
- [ 'Format', 'Styles','FontSize' ]
Instead of
toolbar:
- [ 'Format', 'Styles','Size' ]
See:
CKEditor 4 - how to add font family and font size controls to the toolbar

CKEditor classes to multiple block elements

In CKEditor I need to be able to add the classes .h1, .h2, .h3 ... to my headers, to render them as those different sizes.
Example:
<h1 class="h3">h1 shown at same size as h3</h1>
I could add the following to my stylesSet, which seems pretty verbose:
config.stylesSet = [
// Headers as h1
{ name: 'h2 as h1', element : 'h2', attributes: {'class': 'h1'} },
{ name: 'h3 as h1', element : 'h3', attributes: {'class': 'h1'} },
{ name: 'h4 as h1', element : 'h4', attributes: {'class': 'h1'} },
{ name: 'h5 as h1', element : 'h5', attributes: {'class': 'h1'} },
{ name: 'h6 as h1', element : 'h6', attributes: {'class': 'h1'} },
// Headers as h2
{ name: 'h1 as h2', element : 'h1', attributes: {'class': 'h2'} },
{ name: 'h3 as h2', element : 'h3', attributes: {'class': 'h2'} },
{ name: 'h4 as h2', element : 'h4', attributes: {'class': 'h2'} },
{ name: 'h5 as h2', element : 'h5', attributes: {'class': 'h2'} },
{ name: 'h6 as h2', element : 'h6', attributes: {'class': 'h2'} },
// Headers as h3
{ name: 'h1 as h3', element : 'h1', attributes: {'class': 'h3'} },
{ name: 'h2 as h3', element : 'h2', attributes: {'class': 'h3'} },
{ name: 'h4 as h3', element : 'h4', attributes: {'class': 'h3'} },
{ name: 'h5 as h3', element : 'h5', attributes: {'class': 'h3'} },
{ name: 'h6 as h3', element : 'h6', attributes: {'class': 'h3'} },
// Headers as h4
{ name: 'h1 as h4', element : 'h1', attributes: {'class': 'h4'} },
{ name: 'h2 as h4', element : 'h2', attributes: {'class': 'h4'} },
{ name: 'h3 as h4', element : 'h3', attributes: {'class': 'h4'} },
{ name: 'h5 as h4', element : 'h5', attributes: {'class': 'h4'} },
{ name: 'h6 as h4', element : 'h6', attributes: {'class': 'h4'} },
// Headers as h5
{ name: 'h1 as h5', element : 'h1', attributes: {'class': 'h5'} },
{ name: 'h2 as h5', element : 'h2', attributes: {'class': 'h5'} },
{ name: 'h3 as h5', element : 'h3', attributes: {'class': 'h5'} },
{ name: 'h4 as h5', element : 'h4', attributes: {'class': 'h5'} },
{ name: 'h6 as h5', element : 'h6', attributes: {'class': 'h5'} },
// Headers as h6
{ name: 'h1 as h6', element : 'h1', attributes: {'class': 'h6'} },
{ name: 'h2 as h6', element : 'h2', attributes: {'class': 'h6'} },
{ name: 'h3 as h6', element : 'h3', attributes: {'class': 'h6'} },
{ name: 'h4 as h6', element : 'h4', attributes: {'class': 'h6'} },
{ name: 'h5 as h6', element : 'h5', attributes: {'class': 'h6'} }
];
In other StackOverflow questions I have found answers like to add them like this, but it doesn't work.
config.stylesSet = [
{ name: 'as h1', element : ['h2', 'h3', 'h4', 'h5', 'h6'], attributes: {'class': 'h1'} },
{ name: 'as h2', element : ['h1', 'h3', 'h4', 'h5', 'h6'], attributes: {'class': 'h2'} },
{ name: 'as h3', element : ['h1', 'h2', 'h4', 'h5', 'h6'], attributes: {'class': 'h3'} },
{ name: 'as h4', element : ['h1', 'h2', 'h3', 'h5', 'h6'], attributes: {'class': 'h4'} },
{ name: 'as h5', element : ['h1', 'h2', 'h3', 'h4', 'h6'], attributes: {'class': 'h5'} },
{ name: 'as h6', element : ['h1', 'h2', 'h3', 'h4', 'h5'], attributes: {'class': 'h6'} }
];
In the docs, there is nothing about this method.
Am I missing something, is there another method or is the first method the only way?
Specifying multi-elements will not work. You can only specify one element for one style entry. This is because CKEditor needs to show a preview inside the dropdown how such styled element will look.
By allowing multiple elements in a single style entry, CKEditor would either need to show preview for for all elements (the same as your current solution) or preview for only one element what could help you get smaller code and smaller number of entries in styles dropdown but wouldn't be very practical from WYSIWYG point of view (the preview would not match what you get after applying the style).

How to configure styles in CKEditor?

Does someone have a proper guide to configure styles in CKEditor please? My objective is to customise the dropdown list (I only really need one dropdown) to provide multiple styles of the same HTML tag. For example a P tag could have the following styles: <p>, <p class="excerpt">, <p class="highlight"> that can be selected from the dropdown list.
I tried to read this documentation but it has a lot of missing information. It uses a lot of CKEditor jargon and doesn't give an overview of the architecture or execution/initialisation pipeline to begin with.
I am using a very simple CKEditor (below) and I cannot find the difference between the "Paragraph" and "Normal" dropdown.
The documentation says use this code to configure toolbar:
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
I see "styles" in one of the code lines, but it does not explain what "name" is, and what { name: styles' } does. Removing it will remove both the dropdowns and there is no hint in how to customize the dropdown list.
Then I found
config.format_tags = 'p;h1;h2;h3;pre';
but this only allows me to remove the dropdown item, not the combobox itself.
There is also the CKEDITOR.styleSet.add
CKEDITOR.stylesSet.add( 'my_styles', [
// Block-level styles
{ name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
{ name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },
// Inline styles
{ name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
{ name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
] );
Again, it does not explain where to place this code, or the execution sequence in the initialization pipeline. It does not explain how the value 'my_style' is used, whether it is a reference to some other configuration. I also don't quite understand the purpose of the comments "block level styles" and "inline styles". Seems irrelevant? The configuration code does not seem to make a distinct between these 2.
CKEDITOR.replace( 'ckeditor', {
height: 500,
contentsCss: '.helloworld { background-color:#C0C0C0;}.helloworld2 { background-color:#5555C0;}',
docType: '<!DOCTYPE HTML>',
toolbar: [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
'/',
{ name: 'styles', items: [ 'Styles' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'others', items: [ '-' ] },
{ name: 'about', items: [ 'About' ] }
],
stylesSet: [
{ name: 'Paragraph', element: 'p', attributes: { 'class': 'helloworld' } },
{ name: 'Paragraph2', element: 'p', attributes: { 'class': 'helloworld2' } },
]
} );
http://jsfiddle.net/zf9w6tmm/5/

Resources