Question

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

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

粗体，斜体和下划线：

var editor = this.getEditor();

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

（注意，我在config.js中添加config.extraAllowedContent = '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类）之间切换：

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特异性问题。请注意，我的'styles'的css类包含颜色，字体大小等属性。因此，如果我将一个字体大小为40px的样式应用于我的选择：

This is my [selected text]

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

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

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

如果合并了两个spans，则字体大小将正确设置为10px。显然，这是一个简单的例子;有些更复杂的场景可能更难以解决。

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

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

感谢您的帮助。

将我现有的Rich Text UI与CKEditor API一起使用

0 个答案: