We are having a problem with CKEditor (ver 4.1.1.5) stripping out some of our css classes when we are editing in the FULL HTML mode using SOURCE. From looking at some of the other questions posed on this, the Advanced Content Filter is the place we should be going. And, if I read this correctly, we need to edit the config.js file to add: CKEDITOR.config.allowedContent=true;
Am I going in the right direction? I want the WYSIWYG to still work for people with no html experience. However, when we go into source, I want all classes to remain and not be stripped out, no matter what.
You are partially right:
Yes, Advanced Content Filter (ACF) is the mechanism responsible for this.
But no, setting config.allowedContent to true is not a correct solution.
In short, ACF is a useful mechanism that lets you easily control the content that your users add to your site with CKEditor. Instead of disabling it, however, you should extend the filter configuration to accept whatever additional elements, classes, styles, attributes you want to allow.
In your case, if you want to additionally allow all classes for all elements, use this in your editor configuration:
config.extraAllowedContent = '*(*)';
Read more about ACF here:
Content Filtering (ACF) - introduction
Demo of Automatic Mode and Custom Mode
Advanced Content Filter - more advanced
Allowed Content Rules - syntax for ACF rules
Related
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.
I am understanding this better but still not there yet.
I have a notes document with a rich text field. I want to edit it in Xpages, so that the user can enter text for an email that an agent will generate. The idea is that the user should be able to enter styled text, hopefully including pasted graphics, and this is saved to the rich text field in such a way that a later agent can copy that field to the body of an email.
On the form I have checked the field "Store contents as HTML and MIME.
In the Xpage I have bound the CKEditor directly to the field (can bind it to a scope variable if necessary).
The code in my agent is as follows:
Set rtItmFrm = emlDoc.getFirstItem("Body")
Set rtItmTo = New NotesRichTextItem(mail,"Body")
Set rtItmTo = rtItmFrm.Copyitemtodocument(mail,"Body")
Any further suggestions on reading up on MIME/CKEditor etc would also be much appreciated.
Bryan
=========================================================================
I just discovered how to modify the CKEditor in Xpages (the Rich Text Control). I have the full menu and one or two more things turned out. However, I am really puzzled by how it treats HTML. I would like to put a template for a nice HTML email (like a newsletter). Anything even a little complicated it munges and the output is messed up.
I read enough online to understand that it is not supposed to be a HTML editor, but I am really having trouble getting the results I want. I would love to put some basic skeleton HTML in there, but everything but the simplest code doesn't work.
Is there anyway to import HTML and it not get messed up using this editor?
as Per and Stephan said, Have a look at ACF filtering that is 'server side' (This is not related to CKEditor itself, but it is related to XPages).
If you have a look at the inputRichText control you will see 2 properties.
htmlFilter
htmlFilterIn
These properties determine how to filter Html on the way in to your data, and also on the way out.
This can be used to strip styling out, and also to prevent dangerous tags like some bad code here etc.
By Default the htmlFilter is set ACF (Active Content Filtering) if you look at the default rules, you will see it strips things like 'margin' out.
see /properties/acf-config.xml-sample
There is a filter called 'identity' which means don't filter anything, however beware if you use this you are not protected from and maliciously entered html.
You should look into defining your own set of rules for your ACF filter, this way you can choose which elements to remove. There is a section in Mastering XPages book about this.
If you still have any trouble, then there are some settings in CKEditor config which also control ACF (totally separate to XPages server side)
I don't think CKE changes the HTML, it is the writing back to a RT field.
Try and bind your RichText Editor to a scoped variable instead of a RichText field. This way you have access to the raw HTML and can use that to generate a MIME email. You might want to have a look at Mustache for mail merge.
Use this article series as starter how to prepare CK editor to make this possible.
And as Per mentioned: check the filtering.
The section entitled Advanced Content Filter guide in the CKEditor docs talks about how to set values for config.allowedContent. The documentation states that you can override the default value. No mention is made of how to obtain the default value and augment it.
For example, I want to allow script tags in addition to the default tags supported, as enhanced by any installed plugins. If I inspect config.allowedContent in the browser in the area where I set CKEditor config properties, I see that allowedContent is undefined. That tells m the default behavior is triggered by the value undefined, which is unfortunate.
How can this be done? I can think of the following approaches:
1) Somehow list the value of allowedContent on the console after initialization is complete. Not sure how to do that. Hard-code that value, plus script in the config section of my code. This is not the way I'd like to go forward.
2) Write a little plugin that merely adds script to allowedContent. Not sure what that would look like. This is a viable way forward.
3) Any other ideas?
I suppose that editor.config.extraAllowedContent is a remedy to your problem.
Note that CKEditor secures all <script> tags in your contents so included JavaScript is not executed (avoiding XSS). Anyway, for debugging purposes, allowedContent rules are stored in editor.filter.allowedContent during editor's lifetime.
I customized the great filter in CKEditor to allow only some kind of tag:
config.allowedContent='img[!src]';
It works, but I also need to limit the src of the img to my domain only: I need something like this
config.allowedContent='img[!src=http://mysite.com/images/[1-9][0-9]*/dir/dir/file.jpg]';
Is it possible?
Advanced Content Filter does not allow now to validate attributes/styles values. We decided not to implement this feature, because it would make the whole filter a lot more complex. This may change in the future, but for now you can use a trick with the object format.
The object format of Allowed Content Rules is described very briefly in the Allowed Content Rules guide and you can check out the example configuration (3rd editor). But these samples do not show all object format's features. You'll be interested in the optional match property.
See pagebreak plugin for the example. If span does not have div parent with a page-break-after style, then that rule won't be applied to the span, so if there's no other rule that will accept it, then it will be removed. So the match rule allow you to define to which elements this rule will be applied.
But note that this filter won't influence image dialog's behaviour (so much). So you should also modify the src input validator.
And one more thing - you need to allow src=='cke-test', because this value is used to probe what filter allows. Without that image button may disappear.
In TinyMCE, I need to add a in-line style attribute on link creation. The reason is that Google Mail doesn't support tags in a newsletter.
One solution can be "advlink". But who would explain to our user...that he must add css code in a new link...bad solution.
There must be a simpler, user-friendly way, but i can't find it. Is there an option that i can tell the plugin to add automatic style-attributes to a link?
//EDIT
Ok, i think another solution can be, if i can add anchor to 'style_formats'. But an anchor is not supported in 'style_formats'...someone has an idea?
You may write an own plugin which adds the inline style element to links.
An easier approch is to put the necessary code into the setup config paramter.