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

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

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

1 个答案: