如何为 CKeditor 4 插件添加灰色边框？答案

【问题标题】：how can I add a grey border to the CKeditor 4 plugin?如何为 CKeditor 4 插件添加灰色边框？
【发布时间】：2020-12-12 14:19:55
【问题描述】：

我正在使用带有 (Microsoft 2013) 样式版本的 CKeditor 4。我正在尝试添加一个灰色填充，以便为用户提供与使用普通 word 文件相同的用户体验，如下图所示。

我应该添加某种样式还是应该添加其他脚本？ word example

【问题讨论】：

为您放置编辑器的容器元素设置样式

标签： jquery ckeditor editor

【解决方案1】：

如果您想更改编辑器颜色，请在 CK 的 JS 下的标题中尝试此操作

CKEDITOR.editorConfig = function( config ) {
    config.uiColor = '#c5cdc8';

    config.toolbarGroups = [
        { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
        ...
    ];

    config.removeButtons = 'Save,NewPage,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Flash,Language,About';

};

【讨论】：

【解决方案2】：

我通过为最大化选项添加一个侦听器解决了这个问题，该侦听器将在容器最大化时向容器添加填充，使其看起来像一个 word 文档。

output

CKEDITOR.on('instanceReady', function (evt) {
        (evt.editor.on('maximize', function (evt) {
            console.log(evt.editor.getCommand('maximize').state)
            if (evt.editor.getCommand('maximize').state == 1) {//ckeck if maximize is off
                style = document.getElementById("cke_1_contents").style.cssText
                document.getElementById("cke_1_contents").style.cssText = style + "padding-left: 180px;padding-right: 180px;padding-top: 25px;padding-bottom: 25px;"
            }
        }))
    })

【讨论】：