Method 1 – Load CKEditor via CDN and Configure Custom CSS:
<script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace('editor1', {
contentsCss: 'path/to/your/custom.css'
});
</script>
OR
<script>
CKEDITOR.replace('editor1', {
contentsCss: 'body{ color: #fff }',
});
</script>
Method 2 – Inline Configuration:
If you want to avoid creating a separate CSS file, you can inject CSS directly using the config.contentsCss option.
<script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace('editor1', {
on: {
instanceReady: function() {
this.document.appendStyleText('.cke_editable { background-color: #f0f0f0; }');
}
}
});
</script>
Method 3 – Using CKEditor Plugins:
If you want more advanced color options, you can use CKEditor’s plugins. Since you’re using a CDN, you can specify the plugins and configuration options inline.
Include the CKEditor with the color button plugin from the CDN:
<script src="https://cdn.ckeditor.com/4.16.2/full/ckeditor.js"></script>
Configure the editor to include the colorbutton plugin:
<script>
CKEDITOR.replace('editor1', {
extraPlugins: 'colorbutton',
toolbar: [
{ name: 'colors', items: ['TextColor', 'BGColor'] }
],
colorButton_colors: 'CF5D4E,454545,FFF,CCC,000',
colorButton_enableAutomatic: false
});
</script>