add style for class in ckeditor

Question

Hi i created plugin for CKEDITOR. I want make a notice box. When user click to add notice-box button and fill forms. plugin create these source code:

<div class="notice-box">
    <i class="icon-info">info</i>
    <span class="notice-box__info">Lorem ipsum.... </span>
</div>

It all works fine. but now i want add some style for that. Styles for ckeditor level not for production. How can i add style for these classes for the CKeditor?

Answer 1

Plugins and widgets can add their own stylesheet. For example:

CKEDITOR.plugins.add( 'example', {
    init: function( editor ) {
        var pluginDirectory = this.path;
        editor.addContentsCss( pluginDirectory + 'styles/example.css' );
    }
} );

See the documentation here .