jquery 如何在CKEditor上将主题/皮肤从浅色更改为深色?

gmol1639  于 2023-10-17  发布在  jQuery
关注(0)|答案(2)|浏览(167)

我正在使用CKEditor为我的网站,我试图把所有的元素从光变成一个黑暗的模式。

我有

<script src="//cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>


<textarea name="description" rows="100" cols="80" id="description">
......TEXTS......
</textarea>
<script>
CKEDITOR.replace( 'description' );
CKEDITOR.config.height = 500;
</script>

我试过

下载zip,并将其移动到我的项目/js中。

CKEDITOR.replace( 'description', {
    skin: 'moonocolor,/js/ckeditor/skins/moono-dark/skin.js',
    height : 500
} );

这条线
皮肤:'moonocolor,/js/ckeditor/skins/moono-dark/skin. js',
好像不管用。

ee7vknir

ee7vknir1#

转到https://ckeditor.com/cke4/builder选择标准预设,然后选择皮肤Moono Dark,然后单击最后的下载按钮。解压缩/js/文件夹中的文件,只需用途:

<script src="/js/ckeditor/ckeditor.js"></script>
<textarea name="description" rows="100" cols="80" id="description">
</textarea>
<script>
CKEDITOR.replace( 'description' );
</script>

不需要使用skin配置选项,因为Moono Dark是您设置中唯一的皮肤。
编辑:如果你想要黑色背景和白色文本,在replace命令之前添加这一行:

CKEDITOR.addCss('.cke_editable { background-color: black; color: white }');

或者在ckeditor目录中编辑contents.css并更改body标签的CSS(但如果更新ckeditor,此文件将被替换,因此请小心)
或者在ckeditor目录中创建一个新文件myfile.css,其中包含body标签或.cke_editable类的CSS修改,并将其加载到配置文件中:

config.contentsCss = [CKEDITOR.getUrl('contents.css'), CKEDITOR.getUrl('myfile.css')];

编辑2:要更改边框颜色,您必须修改您的网页CSS,而不是ckeditor,像这样:

.cke_chrome {
    border: 1px solid black !important;
}

对于底部栏,我只知道如何完全删除它,但你不能调整大小后,你这样做。将这些行添加到配置文件中:

config.removePlugins = 'elementspath';
config.resize_enabled = false;
xn1cxnb4

xn1cxnb42#

添加到@Wizard的公认答案,要格式化底部栏,您需要修改您的网页CSS,而不是CKEditor,像这样

.cke_bottom {
    background-image: none !important;
    background: #333 !important;
    border-top: 1px solid #333 !important;
    box-shadow: none !important;
}

.cke_path_item {
    color: #fff !important;
    text-shadow: none !important;
}

a.cke_path_item:hover {
    background: #666 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

相关问题