We Keep Coding

Preventing CKEDITOR from modifying HTML

I'm trying to force CKE to stop modifying my HTML wildly, and trying to introduce our own rules.
For example, CKE will remove empty span and i tags, we can prevent it from doing it with
CKEDITOR.dtd.$removeEmpty.span = false
CKEDITOR.dtd.$removeEmpty.i = false
So far so good. Then we tried to make A tags to be able to support block level elements (HTML5), which we were able to do by manipulating the DTD as well.
But now it seems the DTD object is not enough for what we are trying to do.
For example, it's removing empty A tags, and I can't prevent it from doing it,
CKEDITOR.dtd.$removeEmpty.a = false
will not do the trick. It's doing the same thing with empty BR tags located at the end of the content.
I know CKE is using a filter, parser, processor or something that I need to hook onto and modify/alter it in order to stop it from doing those changes. Could you please give me any advise on how to achieve this ?
Cordially, Agustin.
UPDATE
I'm also looking forward in adding an extra supported children to SELECT tag. Select supports optgroup and option as children, I'm trying to add support for a custom_tag (inline), but I can't succeed in making it happen.
CKEDITOR.dtd.select.custom_tag = 1
Is not doing it. The custom tag is also declared on dtd.$inline
I guess there is some sort of external processing cleaning it up, and I can't control this from the DTD object. Any pointer on this regard ?

Unfortunately empty links are a special case and to stop removing them you will need to modify the source:
https://github.com/ckeditor/ckeditor-dev/blob/6f4c29002f4d6ecfa39308b641ae37c56bba1348/core/htmlparser/fragment.js#L59-L66
function isRemoveEmpty( node ) {
// Keep marked element event if it is empty.
if ( node.attributes[ 'data-cke-survive' ] )
return false;
// Empty link is to be removed when empty but not anchor. (#7894)
return node.name == 'a' && node.attributes.href || CKEDITOR.dtd.$removeEmpty[ node.name ];
}
BTW. CKEditor removes empty inline elements, because they are not editable (and some things may start working incorrectly). To ensure correct editability of these elements you can write widgets for them.

To disable filtering HTML (source) in CKEditor write in your config.js file this lines:
CKEDITOR.editorConfig = function( config ) {
config.allowedContent = true;
};
Source code here.

Why is CKEditor removing links and attributes

I have a link with an inline attribute of style="color: #FF0000;". I recently upgraded to latest CKEditor, after years of neglect. Now when I call CKEDITOR.inline, it strips all the links.
I found http://docs.ckeditor.com/#!/api/CKEDITOR.dtd-property-S-editable, which doesn't have an a in there.
I did CKEDITOR.dtd.$editable.a = 1; and it still strips links. What am I missing here? I literally followed the flow from the API inline call to that, but it seems that I'm doing something wrong.
EDIT
I also find that is removing the class attribute from elements. Everything else seems okay.

Check out the guide about content filtering (ACF) in CKEditor. See also the working sample in CKEditor SDK which shows how ACF works in the default automatic mode and how to adjust it (which is what you need to do in your case).

try this:
CKEDITOR.config.allowedContent = true;
CKEDITOR.dtd.$removeEmpty['a'] = false;
CKEDITOR.config.extraAllowedContent = 'a[!href];' + '#';
CKEDITOR.config.protectedSource.push(/<a[^>]*><\/a>/g);
CKEDITOR.config.protectedSource.push(/<span*?[\s\S]*?\/span>/g);

Magento : Hide html elements using javascript

I'm developing an extension and I want to know how to hide an html element:
I tried this code, but it didn't work
$$('#myDiv').hide();
Where is my error?

In Jquery
$('#myDiv').hide(); //You have to include jquery library in your file
In Javascript
document.getElementById("myDiv").style.display = "none";

Possible typo? Extra "$".
Jquery:
$('#myDiv').hide();
And are you trying to do it on a click?

only one dollar sign needed
$('#myDiv').hide();

Initially this question was tagged magento.
So I assume the issue is inside a magento project.
Magento uses prototype by default.
In prototype you can hide an element like this.
$('element_id_here').hide();
$ means getElementById.
If you want to hide a set of elements, let's say with the class some_class do this:
$$('.some_class').each (function(elem){
$(elem).hide();
})
it also works for ids the same way but it's kind of useless since the id must be unique in the page.
$$('#myDiv').each (function(elem){
$(elem).hide();
})

as when I first see this post it contains a magento tag. And many of the beginners do have problem with jquery and prototype in magento.
the code to hide html with id selector in jquery is:
$('#myDiv').hide(); //# for id selector
but for prototype, its:
$('myDiv').hide(); //no # needed for id selector
but even if it do not work then open web developer tool (Ctrl + Shift + C) of your browser and look for console tab. there you might be getting error.

Javarscript issues with dynamic tooltipster

I'm using Tooltipster which seems to be a nice jquery plugin.
Regardless I need to have my tooltips dynamic, which I don't believe should be that difficult. However I wrote a script and maybe it's because I'm tired or I don't know the simplest of javascript. Probably a combination of both.
I can't seem to get around this particular error. TypeError: $(...).tooltipster is not a function.
Here is the basic javascript code:
$("img#box_image[data-img-number]").hover(function(e) {
e.preventDefault();
i = $(this).attr("data-img-number");
var w = "http://trailerbrokerimages.s3.amazonaws.com/pics/" + i ;
window.console.log('before tool');
window.console.log('before tool ' +w);
tool(w);
});
var tool = function (w) {
$('.tooltip_two').tooltipster({content: $('<span><img style="height:191px; width:256px;"src="http://trailerbrokerimages.s3.amazonaws.com/pics/'+w+'" /></span>')});
An example of the code can be found at http://www.trailerbroker.com/go/listings/view/219
I suspect it's lame mistake on my part, thanks.

You have the same id box_image for multiple elements.
I understand that you're trying to make it unique by appending the data-img-number, but this won't work, as there's no way you can do this at run time unless your explicitly specifying different hover handlers.
Instead you could attach the hover handler to a class.
Add a class="box_image" to your <img /> elements and attach the hover as follows,
$(".box_image").hover(//rest of your code here//)
This should give you the desired functionality.

I solved this problem by using twitter bootstrap popover. Don't waste your time with tooltipers.

Create new (not change) stylesheets using jQuery

We've got a little tool that I built where you can edit a jQuery template in one field and JSON data in another and then hit a button to see the results immediately within the browser.
I really need to expand this though so the designer can edit a full CSS stylesheet within another field and when we render the template, it will have the CSS applied to it. The idea being that once we've got good results we can take the contents of these three fields, put them in files and use them in our project.
I found the jQuery.cssRule plugin but it looks like it's basically abandoned (all the links go nowhere and there's been no development in three years). Is there something better or is it the only game in town?
Note: We're looking for something where someone types traditional CSS stylesheet data in here and that is used immediately for rendering within the page and that can be edited and changed at will with the old rules going away and new ones used in their stead. I'm not looking for something where the designer has to learn jQuery syntax and enter in individual .css("attribute", "value") type calls to jQuery.

Sure, just append a style tag to the head:
$("head").append("<style>p { color: blue; }</style>");
See it in action here.
You can replace the text in a dynamically added style tag using something like this:
$("head").append("<style id='dynamicStylesheet'></style>");
$("#dynamicStylesheet").text(newStyleTextGoesHere);
See this in action here.

The cleanest way to achieve this is by sandboxing your user-generated content into an <iframe>. This way, changes to the CSS won't affect the editor. (For example, input { display:none; } can't break your page.)
Just render out your HTML (including the CSS in the document's <head>, and write it into the <iframe>.
Example:
<iframe id="preview" src="about:blank">
var i = $('#preview')[0];
var doc = i.contentWindow || i.contentDocument;
if (doc.document) doc = doc.document;
doc.open('text/html',true);
doc.write('<!DOCTYPE html><html>...</html>');
doc.close();

If the user should be able to edit a whole stylesheet, not only single style attributes, then you can store the entered stylesheet in a temporary file and load it into your html document using
$('head').append('<link rel="stylesheet" href="temp.css" type="text/css" />');

sounds like you want to write an interpreter for the css? if it is entered by hand in text, then using it later would be as simple as copy and pasting it into a css file.
so if you have a textarea on your page to type in css and want to apply those rules when you press the button, you could use something like this (only pseudocode, needs work):
//for each css id in the text area
$.each($('textarea[name=cssTextArea]').html().split('#'), function({
//now get each property
$.each($(this).split(';'), function(){
$(elem).css({property:value});
});
});
then you could write something to go through each element that your designer typed in, and get the current css rules for it (including those that you applied using some code like the snippet above) and create a css string from that which could then be output or saved in a db. It's a pain and much faffing around with substrings but unfortunately I don't know of a faster or more efficient way.
Hope this atleast gives you some ideas