Disable html validation and cleanup in CKEditor - ckeditor

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.

Related

Drupal 8 stripping style attributes from table tags

I'm using Full HTML filter, with CKEditor. The following filters are enabled:
Align images
Caption images
Track images uploaded via a Text Editor
Collapsible text blocks
Note that Limit allowed HTML tags and correct faulty HTML is NOT enabled.
when I add a style attribute to a table element in Ckeditor using the Source view, specifically "width=75%", it is stripped when the page is rendered. When I edit the page again and go to Source view, the style tag is there.
What is stripping it on render?
I believe inline styles are removed by default for security reasons. But, there has been a lot of discussion about this issue on Drupal.org over the past few years. If you're looking for a workaround and accept the risk, here are two approaches I have found:
How to fix: CKEditor is removing style attributes. Drupal 8.
Refactor Xss::attributes() to allow filtering of style attribute values
Fair warning: I have not personally implemented either of these.
Inline style is stripped by default with Basic HTML formatter. Unless you have a specific reason why you don't want to turn on Limit allowed HTML tags I highly recommend that you do because it gives you a lot of control over what tags you and others can use in the wysiwyg. In addition, it allows you to add a "Styles" button with pre-configured styles so you don't have to insert inline CSS code repetitively.

CKEditor HTML4 validation to support HTML Emails

Several questions in one here but I suspect will all have the same answer.
Using the CKEditor in a CakePHP project where the content being edited is to make the html part of an email.
Most email applications don't fully support HTML net alone true HTML5.
An example of which is to center text in an email paragraph you use either <p align=center> or <center></center>
In the CKEditor when in source mode editing if do a <p align=center> and save it (or just toggle the source edit mode) it removes the align=center because in HTML5 that's no longer valid.
How can I allow this in the CKEditor?
Can I enable HTML4 validation instead of HTML5?
I also have a table in the template where half of it is edited in a field(textbox) called Header (the header of the email template) and another field called footer.
In the Header I want <table><tr><td>
In the Footer I want </td></tr></table>
Then my message content is placed in the TD cell between the header and footer.
However the CKEditor won't allow me to have an HTML TAG and not its closing TAG.
Any ideas on how to make this happen as well?
Regards
Ian
To change the HTML that it's accepted by CKEditor, adjust its ACF settings. The simplest way is to allow everything:
config.allowedContent = true;
That won't solve the halve tables part.
For that you can try to use config.protectedSource, defining a rule for both the opening and closing parts, but taking care to add also something there that allows you to target only that table and not any other table that might be in the content.
(Of course the best solution would be to but that table outside the editor when you create the mail with all the parts)

How to preserve html comments in Ckeditor when editing an existing document

How can I make sure that user typed in html comment is visible when editing an older document in Ckeditor? Use case is that users want to discuss about html formatting and they want others to see exactly what they wrote. I tried disabling the ACF by using config.allowedContent = true; but that had no effect in this case. Maybe the escaping of the document in html response must done differently? Or am I forced to instruct users to use some special formatting to avoid losing written html tags for later editing?
There was a check for double encoding the message on server side that lead the response be <p><!-- This is an example when it should have been <p>&lt;!-- This is an example I removed the check and now it works.

CKeditor, colour of text seems to be not retained although HTML is correct, how to resolve?

I am using CKEditor 4.4.5.
Users use the text colour icon to change the colour of a word which works fine. When one checks the underlying HTML, it shows:
<p><span style="color:#FF0000">test </span></p>
However when clicks the "source" icon again to return to the standard non HTML view, the colouring has gone, although the underlying HTML is still correct. If you take this HTML and render it in a browser it will work correctly. So it seems that CKEditor is not able to render text colour correctly, unless freshly changed using the text colour icon.
We had customers thinking that the colour had not changed, and then trying to fix the issue in the HTML, which resulted in the total corruption of the HTML due to human error.
Is this a bug, or am I missing something?
Thanks.
As for CKEditor it might so happen that Advanced Content Filter will strip undesired tags / attributes.
If you don't have colorbutton plugin, CKEditor will strip this span (see standard demo).
You have 2 simple solutions:
Add colorbutton plugin.
Simply add to your config:
config.extraPlugins = 'colorbutton';
Add ACF proper rule.
config.extraAllowedContent = 'span{color}';
For more informations about ACF see Content Filtering (ACF).

working with xml snippets in CKEditor

I am Using CKEditor in my application where the users can write blogs, create pages etc..,
Source mode is disabled for the editor. Writing xml in the editor's text area is not retained after saving the content. I clearly see that the content got HTML Encoded and the same is supplied as input to the CKEditor's textarea.
Works as designed. Whatever you enter into the WYSIWYG area, will get HTML encoded. How would you want to behave it differently?
If you want a text editor for writing XML, maybe the answers to this question are useful: Textarea that can do syntax highlighting on the fly?
I too want CKEditor to support XML tags, but I understand that you can't just type them into the main window - anything typed here is assumed to be actual content, not tagging, and therefore gets encoded.
What I'd like to do is define a list of styles that cause a tag of my choosing to be used, e.g. if the user chooses the 'example' style, CKEDitor does <x>content</x>. Unfortunately I haven't had much success with this, despite hacking the dtd.js file.
My current solution is to define a list of styles but map them to a standard HTML tag, then put my desired XML tag name in as an attribute. I'll then need to write some XSLT that transforms the data later.
CKEDITOR.stylesSet.add('myStyles',
[{
name: 'Example sentence',
element: 'span',
attributes: {'class': 'example', 'data-xmlTag': 'x'}
}];
config.stylesSet = 'myStyles';
element specifies a standard HTML tag – I use <span> if I want the XML to be inline and <div> if I want it to be block level. The data-xmlTag attribute says what XML tag I actually wanted to use (x in this case). The class allows me to define some styles in CSS and means I can group several XML tags under one class name. To define some CSS:
config.contentsCss = CKEDITOR.basePath+'tagStyles.css';

Resources