How to change CKEditor position?

Question

I have a new page design where CKEditor4's textarea (inside a div editor) is positioned beside of a left vertical panel (div panel). When user click "close panel", the panel collapses and all content of div editor goes to left, except the textarea.

I need a CKEditor4 method (or function) that sets a value for the position (relative or absolute) in the X space of the browser, in runtime (not only config). It is similar to the editor.resize() method, but I not see any "editor.reposition()" method... It exists? There are some workaround (ex. using jQuery)?

As reference, the CSS that changes in the configuration about panel...

When HTML starts with a "closed panel",

  div.editor  {padding-left:0; }

When HTML starts with a "opened panel",

  div.editor {padding-left:240px;}

Similar question: resize CKEditor4 by windows.resize events

Images: without and with left panel.

enter image description here

Do you happen to have a working example somewhere we could see? It's a little hard to duplicate. — Joel Peltonen, May 09 '14 at 12:55
If you really want an answer, you should provide your code. Usually that process of creating a minimal example is enough to find the problem yourself. — AlfonsoML, May 12 '14 at 21:05
Yes, sorry, the page where I put CKEditor was with more things, causing a bug, was not CKEditor... It is correct to delete this question, but no permission... Perhaps discussion is a good example for CKEditor-primers. — Peter Krauss, Jul 06 '14 at 10:11

score 1 · Accepted Answer · answered May 14 '14 at 09:58

I don't know how is your layout defined, but I did build a layout with a main container (#container) div with a left panel (#leftpanel) and right panel with an editor (#editor), I am using .hide() and .show() methods from JQuery to hide and show the #leftpanel (you can use JQuery .toggle() method to expand and collapse the left panel or whatever you want, .slideUp()... etc) and the #editor div and the content (ckeditor) is always resized as expected

A quick example using .toggle():

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ckeditor.com/apps/ckeditor/4.4.0/ckeditor.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ckeditor.com/apps/ckeditor/4.4.0/skins/moono/editor_gecko.css?t=E3OD"></link>
    <script>
        var editor;
        CKEDITOR.on( 'instanceReady', function( ev ) {
            editor = ev.editor;
        });
    </script>
</head>
<body>
    <div id="container">
        <div id="leftpanel" style="margin-right: 1px; border: 1px solid black; float: left; width: 30%; position: relative; display: block; height: 305px;">
            <p>Left panel</p>
        </div>
        <div id="editor" style="position: relative; overflow: auto;">
          <form>
            <textarea class="ckeditor" id="editor1"></textarea>
          </form>
        </div>
        <input id="hide" type="button" value="hide"/>
        <input id="show" type="button" value="show"/>  
    </div>
    <script>
        $("#hide").click(function(){
          $("#leftpanel").toggle("slow");
        });

        $("#show").click(function(){
            $("#leftpanel").toggle("slow");
        }); 
    </script>
</body>
</html>

I don't know if this is what you need but hope this helps.

How to change CKEditor position?

1 Answers1