It's 2017 and it's the age of HTML5! In HTML5, the line break is <br>, NOT <br />. But for the life of it, I can't get CKeditor to ditch <br /> in favor of <br>.
The incorrect <br />'s are giving me all sorts of problems. Among them:
Failed code validation
(In Firefox) Using JavaScript's innerHTML on a code block that was created with <br />'s, returns <br>'s instead - which messes up comparisons about changes.
I found this old forum entry about the issue (in a related program, not in CKeditor itself):
http://ckeditor.com/forums/Support/are-not-validated-W3C-validator-How-change
But the suggested fix (changing config.docType in the config file) does NOT WORK!
I tried a bunch of different docTypes's, in both the top-level config.js and in core/config.js .
In top-level config.js , I tried:
config.docType = '<!DOCTYPE html>';
In core/config.js, I tried:
docType: '<!DOCTYPE html>',
But nothing works! :(
I also tried to hunt down instances of <br /> in the multitudes of files, but didn't find any in the core part of CKeditor. I presume that the <br /> string gets created dynamically??
How can I get CKeditor to spit out <br> rather than <br /> ?
Thanks!
Yay, it took some hardcore Googling (hard to phrase the search), but I found the answer! I hope this will help others.
Simply add:
CKEDITOR.on( 'instanceReady', function( ev ) {
// Output self-closing tags the HTML5 way, like <br>
ev.editor.dataProcessor.writer.selfClosingEnd = '>';
});
What it does, from what I understand, is to wait for the core plugin "HTML Output Writer" to be loaded - and when it is, it modifies the "writer", which is a property of each editor instance. The above way applies the change to all editors, but it could also be done to individual editor instances (though I find it hard to imagine why anyone would want to do the latter.)
For more info, from the CKEditor4 documentation:
How Do I Output HTML Instead of XHTML Code Using CKEditor?
All right, CKEditor rocks! :D
Related
I'm using Typo3 9.5.14 and CkEditor to add and edit news articles, i see in frontend that it is closing and starting a new paragraph at every in the bodytext area here an example :
<p>
Text somthing <br />
Text somthing 2 <br />
Text somthing 3 <br />
Text somthing 4 <br />
</p>
After save, i see in frontend is converted to this;
<p>Text somthing </p>
<p>Text somthing 2 </p>
<p>Text somthing 3 </p>
<p>Text somthing 4 </p>
But in source it is still in the original code even after save.
Is it really because CKEditor and how can i prevent this ?
This is causing the problem of adding new spaces between each line of text.
Possibly switch to direct source editing?
The other reason could be you need to allow tags in the editor configuration. Like this :
TYPO3 9.5.4 CKEditor RTE deletes style attributes
Hope it helps you
EDIT:
Does this setting still work in TYPO3 9? maybe that is it:
https://docs.typo3.org/m/typo3/reference-coreapi/7.6/en-us/Rte/Transformations/Tsconfig/Index.html#dontconvbrtoparagraph
I come back with the solution i find, i have uninstalled the obsolete extension rtehtmlarea, and this solved the problem.
When I add br to ckeditor allowed content and adding <br> tag it is being changed into <br />
But when I add <br/> it is being removed.
Why is it being removed when br is in allowed content? Any suggestions?
There are some bits missing from your post, not sure why, or what you were trying to say.
If what you were saying is that you wanted to add, say, clear="all" to your <br /> tags, you can use this to update your allowed content:
config.AllowedContent = "br[clear]";
Separate individual elements with ;.
Here is the reference to the AllowedContent rules in the documentation:
http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules
I keep this bit in comments above my AllowedContent declaration as a reminder:
elements [attributes]{styles}(classes)
If that's not what you were asking, forgive me, again, there are some parts missing from your post. If you can update it and let me know I'll revisit this answer.
== EDIT ==
Ok, I just looked at the edit of the post, and it seems you had "naked" <br /> tags in your question, which turned into actual line breaks.
What you're seeing is that the editor is forcing valid HTML. BR tags should always be formatted as such: <br /> (notice the space)
Is there a way to make input text inside a link tag works well in IE8? I cannot place the caret inside nor select the text within it.
<input type="text">
I think the reason why I'm trying to do this is not important here, just consider I have no choice of make it work under an <a> tag. I only have control over what's inside the <a> tag.
As a solution, I was thinking about some JQuery DOM manipulation when in IE8 mode but there must be a easier/cleaner way of fixing this "bug".
Thanks
I think this is due to the input and link tag display properties, while an input is display:inline-block; your link is display:inline;. Try to play with these properties and z-index if it's not working.
Hovever, i think jQuery solution is better, and simpler, except if this is your only usage of jQuery on your page.
HTML :
<input type="text" />
jQuery script
jQuery(document).ready(function(){
$("#myInputLink").click(function(){
// .trigger('focus') or .focus(), but the first one is better on my own
$(this).next('input[type="text"]').trigger('focus');
});
});
Have a nice day.
Last week i posted a question that CKEditor wasn't maintaining the trailing slash of the element. This though had a simple solution. Jquery .replace("<br>", "<br />").
This will be done when the Html is read from the Editor.
It's not a solution that will win a price award. but it worked.
(The old post has been removed. because it was project related. and not interesting for other people)
Now the following problem <img> needs to be generated as <img />. The problem stays that the Ckeditor isn't keeping the trailing slash for self closing elements.
Someone told me on the other topic(That's deleted), that possibly we are changing settings of the HTMLWriter plugin. What should be causing the problem. I know the code we are using very good and i am sure that we didn't configure any settings of the html writer.
Besides that we only added custom plugins to the Ckeditor. And we had to shutdown the ACF because it was creating to much problems.
Sadly i can't share any code because it's code of the client.
But does anyone know a simple solution to put the trailing slash?
Or if you have had the same problem, and have a solution feel free to anwser.
Fix for CKEditor 4.x is following:
CKEDITOR.on('instanceReady', function(ev) {
// Ends self closing tags the XHTML way, like <br />.
ev.editor.dataProcessor.writer.selfClosingEnd = ' />';
});
Paste this code into config.js after CKEDITOR.editorConfig = function( config ) { ... }.
MY answer would be:
that i never found a solution. After this we looked up and Xhtml validator.
And this one fixed all closing tag problems.
Thanks for the effort anyway
I am using ckeditor on my website to make it easier for users to input HTML.
However, the data I get back from ckeditor is wrapped in <p></p> blocks. (Which I don't want.)
Is there some configuration setting that forces the editor to not wrap the text in anything?
Add the following to your config.js file for CKEditor:
config.enterMode = CKEDITOR.ENTER_BR;
Example:
...
CKEDITOR.editorConfig = function (config)
{
config.enterMode = CKEDITOR.ENTER_BR;
...
};
Details
The configuration setting that controls this behavior is based on what you want to happen when the user presses Enter.
Just in case someone who's new to working with HTML reads this, I'm including some basic explanation of the concepts involved and why a tag will need to be inserted when the Enter key is pressed.
We know that if we enter some text into an HTML document and then put additional text on a new line, the browser won't display the text as two lines, it will ignore any carriage returns and will condense multiple spaces between characters to a single space.
The following HTML:
qwer
tyui
Will be rendered as:
qwer tyui
So the editor needs to insert an HTML tag to tell the browser that it should display the second group of text on a new line.
The configuration setting that controls this is config.enterMode and it offers three options:
1 - Insert paragraph
The default setting creates a paragraph element each time Enter is pressed:
config.enterMode = CKEDITOR.ENTER_P; // inserts `<p>...</p>`
2 - Insert 'div'
You can choose to create a div element instead of a paragraph:
config.enterMode = CKEDITOR.ENTER_DIV; // inserts `<div></div>`
3 - Insert break (the setting you're looking for)
If you prefer to not wrap the text in anything, you can choose to insert a line break tag:
config.enterMode = CKEDITOR.ENTER_BR; // inserts `<br />`
The CKEditor documentation indicates that using the ENTER_BR setting is not recommended:
Note: It is recommended to use the CKEDITOR.ENTER_P setting because of its semantic value and correctness. The editor is optimized for this setting.
Another related setting 'autoParagraph'
There is a second setting that controls a similar situation –config.autoParagraph. How it functions depends on the config.enterMode setting discussed above.
autoParagraph determines whether inline elements such as span are wrapped in the block element (p or div) specified by the enterMode setting. The default is to wrap inline elements, so if you enter a span like this (as HTML):
<span>asdfg</span>
It will be wrapped in a p or div element like this:
<p><span>asdfg</span></p>
or this:
<div><span>asdfg</span></div>
The inline element won't be wrapped if you set this to false or if you set enterMode to CKEDITOR.ENTER_BR.
The CKEditor documentation includes this note about config.autoParagraph:
Note: Changing the default value might introduce unpredictable usability issues.
Even more settings
There are three more settings that are somewhat related to this subject:
config.fillEmptyBlocks
config.forceEnterMode
config.ignoreEmptyParagraph
Reference
A complete list of the available configuration options can be found here:
CKEDITOR.config - CKEditor 3 JavaScript API Documentation
CKEDITOR.config - CKEditor 4 Documentation
I know I'm a little late to the game, but I think the option the OP is looking for is:
config.autoParagraph = false;
This is answered perfectly well above, however as mentioned you should not really be changing this in the main config.
The correct way to do this is per .replace really.
i.e.
<form name="title" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
<textarea id="editor2" name="editor2" rows="300"><?php echo $editor2;?></textarea>
<textarea id="editor1" name="editor1" rows="1" cols="50" onfocus="this.value=''; this.onfocus=null;">Type Tab Title Here:</textarea>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
CKEDITOR.replace( 'editor2', {
enterMode: CKEDITOR.ENTER_BR,
on: {'instanceReady': function (evt) { evt.editor.execCommand('maximize'); }},
});
</script>
A very simple solution without any configuration change is to use
shift+enter for a line break <br>, and
just enter would cause a new paragraph.
Advantage is that you don't have to do any configuration changes. Plus, you have both.
If you want to exclude <p> tag and want only basic editing tool like Bold Italic superscript Subscript etc in Ckeditor then follow these steps:
I am 100% sure about this as I researched 36 Hours continuously :)
Step 1: Add this script in your PHP webpage
<script type="text/javascript">
CKEDITOR.replace( 'editor1', {
enterMode: CKEDITOR.ENTER_BR,
on: {'instanceReady': function (evt) { evt.editor.execCommand('');}},
});
</script>
Step 2: add id="editor2" and onfocus="this.value='';" in your textarea like this
<textarea id="editor2" name="AsYourWish" onfocus="this.value='';">
Step 3: Be sure that remove Class="ckeditor" from Textarea.
Step 4: Reload your webpage if not happened Delete Cache/History and Restart PC/laptop.
Step 5: Its Done :)
For Django-ckeditor add this config in your settings.py file:
ENTER_P = 1 # default
ENTER_BR = 2
ENTER_DIV = 3
CKEDITOR_CONFIGS = {
'default': {
'enterMode': ENTER_BR,
},
}
If anyone comes here with ckeditor 5, don't look for this option. They have removed it, I've spent days tyring to figure this out.
I'm afraid you're not going to like it, but enter mode BR is the root
of all evil. If we were able we'd removed it from CKEditor 4 long time
ago and we're definitely not going to implement it in CKEditor 5.
Related GitHub issue