I'm using Typo3 9.5.10 with the CKEditor.
For a extension we reused the tt_content subheader and changed the type from input to text.
Since we are on CKEditor, the CMS or the editor adds new line breaks between tags on save. When open the element, the editor converts them to new paragraphs.
We don't use flux, I tryed these configurations:
editor:
config:
ignoreEmptyParagraph: true
autoParagraph: false
enterMode: CKEDITOR.ENTER_BR
Does anyone know that and found a solution?
Related
I have a RTE field in my custom extension for TYPO3 10.4 with Fluid Styled Content. The RTE CKEditor automatically wraps each paragraph with a p tag. I'd like to get rid of this p tag. It's just a teaser field where I don't need line breaks or paragraphs.
What I tried so far is to create my own parseFunc via TypoScript to solve the problem during frontend output:
lib.parseFunc_my_teaser < lib.parseFunc_RTE
lib.parseFunc_my_teaser.nonTypoTagStdWrap.encapsLines >
lib.parseFunc_my_teaser.nonTypoTagStdWrap.encapsLines {
encapsTagList = p
remapTag.P =
}
In my Fluid template I use the parsefunc like this:
{article.data.teaser -> f:format.html(parseFuncTSPath: 'lib.parseFunc_my_teaser')}
This works and p tags are gone.
But I wonder if there is no nicer solution. I think I need to find a solution to tackle this problem either within the CKEditor configuration or via Page TSconfig. Unfortunately I wasn't able to find a proper approach.
By the way, another problem is, that in the "Info" Backend module of TYPO3 in my installation the view for Page TSconfig filtered by RTE. is empty. Any ideas on this?
I actually do that directly within an own RTE preset for CKE4 (tested in TYPO3 8, 9, 10 LTS):
editor.config.format_tags: "p"
editor.config.enterMode: 2
editor.config.shiftEnterMode: 2
With that an editor can't write P-tags. Even not in Source-Mode of CKE4.
Is there a way to add a tag to the format dropdown that would wrap the text in <small></small> tags?
Editing config.js as follows causes a runtime error:
config.format_tags = 'small;p;h1;h2;h3;pre';
probably because <small> is not block level?
The reason of the runtime error is, that js can not find CKEDITOR.config.format_small.
You have to do two things:
Search for CKEDITOR.config.format_h6 in ckeditor.js and add CKEDITOR.config.format_small={element:"small"};. Then the error is gone, but you can not see the entry yet.
open the languagefile you want (e.g. en.js) and add "tag_small":"small text".
now CKEditor supports the small tag.
This works for me, I hope it works for you too.
If I want to add a custom section tag to format tags, this work for me:
1. Go to config.js, add
config.format_tags = 'h1;h2;h3;h4;h5;h6;section';
config.format_section = { element : 'section' };
2. Then open the languagefile you want (e.g. en.js) -> lang/en.js
search for "tag_pre":"Formatted", and add "tag_section":"Section".
If you're looking to wrap text in a certain tag, you can also achieve this with the Style dropdown as well.
First, configure your editor to allow styles at /admin/config/content/formats/manage/full_html. Replace full_html with whatever editor version you want to modify
Drag the Styles button to the active toolbar if it isn't already there
Add items to "Styles Dropdown" tab under CKEditor plugin settings
Each option takes the form css_selector | Human Visible Name so in your case, you'd add small.my_element_class | Super Special Small or something similar.
Instructions abbreviated from this post: https://www.axelerant.com/resources/team-blog/drupal-8-custom-styles-in-ckeditor
Found a very similar question here: CKEditor classes being stripped
I am using CKEditor 4.2, and I have found it automatically changes content/formats.
For example I have a plugin which automatically creates a new page and a link to it in the text editor, if I create a new page called 'newPage' it creates this code:
<p> </p>
<p><a class="wiki_page_link" href="newpage">newpage</a></p>
This is shown when I click the source button on the CKEditor, now if I click it again, it shows the button again but it's different, AND if I click the source button to view the source code again it displays this code:
<p> </p>
<p>newpage</p>
Now I don't know why CKEditor has automatically changed the link, but now the link won't work. And this is occurring a number of times, for example if I add a new link using the same plugin then the original 'newPage' link is automatically changed. If I have an image of set n x m width and height then load the CKEditor then the width and height are discarded and the image is set to it's default size. If a title is set to be in the center and the CKEditor is used to change the page this centering is defaulted to the normal left of the page.
Any advice would be appreciated,
Thank you
I have finally found a solution to this. The reason it took me so long is because links like this:
CKEditor classes being stripped
to the CKEditor website always say you turn CKEDITOR.config.allowedContent to 'true' and it only provides examples to trying to turn off individual plugins, but I needed to disable it over the entire system.
To disable Advanced Content Filtering throughout the entire CKEditor - in the config.js file insert the line:
config.allowedContent = true;
Hope this helps someone else.
We have additional placeholders, which are embeded in conent edited by CKEditor and we need to be possible to place such placeholders before and after TR-tag, so we could organize repeating of data in the table. But CKEditor probably find that is not valid HTML and take out repeater placeholders before the table.
For example I write next html in source mode:
<table><tbody>{start}<tr><td>...</td></tr>{end}</tbody></table>
I switch to html mode and back to source, now my html is treated to the next view:
<p>{start}{end}</p> <table><tbody><tr><td>...</td></tr></tbody></table>
Possibly there is a CKEditor switch to turn off all syntax cleanup or specially for tables?
Try Adding this line to Config.js file:
config.allowedContent = true;
CKEditor is not a source code editor, but a WYSIWYG editor which uses browsers' contenteditable implementations for its editing feature. Therefore, it needs to work on valid and real HTML.
Although, check the config.protectedSource setting. You'll be able to hide those {start|end} tags from parser.
I'm using the inline editing feature of CKEditor, but I want to add some hint text to the initial state of the control, i.e. something like "Click here to edit...", but I would like that hint text to be removed automatically when the user clicks the control to start typing. Is this feasible, or is there any alternative?
Thanks!
Set a "placeholder" attribute on the element that you want to edit and add this plugin to your build of CKEditor: http://ckeditor.com/addon/confighelper
Your issue refers to:
ckEditor 4.1 - How do I remove inline tooltip
How to remove the "title" attribute that the CKEditor 4 add automatically on inline editing?
How can I change the title ckeditor sets for inline instances?
CKEditor forum post
...and finally the ticket that will resolves above issues in the next major release (CKEditor 4.2).