Assigning some style from the styles-box in CKEditor through JavaScript

How can I simulate user-selection of some style from the styles-box, through JS? I want to put some shortcut buttons that assign some of the popular 开发者_Go百科styles with one click.

EDIT:

• I don't care if it'll be in-editor button or outer button.
• I don't want css-style assignment; I want CKEditor-style assignment (those of the styles-box).

I haven't used CKEditor, but, I saw your question and thought "That would be fun to figure out." Well, here is what I figured out:

(yes, I found terrible documentation, but, that's not the point...I will give them props for commenting their code, though.)

///
// function to add buttons that trigger styles to be applied.
//
// editor - CKEDITOR - instance of editor you want command attached to.
// buttonName - String - name of the button
// buttonLabel - String - humane readable name of the button
// commandName - String - name of command, the way to call this command from CKEDITOR.execCommand()
// styleDefinition - StyleDefinition - obj defining the style you would like to apply when this command is called.
///

var addButtonCommand = function( editor, buttonName, buttonLabel, commandName, styleDefiniton )
{
    var style = new CKEDITOR.style( styleDefiniton );
    editor.attachStyleStateChange( style, function( state )
        {
            !editor.readOnly && editor.getCommand( commandName ).setState( state );
        });
    editor.addCommand( commandName, new CKEDITOR.styleCommand( style ) );
    editor.ui.addButton( buttonName,
        {
            label : buttonLabel,

            command : commandName
            //adding an icon here should display the button on the toolbar.
            //icon : "path to img",
        });
};

//Get the editor instance you want to use.  Normally the same as the ID of the textarea CKEditor binds to.
var editor1 = CKEDITOR.instances.editor1;

//If you look at ckeditor/_source/plugins/styles/default.js you will see that this selects the first element.  That list is read into the array 'default'.
var blueTitleStyle = CKEDITOR.stylesSet.registered.default[0];

//Or, you can define the style like this: See http://dev.ckeditor.com/wiki/Components/Styles for more info on style definitions.
var blueTitleStyle = { 
    name : 'Blue Title',
    element : 'h3',
    styles : { 'color' : 'Blue' }
};

addButtonCommand(editor1, 'BlueTitle', 'BlueTitle', 'bluetitle', blueTitleStyle);

Here is a Javascript function to aid your click events:

//function used to execute the command.  Only used for calling the command when not calling from a button. (Like an A with an onClick bound to it.)
    //pulled this function right out of the api.html example in the ckeditor/_samples dir.
    function ExecuteCommand( commandName )
    {
        // Get the editor instance that we want to interact with.
        var oEditor = CKEDITOR.instances.editor1;

        // Check the active editing mode.
        if ( oEditor.mode == 'wysiwyg' )
        {
            // Execute the command.
            // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#execCommand
            oEditor.execCommand( commandName );
        }
        else
        {
            alert( 'You must be in WYSIWYG mode!' );
        }
    }

Now, you can create a link like this:

<a href='#' class='setBlueTitle'>Set Blue Title</a>

and use a bit of jQuery to spice it up:

 <script type="text/javascript">
            $(document).ready(function(){
                $(".setBlueTitle").onClick(function(e){
                    //stops the click from changing the page and whatever other default action would happen.
                    e.preventDefault();

                    ExecuteCommand('bluetitle');
                });
            });
        </script>

I am not 100% sure about the button icon part. I didn't have an icon to try it with. But, according to a few posts, it should work fine. Regardless, the jQuery click binding works.

That should be pretty much it! I had to do quite a bit of digging around to figure this out, but it certainly is satisfying to see it work!

Here's one option

First, you can setup the desired styles you want to try out in a CSS class. Then, you can set the className for the test div when you click that button. Here's a simple example:

test.css:

.bold {
   font-weight: bold; 
}

.italic {
   font-style: italic; 
}

test.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
    <input type="button" onclick="document.getElementById('testStyleDiv').className='bold'" value="bold"/>
    <input type="button" onclick="document.getElementById('testStyleDiv').className='italic'" value="italic"/>

    <div id="testStyleDiv">foo</div>
</body>
</html>