Css used in ckeditor4.15.1

Webix JS
#1

Hello Friends.

I try to include ccs file into the ckeditor4.15.1 but it doesn’t work I use
config.contentsCss = ‘contents.css’;

I use iFrame based ckeditor!

But this will not give any react :frowning:
What did I wrong? Is there any suggestion for this?

in my webix adapter for ckeditor I have also CKEDITOR.replace(…
and there I have also
{
…,
contentsCss: ‘contents.css’,
…
}
But also this give any reaction in my text container…

Thank you for a closed answer

Michael Schrading

#2

Please check the next snippet, Code Snippet

I have added the contentsCss , and code request the provided file, so technically it works. The contents.css is not found in my snippet, as it tries to load it from the same server where snippet located. Most probably you need to use full URI for the css.

#3

Hello Maksim.
No, with contents.css you can style the outer ckeditor in the header but not the content inside the ckeditor iframe… But I need a possibility to predefine some html elements for p or div or tables etc… I have a config and the ckeditor predefinition:

webix.protoUI({
	name:'ckeditor',
	$init:function(config){
        'use strict';
		this.$view.className += ' webix_selectable';
		this._waitEditor = webix.promise.defer();
	},
....

with: webix.require(webix.codebase+ ....

but the css file will not been read… :frowning:

Michael

#4

I’m pretty sure that if it can be used with standalone CKEditor instance, it will work for webix widget as well.

Can you point to some demo where the same technique was used for CKEditor ?

#5

Hello Maksim.

A config will be read:

CKEDITOR.editorConfig = function( config ) {
    'use strict';
    console.log('CKEDITOR.editorConfig for '+$('html').attr('lang'));

    // Define changes to default configuration here. For example
    config.language = $('html').attr('lang');
    config.uiColor = '#d2e3ef';
    config.removePlugins = 'exportPdf,image,pastefromword,pastetext,paste';
    config.extraPlugins = 'placeholder_select,rm_grafbutton,tabletools,tableresize,image2,maximize';
    config.exportPdf_tokenUrl = ' ';
    config.fullPage = true;
    config.resize_enabled = false;
    config.div_wrapTable = true;
    config.format_div = { element: 'div', attributes: { 'class': 'normalDiv' } };
    config.contentsCss = '/css/contents.css';
    .....

As you can see I have announced the contents.css. But there doesn’t came a notice that this contents.css can’t be find or something.

Also in ckeditor.js I have this:

	_init_ckeditor_once:function(){
        'use strict';
        var tid = this.config.textAreaID = 't'+webix.uid();
        this.$view.innerHTML = "<textarea id='"+tid+"' >"+this.config.value+"</textarea>";
        window.CKEDITOR_BASEPATH = webix.codebase+'ckeditor4.15.1/';

		webix.require(webix.codebase+'ckeditor4.15.1/ckeditor.js', function(){
            let barHeight = this.config.barHeight? this.config.barHeight:65;
            let height = parseInt(this.config.contentHeight - barHeight);
            this.config.height = this.config.contentHeight;
            this._3rd_editor = CKEDITOR.replace( tid , {
                parent: this.config.id,
                toolbar: this.config.toolbar,
                readOnly: this.config.readOnly,
                placeholder_select: this.config.placeholder_select,
                resize_enabled: false,
                height: height,
                model: this.config.model,
                contentsCss: 'contents.css'
            });
			this._waitEditor.resolve(this._3rd_editor);
		}, this);
		this._init_ckeditor_once = function(){};
	},

But no css will be loaded or accepted … or will give information that this css can’t be found or something… I’m at a loss…

Michael