ckeditor

This webpackage contains components that wraps CKEditor.

Docs

The generated documentation for this webpackage and its artifacts is available here.

Artifacts of the webpackage

Name	Type	Description	Links
cubx-ckeditor	Elementary component	Wrap the CKEditor, it should be configurated using the config slot, otherwise it would not work	Demo, Docs
cubx-ckeditor-basic	Compound component	Compound to make use of the basic package of ckeditor	Demo, Docs
cubx-ckeditor-standard	Compound component	Compound to make use of the standard package of ckeditor	Demo, Docs
cubx-ckeditor-full	Compound component	Compound to make use of the full package of ckeditor	Demo, Docs
cubx-ckeditor-util	Compound component	Utility to provide the CKEditor v 4.6.1 within the Cubbles platform

Use of components

The html file should contain the desire component using its tag, e.g. the <cubx-ckeditor>, as follows:

<cubx-ckeditor cubx-webpackage-id="ckeditor@1.0.0"></cubx-ckeditor>

Note that the webpackageId should be provided, which in this case is: ckeditor@1.0.0

Additionally, this component can be initialized using the <cubx-core-slot-init> tag (available from cubx.core.rte version 1.9.0). For example, lets initilize the config slot to get the basic package of ckeditor:

<cubx-ckeditor cubx-webpackage-id="ckeditor@1.0.0">
        <!--Initilization-->
        <cubx-core-init>
                <cubx-core-slot-init slot="config">{"toolbar": [{ "name": "basicstyles", "items": [ "Bold", "Italic", "Underline", "Strike", "Subscript", "Superscript", "-", "CopyFormatting", "RemoveFormat" ] }]}</cubx-core-slot-init>
        </cubx-core-init>
</cubx-ckeditor>

Or it can be initialized and later manipulated from Javascript as follows:

var ckeditor= document.querySelector('cubx-editor');

// Wait until CIF is ready
document.addEventListener('cifReady', function() {
	// Manipulate slots
	ckeditor.setConfig({"toolbar": [{ "name": "basicstyles", "items": [ "Bold", "Italic", "Underline", "Strike", "Subscript",     "Superscript", "-", "CopyFormatting", "RemoveFormat" ] }]});
});

You may also like to check CKEditor official documentation.

Want to get to know the Cubbles Platform?