Develop Reference

Ckeditor - why dataProcessor.htmlFilter.addRules does not work? How to fix it?

I want to make that when creating a paragraph in the ckeditor, a certain class is automatically added to it. I wrote this code, but it does not work.
CKEDITOR.on('instanceReady', function (ev) {
var editor = ev.editor;
editor.dataProcessor.htmlFilter.addRules({
elements: {
p: function (el) {
el.addClass('myClass');
}
}
});
});
Why? How can I solve my problem?

Please use something like below. You should use dataFilter instead of htmlFilter and the best approach would be using both of them in order to avoid cases where you create paragraph with no class in design/wysiwyg mode and then you switch to source mode or get data from the editor.
var editor = CKEDITOR.replace( 'editor1', {
language: 'en',
extraPlugins : 'placeholder',
on: {
pluginsLoaded: function( evt ) {
evt.editor.dataProcessor.dataFilter.addRules( {
elements: {
p: function( el ) {
//The Html filter works when you load data into editor.
if(!el.hasClass('nomargins'))
el.addClass('nomargins');
}
}
} );
evt.editor.dataProcessor.htmlFilter.addRules( {
elements: {
p: function( el ) {
//The Html filter works when you get data from editor.
if(!el.hasClass('nomargins'))
el.addClass('nomargins');
}
}
} );
}
}
});

call many functions on document change

I have few namespaces and I want to reinitialize function inside namespaces on document change in order to be reinitialized every time when the document is modified (*modified = adding/removing new sections on existing dom ).
I have tried this but not working so far:
;namespaceName= {
namespaceFunction1: function() {
$( selector ).on('click', function() {
//my first function run here
})
},
// ************second function in namespace***************/
namespaceFunction2: function() {
$(secondSelector).on('click', function() {
//my second function run here
})
}
}
$(document).on('change', namespaceName.namespaceFunction1() );
$(document).on('change', namespaceName.namespaceFunction2() );
Pls help, ty.

Try this...
$(document).on("DOMSubtreeModified", function () {
namespaceName.namespaceFunction1();
namespaceName.namespaceFunction2();
});
It fires your 2 functions on the DOMSubtreeModified event, which is basically what you were looking for - when the DOM changes.

sounds like you need to listen for the DOMSubtreeModified event like this:
$('body').bind('DOMSubtreeModified', function(){
//your code here
});

Drag and Drop / Sortable jQuery Ui Live - must be on, does not work

In the past years I can use this code to work with live-events and drag&drop or sortable:
(function ($) {
$.fn.liveSortable = function (opts) {
this.live("mouseover", function() {
if (!$(this).data("init")) {
$(this).data("init", true).sortable(opts);
}
});
};
}(jQuery));
But the "live" event is deprecated and does not work in newer jQuery versions. I tried to replace the live event with the on-event, but there are still error messages: TypeError: n is undefined
(function ($) {
$.fn.liveSortable = function (opts) {
$(document).on("mouseover",this, function () {
if (!$(this).data("init")) {
$(this).data("init", true).sortable(opts);
}
});
};
}(jQuery));
Do you have any suggestions what I can do instead?
---------------EDIT-----------------------------
I found another solution for me:
$(document).on("mouseover",".draggable", function () {
$( ".draggable" ).draggable({opt});
});
Reference: Using the sortable() method and sending datain URL via jQuery

When do you get an error? Maybe something else goes wrong. I don't get any errors here: http://jsfiddle.net/TSv6Z/

How to add class or attribute automatically to img tags in CKEditor?

I'm using CKEditor version 3.6
I want to automatically add class="newsleft" to any image tag added through the WYSIWYG.
I've seen a few posts that mention dataProcessor but have no idea which file this should be added or how to do it.
Can someone tell me where I would place the following code?
editor.dataProcessor.htmlFilter.addRules(
{
elements:
{
img: function( element )
{
if ( !element.attributes.alt )
element.attributes.alt = 'An image';
}
}
} );

Basically put it in instanceReady listener and it will be fine (3.x and 4.x) (fiddle):
CKEDITOR.replace( 'editor', {
plugins: 'wysiwygarea,toolbar,sourcearea,image,basicstyles',
on: {
instanceReady: function() {
this.dataProcessor.htmlFilter.addRules( {
elements: {
img: function( el ) {
// Add an attribute.
if ( !el.attributes.alt )
el.attributes.alt = 'An image';
// Add some class.
el.addClass( 'newsleft' );
}
}
} );
}
}
} );
CKEDITOR.htmlParser.element.addClass is available since CKEditor 4.4. You can use this.attributes[ 'class' ] prior to that version.

Here's another approach:
CKEDITOR.on( 'instanceReady', function( evt ) {
evt.editor.dataProcessor.htmlFilter.addRules( {
elements: {
img: function(el) {
el.addClass('img-responsive');
}
}
});
});

this worked for me in 3.6
add the following code to config.js
CKEDITOR.on('dialogDefinition', function (ev) {
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is image dialog window
if (dialogName == 'image') {
// Get a reference to the "Advanced" tab.
var advanced = dialogDefinition.getContents('advanced');
// Set the default value CSS class
var styles = advanced.get('txtGenClass');
styles['default'] = 'newsleft';
}
});

Because of this topic is being found in Google very high, I might help people by answering the question: how to add a default class when inserting an image in CKeditor. This answer is for CKeditor 4.5.1. as this is the latest version right now.
Look up image.js in /ckeditor/plugins/image/dialogs/image.js
Search for d.lang.common.cssClass
You will find: d.lang.common.cssClass,"default":""
Edit it with your class name(s) such as: d.lang.common.cssClass,"default":"img-responsive"
I've tried this and it works!

in Version: 4.5.3
Look up image.js in /ckeditor/plugins/image/dialogs/image.js
Search for editor.lang.common.cssClass
You will find: editor.lang.common.cssClass,"default":""
Edit it with your class name(s) such as: editor.lang.common.cssClass,"default":"your-class-name"

javascript id select

I have a javascript function that someone made for me. I am kind of a noob at raw javascript. I use jquery quite often so I have been spoiled. Right now the function runs when someone clicks anywhere on the page because the document selector is used to trigger the function. I want the function to run when a specific id is clicked. I do have jquery installed as well. Anyone have any suggestions?
addEvent('#id', 'click', function(){ does not work
addEvent(document.getElementById("id"), 'click', function(){ does not work
function addEvent(obj, type, fn) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
addEvent(document, 'click', function(){

seems to work:
http://fiddle.jshell.net/MT3ye/

The jquery way.
$("#objId").click(function(){ doSomething();});

Use document.getElementById('id') instead of document.
You should have a look at this:
https://developer.mozilla.org/en/The_DOM_and_JavaScript

how about using the
addEvent($('#id'), 'click', function(){

Would this work for you ...
$(document).ready(function ()
{
$("#element_id").click ( function(){ ... } );
...
}