I'd like to use the data processing module from CKEDITOR to clean up some html for display, but not use the gui or other features of CKEDITOR.
We have some really gnarly input html and I just want it to have symmetrical tags, strip inline position-based styles, and go from there.
I'm having trouble figuring out how to do this, probably because I don't know how to use CKEDITOR (it's used elsewhere in this app).
I've tried:
var data = CKEDITOR.dataProcessor.toDataFormat('<body><b>foo</b></b></body>'); // throws Uncaught TypeError: Cannot read property '$' of undefined(…)
var cleanedHtml = data.toHtml();
Related
I'm using CKEditor 5 on my website in order to allow users to generate PDF templates for their company.
My issues is, that once I take the data out of the ckEditor, every styled element has a class="CSS-Class-Here", which is problematic due to the fact that when I convert the HTML contents of the CKEditor to PDF, the PDF doesnt know any of these classes.
Is there any way to get CKEditor to save these classes as inline styles?
I know that its possible to create a plugin for a specific element for a specific style, but I want everything to act this way, not something specific.
Also, It's impossible to just inject the styles into the PDF itself, due to the fact that ckEditor keeps their styles in javascript functions and creates them on demand.
For example:
Yellow highlighted text comes out as:
<mark class="" marker-yellow "">Random Text</mark>
I would like it to come out as:
<mark style="background: yellow">Random Text</mark>
Meaning that the style that's present in the marker-yellow class should be applied inline directly to the element itself.
I know this question has been asked 1000 times, but after 6 hours of research I still couldn't find any solution.
Unfortunately, I am bound to a CMS that's using ckeditor. I don't like WYSIWYG editors at all, but I have to deal with it. I want the editor to not touch ANY of my code, doesn't matter if it's wrong or not, if I place block elements into inline elements, etc.
This is the config I am using atm:
CKEDITOR.editorConfig = function( config ) {
config.language = 'en';
config.allowedContent = true;
config.height = 600;
config.startupMode = 'source';
// Prevent CK from removing empty HTML-tags
$.each(CKEDITOR.dtd.$removeEmpty, function (i, value) {
CKEDITOR.dtd.$removeEmpty[i] = false;
});};
Well, with these settings the editor still seems to alter the code. For instance, it realigns <a> or <span> tags and just adds new code. This is so incredible annoying. I know it's not the purpose of the editor to behave like a pure webdev editor, but there must be a way to configure it somehow to just leave the code completely alone, right? Can anyone tell me what settings I need to add in order to achieve this?
there must be a way to configure it somehow to just leave the code completely alone, right?
Wrong.
Libraries like this make use of the contentEditable feature provided by browsers.
The browser will take the HTML, parse it into a DOM, and then provide an API to manipulate it. Later, that DOM can be serialised back to HTML, but this is entirely disconnected from the original HTML. Everything will have been normalised.
I'm using Uploadcare for uploading and storing images, which is working.
However, it appears CKEditor 4.1.1 is choking on these images.
Adding an image via CKEditor.
The initial placement of the image is as expected. However, when the data is saved, CKEditor is clearly doing something weird, prior to committing the data.
In several tests, during the formatting and rearrangement of the HTML, CKEditor is stripping out the "style" image attribute and the first opening double quote, which I can see in the text data on the database itself.
This behavior is entirely reproducible.
Editing an image via CKEditor.
Initially, the image looks fine. But when I view the source, the HTML for the image is sanitized to render as text, and not to render as an image object.
Disabling 3rd party Plugins.
As mentioned previously, I'm using Uploadcare, in addition to Word Count & Char Count. I disabled both Plugins, but this didn't change anything.
Thoughts.
During the saving process, I merely cleanse the data via the $this->db->escape() function in CodeIgniter, which cannot to circumvented, or the data won't commit and I receive an error.
Just to be clear, during testing, the errors occured with any type of image object; either added manually, or via Uploadcare.
In my view page, I have:
<script type="text/javascript">
CKEDITOR.replace('note', {
allowedContent: true
});
</script>
Which — according to the documentation — "will disable the filter (data will not be filtered, all features will be activated)."
However, it doesn't work and it's doing exactly the same as before; stripping out the style attribute by name and converting the HTML to their regular textual equivalents.
If I chose to define something specifically, that turns almost everything off, including the plugins, and — strangely enough — the very thing I've written a rule for:
<script type="text/javascript">
CKEDITOR.replace('note', {
allowedContent: {
'img': {
styles: 'height, width'
}
}
});
</script>
So I have no idea what's going on.
I've also tried the advice in a thread on their forums where someone is experiencing exactly the same problem as me, but neither methods work, which leads me to believe this is a problem particular to the CKEditor itself, and not the treatment of data in and of itself.
If anyone has any advice as to how I can coax CKEditor into handing images, I'd be happy for any advice.
Setting allowedContent: true for 99.9% would stop CKEditor from stripping images if you did that correctly.
Your allowedContent setting (2nd code sample) is incorrect. It does not allow src and alt attributes. Image without src will be stripped by CKEditor as invalid. So you should have at least:
allowedContent: {
img: {
attributes: '!src, alt', // src is required
styles: 'height, width'
}
}
So point 1. or 2. should work - I did that a lot of times, so I'm pretty sure of that. Thus, I think that you have a 2nd issue with your server breaking something.
The problem here (on top of needing allowedContent: true or properly set up rules) is CodeIgniter's XSS filtering. Before we get access to $_POST (or $_GET/$_REQUEST) CI has already ran filtering over this data and in this case ruined it. This setting can't be overridden on a per-controller basis as it's already run before the controller is loaded.
So you can either disable it altogether in /application/config/config.php (not recommended)
$config['global_xss_filtering'] = FALSE;
Or a less heavy handed approach (but still not ideal) manually disabling it on certain pages (i.e. my example turning it off on all pages under /admin/help). Also in /application/config/config.php.
$config['global_xss_filtering'] = TRUE;
# Override the XSS filtering on /admin/help
if (preg_match("/^\/admin\/help/", $_SERVER["QUERY_STRING"])) {
$config['global_xss_filtering'] = FALSE;
}
I had the exact issues you were having, and this has solved the issue for me.
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.
Dojo custom widgets can be internationalized via the _templated mixin following the steps outlined here and here. Then placeholders within the widget template like this: ${i18n.username} are automatically replaced with the appropriate language translation.
What is the simplest way to do similar nls language substitution outside of a widget? Ideally, I would like to add an attribute to a tag to have all the placeholders within substituted, including nested tags. Is there some type of container widget that already does this?
Or does Dojo development assume everything will be in a (custom) widget? I need to localize already existing code which doesn't use widgets.
The best solutions I have found so far are:
Using dojox.mobile.i18n, which is a "a thin wrapper around dojo.i18n, and has ability to replace strings, such as CDATA or attribute values, in dojo markup." However I'm afraid this is limited to a certain subset of mobile tags/widgets.
Disabling automatic parsing and manually searching/replacing the appropriate text before explicitly calling the parser in dojo.addOnLoad().
I assumed that the notation in the external html is ${i18n.username}.This will find any node that has class="i18nReplace" and replace the innerHTML of the node. I didn't test any of this, but I hope you can use it as a starting point.
dojo.require("dojo.i18n");
dojo.require("dojo.query");
dojo.requireLocalization("myI18n", "myI18N"); // This will need to be modified to get your i18n files
dojo.addOnLoad(function() {
var i18n = dojo.i18n.getLocalization("myI18n", "myI18N");
dojo.query(".i18nReplace").forEach(function(node, index, arr){
node.innerHTML = dojo.replace(node.innerHTML, { i18n: i18n } );
// blindly doing this, does not support nested tags.
// you could add conditional logic to check for children
// and if they exist separately process them, otherwise
// replace the html.
});
});