Need help with adding Classes to HTML Editor Elements

I'm using a WYSIWYG Editor called CKEditor and its really awesome. Inside the editor, whenever I add a new Heading/Text/DIV/Image/ anything els开发者_开发知识库e for that matter, I want it to stay attached with a class:

Like

<h2 class="blah">Sample Text</h2>

<img src="/abc.png" class="blah1" />

Here's a reference link: http://docs.cksource.com/CKEditor_3.x/Developers_Guide

I'm not good with Javascript, if anyone can help me out, I would be really Grateful!

Thank you.

For example, the following code will ensure that elements will have their "alt" attribute filled:

editor.dataProcessor.htmlFilter.addRules(
{
    elements :
    {
        img : function( element )
        {
            if ( !element.attributes.alt )
                element.attributes.alt = 'An image';
        }
    }
});

Read the Overview (http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Data_Processor) this example was taken from there.

You can do the same for "class". Take a look at the existing output, then either add "class" if it's missing or replace them if that's your intent.

take a look at answers for this question.

customize the dialogs during the define, add a "class" field and then set and get the contents in the setup and commit functions.

look at ckeditor/_samples/api_dialog.html for background on modifying dialogs.

for the Headings you'd have to look at modifying the commands. Those don't have dialogs.

There's probably a way to always apply the same class based on the particular tag in the "data processor". Do you want to always set the same class everytime or allow the user to choose the class, that's important because it changes your options quite a bit.