Jquery steps plugins conflict with CKeditor RTE plugins

Question

Hi guys I am using this http://www.jquery-steps.com/Examples as my wizard form plugins.

I notice that it has a conflict with Ckeditor plugin with an error of Uncaught TypeError: Cannot read property 'unselectable' of null.

I just tried the solution on this post Ckeditor with jQuery form wizard but it doesn't fix the issue.

What is the best solution for this?

Answer 1

I guess you put the CKeditor right into the wizard HTML code. In that case what´s really important to understand is that jQuery Steps manipulates DOM objects. That´s really bad for javascript code in general.

To run javascript controls within jQuery Steps you have to ensure that:

1. no javascript code goes inside your wizard HTML
2. first jQuery Steps code executes and then the javascript code that belongs to the HTML inside the wizard HTML

Good example:

<script>
    $(function ()
    {
        // first jQuery Steps
        $("#wizard").steps();
        // then components inside jQuery Steps
        $("#editor").ckeditor();
    });
</script>
<div id="wizard">
    <h1>Title</h1>
    <div>
        <div id="editor"></div>
    </div>
</div>

Bad example:

<script>
    $(function ()
    {
        $("#wizard").steps();
    });
</script>
<div id="wizard">
    <h1>Title</h1>
    <div>
        <script>
            $(function ()
            {
                $("#editor").ckeditor();
            });
        </script>
        <div id="editor"></div>
    </div>
</div>

Cheers, Rafael