How to use built-in CKEditor in iframe?

Question

I am trying to use the built-in CKEditor for div content ads that are in an iframe. I found a way that works basically like this:

Javascript

var myFrame = Document.getElementById('myIframeId');
var contenteditableElement = myFrame.contentWindow.document.getElementById('editorDivId')
CKEDITOR.inline(contenteditableElement);

But there are two drawbacks:

• The initial position of the toolbar is incorrect.
• The toolbar does not respond to iframe scroll events. It remains fixed in the starting position.

I created a violin to demonstrate unwanted behavior .

Here you can compare how the behavior of the toolbar should look: http://ckeditor.com/demo#inline

Is there anything I can do to improve toolbar positioning?

Answer 1

:

    //The inline editor should be enabled on an element with "contenteditable" attribute set to "true".
    //Otherwise CKEditor will start in read-only mode.

    $("#html_template").bind('load', function() {
        function loadScript(url, callback)
        {
            // Adding the script tag to the head as suggested before
            var head = this.getElementsByTagName('head')[0];
            var script = this.createElement('script');
            script.type = 'text/javascript';
            script.src = url;

            // Then bind the event to the callback function.
            // There are several events for cross browser compatibility.
            script.onreadystatechange = callback;
            script.onload = callback;

            // Fire the loading
            head.appendChild(script);
        }

       function e(){
        var alleditableElement = this.getElementsByClassName("editable");

        $(alleditableElement).each(function(i,v){

            v.setAttribute( 'contenteditable', true );

            document.getElementById('html_template').contentWindow.CKEDITOR.inline(v,{ toolbar : [ { name: 'basicstyles', items : [ 'Bold','Italic'] }, { name: 'paragraph', items : [ 'NumberedList','BulletedList' ] } ] });

        });
        };
        var iframedoc=document.getElementById('html_template').contentWindow.document;
        iframedoc.loadScript=loadScript;
        iframedoc.e=e;
        iframedoc.loadScript('http://cdn.ckeditor.com/4.4.6/standard-all/ckeditor.js',function(){iframedoc.e()});
    });

.