将我现有的富文本 UI 与 CKEditor API 结合使用

我有一个现有的富文本 UI，我想将其与 CKEditor 一起使用。基本上，我希望 CKEditor 能够处理应用样式、格式、过滤和规范化插入内容的复杂部分。我现有的 UI 需要驱动交互并根据选择显示状态（即，选择粗体文本应反映在 UI 中“粗体”按钮的状态中。

我已经将集成做到了可以应用粗体、斜体和下划线格式、更改字体大小和添加样式的程度。

对于粗体、斜体和下划线：

var editor = this.getEditor();

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

（注意，我添加了config.extraAllowedContent = 'strong;u;em';在 config.js 中启用下划线）

要更改字体大小：

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);

用于在样式（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);
            }
        });

现在，我相信我正在以错误的方式处理这个问题，因为使用这种方法我显然会遇到一些 css 特异性问题。请注意，我的“样式”的 css 类包含颜色、字体大小等属性。因此，如果我将字体大小为 40px 的样式应用于我的选择：

This is my [selected text]

然后将该选择的字体大小更改为 10px，那么这就是生成的 html：

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

这会导致所选文本的字体大小为 40 像素。

如果两个spans合并后，字体大小将正确设置为 10px。显然，这是一个简单的例子；我确信还有更复杂的场景更难解决。

那么，如果我有自己的 UI，并且想要调用现有功能来更改格式（粗体、下划线、斜体、文本对齐）、字体大小和添加样式，该怎么做呢？这可能吗？是否有任何示例或文档可供我查看，帮助我朝着正确的方向开始？

根据@Reinmar，我正在研究高级内容过滤器，但到目前为止我有点迷失。

感谢您的帮助。