Changing class and style attributes inside a RTE (designMode on)
-
20-06-2021 - |
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.
Solution
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.