0

我在经典模式（Iframe）下使用 CKEditor 4.5 和共享空间插件。

ckeditor4 自动创建一个div(#cke_mytextarea1) 就在每个下方textarea和内部div， aiframe也被创建。

css为此div也会自动创建。

如何使用 ckeditor API附加一个css类？div

我尝试使用contentsCss配置http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss 但css应用于 iframe 而不是div

例子：

从这段代码：

<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>

在我启动 ckeditor 实例后，生成以下代码：

<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>

此处的完整示例代码预览：http: //jsfiddle.net/luzfcb/ymoc2r1w/2/

下面相同的代码：

<!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>
4

1 回答 1

0

您是在 Django 中使用它还是直接作为 JS 组件使用它？因为我将 CKEditor 与 Django 一起使用（django-ckeditor==4.5.1）并且它运行良好。

如果您的案例使用的是 Django，请联系我，我可以提供更多详细信息，到目前为止它是如何工作的。

于 2015-11-20T02:49:06.927 回答