Как изменить тему / скин на CKEditor со светлого на темный? - PullRequest
0 голосов
/ 12 апреля 2020

Я использую CKEditor для своего сайта, я пытаюсь превратить все элементы из светлого в темный режим.

enter image description here


У меня

<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>

Я пробовал

Скачать и переместите его в мой проект на /js.

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

Эта строка

skin: 'moonocolor, / js / ckeditor / skins / moono-dark / skin. js',

не похоже на работу.

1 Ответ

5 голосов
/ 15 апреля 2020

Go до 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 }');

или отредактируйте contents.css в каталоге ckeditor и измените тег CSS * body (но этот файл заменяется, если вы обновляете ckeditor, поэтому будьте осторожны)

или создайте новый файл myfile.css в каталоге ckeditor с вашими CSS модификациями тега body или .cke_editable класса и загрузите его в свой файл конфигурации с:

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

EDIT2: чтобы изменить цвет рамки, вы должны изменить веб-страницу CSS, а не ckeditor, например:

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

Для нижней панели я только знаю, как полностью удалить его, но вы не можете изменить размер ckeditor после этого. Добавьте эти строки в ваш конфигурационный файл:

config.removePlugins = 'elementspath';
config.resize_enabled = false;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...