Eu tenho uma interface de usuário Rich Text existente que gostaria de usar com o CKEditor. Basicamente, eu quero que o CKEditor lide com as partes complicadas da aplicação de estilos, formatos, filtragem e normalização do conteúdo inserido. Minha interface do usuário existente precisa orientar a interação e mostrar o estado com base na seleção (por exemplo, a seleção de texto em negrito deve ser refletida no estado do meu botão 'Negrito' na interface do usuário.

Eu tenho a integração em um ponto em que posso aplicar os formatos negrito, itálico e sublinhado, alterar o tamanho da fonte e adicionar estilos.

Para negrito, itálico e sublinhado:

var editor = this.getEditor();

        editor.execCommand('underline'); // bold, italic

(Observe, eu adicioneiconfig.extraAllowedContent = 'strong;u;em'; em config.js para ativar o sublinhado)

Para alterar o tamanho da fonte:

var editor = this.getEditor();
        var style = new CKEDITOR.style({
            element: 'span',
            styles: { 'font-size': fontSize + 'px' },
            overrides: [{
                element: 'font', attributes: { 'size': null }
            },{
                element: 'span', attributes: { 'class': null }
            }]
        });

        editor.applyStyle(style);

Para alternar entre estilos (classes css):

var editor = this.getEditor();

        _.each(this.textStyleChoices, function(styleChoice) {
            var style = new CKEDITOR.style({
                element: 'span',
                attributes: { 'class': styleChoice.style }
            });

            if(styleChoice.style === textStyle && !style.checkActive(editor.elementPath(), editor)) {
                editor.applyStyle(style);
            } else {
                editor.removeStyle(style);
            }
        });

Agora, acredito que estou lidando com isso da maneira errada, pois com essa abordagem, claramente vou me deparar com alguns problemas de especificidade do CSS. Observe que minhas classes css para meus 'estilos' contêm atributos como cor, tamanho da fonte, etc. Portanto, se eu aplicar um estilo que tenha tamanho de fonte 40px à minha seleção:

This is my [selected text]

E, em seguida, altere o tamanho da fonte dessa seleção para 10px, este é o html resultante:

This is my [<span style="font-size:10px;"><span class="style1">selected text</span></span>]

O que resulta no texto selecionado com um tamanho de fonte de 40px.

Se os doisspans foram mesclados, o tamanho da fonte seria definido corretamente em 10px. Obviamente, este é um exemplo simples; existem cenários mais complicados que seriam muito mais difíceis de resolver, tenho certeza.

Portanto, se eu tiver minha própria interface do usuário e desejar acessar a funcionalidade existente para alterar a formatação (negrito, sublinhado, itálico, alinhamento de texto), tamanho da fonte e adicionar estilos, como isso pode ser feito? Isso é possível? Existem exemplos ou documentos que eu possa ver que me ajudem na direção certa?

Conforme @Reinmar, estou pesquisando o Filtro de Conteúdo Avançado, mas até agora estou um pouco perdido.

Obrigado pela ajuda.