ckeditor4 - Append css class to first generated DIV on IFrame mode using ckeditor API

Question

I am using CKEditor 4.5 in classic mode (Iframe) with sharedspace plugin.

ckeditor4 automatically create a div (#cke_mytextarea1) just below each textarea and inside that div, a iframe is created too.

The css for this div is also created automatically.

How do i append a css class to div, using ckeditor API?

I try use contentsCss configuration http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss but the css is applied on iframe and not div

Example:

From this code:

<form id="myform" method="post">
    <textarea id="mytextarea1" data-ckenable="true"></textarea>
    <textarea id="mytextarea2" data-ckenable="true"></textarea>
    <textarea id="mytextarea3" data-ckenable="true"></textarea>
</form>

and after i start ckeditor instances, result in this generated code:

<form id="myform" method="post">
    <textarea id="mytextarea1" data-ckenable="true" style="visibility: hidden; display: none;"></textarea>

    <!-- i need append css class to this ("#cke_mytextarea1") div using ckeditor API -->

    <div id="cke_mytextarea1" class="cke_1 cke cke_reset cke_chrome cke_editor_mytextarea1 cke_ltr cke_browser_webkit"
         dir="ltr" lang="pt-br" role="application" aria-labelledby="cke_mytextarea1_arialbl"><span
            id="cke_mytextarea1_arialbl" class="cke_voice_label">Editor de Rich Text, mytextarea1</span>

        <div class="cke_inner cke_reset" role="presentation">
            <div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 200px;"><span
                    id="cke_101" class="cke_voice_label">Pressione ALT+0 para ajuda</span>
                <iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" title="Editor de Rich Text, mytextarea1"
                        aria-describedby="cke_101" tabindex="0" allowtransparency="true"
                        style="width: 100%; height: 100%;"></iframe>
            </div>
        </div>
    </div>

<!-- ... -->
</form>

Full sample code preview here: http://jsfiddle.net/luzfcb/ymoc2r1w/2/

Same code below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
          rel="stylesheet">

    <link type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-loading-bar.css"
          rel="stylesheet">


    <style>
        .body {
            background: rgb(204, 204, 204);
        }

        .maindiv {
            /*
            the content is hidden by default,
            and will be shown only after
            completed page load and
            finalized ckeditor startup
            */
            display: none;
        }

        .content-section {
            margin-bottom: 100px;
        }

        article {
            background: white;
            width: 21cm;
            height: 29.7cm;
            display: block;
            margin: 0 auto 0.5cm;
            box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
            padding: 30px;
            font-size: 11pt;
            line-height: 22pt;
        }

        article form {
            height: 100%;
        }

        @media print {
            body, article[size="A4"] {
                margin: 0;
                box-shadow: 0;
                background: transparent;
            }

            .cke_pagebreak {
                display: block;
                page-break-before: always;
            }

            .content-section {
                margin-bottom: 0;
                padding-top: 0;
            }

            .no-print {
                display: none;
            }

        }


    </style>
</head>

<body class="body">

<div class="maindiv">
    <div id="top-bar" class="navbar-fixed-top no-print">
        <div id="top-ck-toolbar">
            <!-- ckeditor top toolbar is rendered here -->
        </div>
    </div>

    <div id="content-section" class="content-section">
        <article>

            <form id="myform" method="post">
                <textarea id="mytextarea1" data-ckenable="true"></textarea>
                <textarea id="mytextarea2" data-ckenable="true"></textarea>
                <textarea id="mytextarea3" data-ckenable="true"></textarea>
            </form>

        </article>
    </div>

    <div id="bottom-bar" class="navbar-fixed-bottom no-print">
        <div id="bottom-ck-toolbar">
            <!-- ckeditor bottom toolbar is rendered here -->
        </div>
    </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.2/full-all/ckeditor.js"></script>

<script>

    //get the id's of elements that contains "data-ckenable" attribute
    function get_ckenable_element_ids() {
        return $("[data-ckenable]").map(function () {
            return this.id;
        }).get();
    }

    var ckenable_element_ids_list = get_ckenable_element_ids();

    var ckeditor_config = {
        extraPlugins: [
            "sharedspace",

        ].join(),
        sharedSpaces: {
            top: "top-ck-toolbar",
            bottom: "bottom-ck-toolbar"
        }
    };

    //start ckeditor
    ckenable_element_ids_list.map(function (id_element) {
        CKEDITOR.replace(id_element, ckeditor_config);
    });


    function fix_content_padding() {
        var top_menu = $('#top-ck-toolbar');
        var content_div = $('#content-section');
        var current_top_menu_height = parseInt(top_menu.css('height').replace(/[^-\d\.]/g, ''));
        var new_padding_value_to_content = "".concat(current_top_menu_height + 130).concat("px");
        content_div.css('padding-top', new_padding_value_to_content);
        console.log("fixxxx: ", new_padding_value_to_content);
    }

    window.addEventListener('resize.fix_content_padding', fix_content_padding, false);

    var paceOptions = {
        "ajax": false,
        "restartOnRequestAfter": false,
        "document": false
    };

    window.paceOptions = paceOptions;
    Pace.on('hide', function () {

        $(".maindiv").fadeIn("fast");
        fix_content_padding();
    });

</script>
</body>
</html>

I'm afraid that your question is a bit too complex. Too many things happen in the code that you pasted and there's no relation to the question that you asked. Please try to reformat your question. — Reinmar

Roger Camargo Roger Camargo · Accepted Answer · 2015-11-20T02:49:06

Are you using it with Django or directly as JS component? Because I use CKEditor with Django (django-ckeditor==4.5.1) and it's working very well.

Ping me if your case is using Django and I could give more details how it's working so far.

ckeditor4 - Append css class to first generated DIV on IFrame mode using ckeditor API

1 Answers