2

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.

Jeremy T
  • 1,273
  • 1
  • 10
  • 14

1 Answers1

2

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.

Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • This generally works like a dream, but I'm running into trouble when I have two different classes (for example, `font-times` and `font-arial`) nested inside each other. I'd like to be able to remove certain classes from everything inside selection. Would there be a way to do something like that (using jQuery it'd be something like `$(".font-arial", selection).removeClass("font-arial");` ) – Jeremy T Jul 13 '12 at 19:11
  • Looking at your docs, DOM mode sounds like something that would work with that, but probably not the other two. Is there any way to treat a Rangy range like a DOM object, and if not, what browsers don't support DOM ranges? – Jeremy T Jul 13 '12 at 19:42
  • The comments probably weren't the best place to ask stuff in the first place, but I figured out a way to (kind of) simulate that behavior. I added a "selectedText" class to the current selection, and then used jQuery selectors from there (`$(".selectedText .font-arial, .selectedText.font-arial").removeClass("font-arial");`) – Jeremy T Jul 13 '12 at 20:20