如何移除CKEditor 5文本框的边框？

云原生阿岚

2026-8-22

移除CKEditor 5文本框边框的解决方案

以下两种方法可以有效移除或隐藏CKEditor 5文本框的边框：

方法一：CSS优先级覆盖

CKEditor 5的默认样式会给编辑区域添加边框，你可以通过精确的CSS选择器结合优先级覆盖来取消边框：

/* 移除编辑区域的默认边框及聚焦时的外轮廓 */
.ck.ck-editor__main > .ck-editor__editable {
    border: none !important;
    outline: none !important;
}

/* 针对只读模式的额外样式（如果需要） */
.ck.ck-editor__main > .ck-editor__editable.ck-read-only {
    border: none !important;
}

如果之前的CSS无效，大概率是选择器不够精准或优先级不足，上述选择器直接定位到编辑器的核心可编辑区域，!important确保覆盖默认样式。

方法二：编辑器初始化后动态修改样式

在你现有的初始化代码中，直接获取编辑区域DOM元素并设置行内样式，和隐藏工具栏、设置只读的逻辑合并：

ClassicEditor
    .create(document.querySelector('#editor'), {})
    .then(editor => {
        const toolbarElement = editor.ui.view.toolbar.element;                
        toolbarElement.style.display = 'none';
        editor.enableReadOnlyMode('my-feature-id');
        
        // 获取可编辑区域并移除边框
        const editableElement = editor.ui.view.editable.element;
        editableElement.style.border = 'none';
        editableElement.style.outline = 'none';
    })
    .catch(err => {
        console.error(err.stack);
    });