Question

I’m working on customizing a Rich Text Editor inside my webapp, using CLEditor. For changing fonts and font sizes, I’d prefer to have a bit more fine-tuned control than the default execCommand, especially for font size, since as far as I can tell it just sets it to the old HTML attribute (1-7 instead of 14pt or something like that). So I was thinking I could just set the style attribute, or maybe add a class for the tags inside the iframe that CLEditor generates. However, I can’t seem to find what command I’d need to do that.

So I’d like to be able to do something like this (using jQuery to help out):

$("#fontSelector").change(function() {
    editor.execCommand("style", "font-family: " + $(this).val() + ";");
});

I suppose that would probably need to wrap the selected text in a span or something, and then set the style attribute. If there was a way to use jQuery’s addClass or css methods, that’d be even better.

Answer 1

There isn’t a command identifier for document.execCommand() that does this. For handling the case of CSS classes, you could use the CSS class applier module of my Rangy library.