Tengo una interfaz de usuario de texto enriquecido existente que me gustaría usar con CKEditor. Básicamente, quiero que CKEditor maneje las partes complicadas de aplicar estilos, formatos, filtrar y normalizar contenido insertado. Mi IU existente necesita impulsar la interacción y mostrar el estado en función de la selección (es decir, la selección de texto en negrita debe reflejarse en el estado de mi botón 'Negrita' en la IU.

Tengo la integración a un punto en el que puedo aplicar negrita, cursiva y subrayar formatos, cambiar el tamaño de fuente y agregar estilos.

Para negrita, cursiva y subrayado:

var editor = this.getEditor();

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

(Nota, agreguéconfig.extraAllowedContent = 'strong;u;em'; en config.js para habilitar el subrayado)

Para cambiar el tamaño de fuente:

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 (clases 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);
            }
        });

Ahora, creo que estoy haciendo esto de manera incorrecta, ya que con este enfoque claramente voy a encontrar algunos problemas de especificidad de CSS. Tenga en cuenta que mis clases css para mis 'estilos' contienen atributos como color, tamaño de fuente, etc. Entonces, si aplico un estilo que tiene un tamaño de fuente 40px a mi selección:

This is my [selected text]

Y luego cambie el tamaño de fuente de esa selección a 10px, luego este es el html resultante:

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

Lo que da como resultado que el texto seleccionado tenga un tamaño de fuente de 40px.

Si los dosspans se fusionaron, entonces el tamaño de la fuente se establecería correctamente en 10px. Obviamente, este es un ejemplo simple; Hay escenarios más complicados que serían mucho más difíciles de resolver, estoy seguro.

Entonces, si tengo mi propia interfaz de usuario y quiero acceder a la funcionalidad existente para cambiar el formato (negrita, subrayado, cursiva, alineación de texto), tamaño de fuente y agregar estilos, ¿cómo se puede hacer esto? es posible? ¿Hay algún ejemplo o documento que pueda ver que me ayudaría a comenzar en la dirección correcta?

Según @Reinmar, estoy buscando en el filtro de contenido avanzado, pero hasta ahora estoy un poco perdido.

Gracias por tu ayuda.