Javascript 将我现有的富文本UI与CKEditor API一起使用

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

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

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

var editor = this.getEditor();

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

（注意，我在config.js中添加了

config.extralallowedcontent='strong；u；em'；

以启用下划线）

更改字体大小：

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类）之间切换：

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

这是我的[所选文本]

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

这是我的[所选文本]

这将导致所选文本的字体大小为40px

如果将两个

跨距

合并，那么字体大小将正确设置为10px。显然，这是一个简单的示例；我确信，有更复杂的场景更难解决

因此，如果我有自己的UI，并希望调用现有功能来更改格式（粗体、下划线、斜体、文本对齐）、字体大小和添加样式，那么如何才能做到这一点？这可能吗？是否有任何示例或文档可以让我从正确的方向开始

根据@Reinmar的说法，我正在研究高级内容过滤器，但到目前为止我有点不知所措

---

谢谢你的帮助。

你在这方面做了多少，我正在尝试做类似的事情。

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