javascript - 如何在 iframe 中正确使用内联 CKEditor？

Question

我正在尝试在位于 iframe 中的 contenteditable div 上使用内联 CKEditor。我找到了一种基本上像这样工作的方法:

JavaScript

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

但是有两个缺点:

• 工具栏初始位置错误。
• 工具栏不响应 iframe 的滚动事件。它保持固定在初始位置。

我创建了 a fiddle to demonstrate the unwanted behaviour .

在这里您可以比较工具栏定位的行为方式:http://ckeditor.com/demo#inline

我可以做些什么来改善工具栏的定位？

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()});
    });

在文档就绪时启动此代码。