Opened 4 years ago

Last modified 4 years ago

#13967 confirmed Bug

sharedspace create div's with duplicated ids

Reported by: Fabio C. Barrionuevo Owned by:
Priority: Normal Milestone:
Component: General Version: 4.1
Keywords: Cc:

Description

Steps to reproduce

I suppose it's good practice not create duplicate ids in an html document, but ckeditor 4.5.5 + sharedspace is doing just that.

the following html demonstrate the error:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="top-ck-toolbar">
    <!-- ckeditor top toolbar is rendered here -->
</div>
<div id="bottom-ck-toolbar" style="position: fixed;bottom: 0;width: 100%;">
    <!-- ckeditor bottom toolbar is rendered here -->
</div>

<div id="content-ck">
    <textarea id="mytextarea"></textarea>
    <!-- ckeditor editable area is rendered below -->
</div>

<script src="http://cdn.ckeditor.com/4.5.5/full-all/ckeditor.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    var ckeditor_config = {
        extraPlugins: [
            "sharedspace",

        ].join(),
        sharedSpaces: {
            top: "top-ck-toolbar",
            bottom: "bottom-ck-toolbar"
        },
        on: { // execute after ckeditor full load
            instanceReady: function (evt) {
                //by default, ckeditor create a div with the id is named "cke_" + ID_OF_TEXT_AREA

                var elements_with_same_id = $('[id="cke_mytextarea"]');

                $(elements_with_same_id[0]).css({border: '3px solid rgb(183, 172, 19)' });
                $(elements_with_same_id[1]).css({border: '3px solid rgb(43, 183, 19)' });
                $(elements_with_same_id[2]).css({border: '3px solid rgb(183, 19, 19)' });
                alert("number of duplicated elements with 'cke_mytextarea' id: "+ elements_with_same_id.length);

            }
        }
    };


    //start ckeditor
    CKEDITOR.replace("mytextarea", ckeditor_config);


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

Expected result

No generate duplicate ids.

I would suggest that ckeditor "top toolbar" and "button toolbar" should be id prefixed, respectively, "cke_toolbar_top" and "cke_toolbar_button".

Then, in case I have a textarea with id "mytextarea", the generated id to "top toolbar" and "button toolbar" is respectively, cke_toolbar_top_mytextarea" and "cke_toolbar_button_mytextarea".

Change History (2)

comment:1 Changed 4 years ago by Fabio C. Barrionuevo

this is related issue #10436, but my problem is different.

  • in the case of #10436, the id already exists in the DOM and ckeditor generete a new element with the same id.
  • in my case, there is no element with id duplicated in the DOM, but ckeditor shared space will create "top toolbar", "button toolbar" and div container of editable area with the same id

comment:2 Changed 4 years ago by Jakub Ś

Status: newconfirmed
Version: 4.5.54.1

I was able to reproduce this problem from CKEditor 4.1 in every browser (tested also without jQuery).

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy