0

我在一个页面中动态生成了许多 ckeditor 实例，并且在 ckeditor 的 instanceReady 函数中，我获取了每个 ckeditor 的实例，并从那里获得了我分配 id 的 iFrame 引用。现在，当我说 iFrameDocument.getElementById(assignedIframeId) 时分配了一个 id 后，我无法找到 iFrame。这是我的代码：

<html>
<body>
    <!-- This is the template. The div tag with class="contents" will be replaced with CKEditor -->
    <script type="text/html" id="PS_ItemViewModel-template">
        <div id="mgrComments" class="document comment-region">
            <div class="contents" data-bind="html : mgrComments"></div>
        </div>
    </script>
            <!-- looping the template based on the number of items -->
            <div class="ps-item-container" data-bind="foreach : psItems">
       <div data-bind="template : {'name' : 'PS_ItemViewModel-template'}, event 
:   {psItemSetupEditor : _setupEditor, psItemRefreshEditor : _refreshEditor}"></div>                                                    
             </div>
</body>
</html>

// In the javascript file ...
    self._setupEditor = function(data, event){
    var domNode = event.currentTarget;
    self.editor = self._injectEditorInstance($(domNode).find('div#mgrComments   div.contents'), self.mgrComments, self.headerNode, self.criterionNodes);
}

self._injectEditorInstance = function(commentNode, initialText, headerNode, criterionNodes) {
    $('div#editor-toolbar').show();

    commentNode.ckeditor(function(){
        console.log("Inside commentNode.ckeditor ...");
        var editor = this;

        this.setData(initialText, function(){
            //Handles direct changes to editor contents
            editor.on('setData', function() {
                self.editorChangeHandler(editor);
            });

            //Handles paste
            editor.on('paste', function() {
                console.log("In paste event ...");
                self.editorChangeHandler(editor);
            });
        });
    }, {customConfig : '/simple_eval/js/ckeditor/SimpleEvalEditorConfig.js'});

    return commentNode.ckeditorGet();   
};

$(document).ready(function() {  


CKEDITOR.on("instanceReady", function(e) {
    console.log("In instanceReady ...................................");
    var assignedId  =   e.editor.name + "jspell";
    $("#cke_contents_" + e.editor.name+" iframe").attr("id", assignedId);
    var iframeDoc   =   null;
    $('#'+assignedId).each( 
                function(){ iframeDoc=this.contentWindow.document;}
                );
            console.log(" innerDoc Element = "+iframeDoc.getElementById(assignedId));
    fieldsToCheck[fieldsToCheck.length] = [iframeDoc, assignedId];
    jspellInit();
   });


});

var fieldsToCheck = new Array();
function getSpellCheckArray() { 
console.log("In getSpellCheckArray ...................................");
   return fieldsToCheck;
}

在上面的代码中，当我说 console.log(" innerDoc Element = "+iframeDoc.getElementById(assignedId)); 它打印出 null，这意味着在 iframe 文档中找不到该元素。有人可以建议我如何将 id 分配给 ckeditor 的 iframe，以便可以使用 iframe 分配的 id 来检索它。

谢谢。

4

1 回答 1

0

您可以为每个实例的 HTML 分配一个 ID，<body>并使用它来获取内容块。

因为您正在创建多个实例，所以我假设您正在使用CKEDITOR.replaceAll().

您可以在创建实例时为每个内容正文分配一个 ID。我通过在<body>ID 中添加“body”来创建<textarea>ID。

CKEDITOR.replaceAll( function(textarea, config) {    
  // Assume all textareas to be edited will have class "ckeditor"
  if (!(textarea.className=="testing")) {
    return false;
  }

  config.bodyId = textarea.id + 'body';
});

然后在“instanceReady”函数中，获取实例名称（与 textarea ID 相同）并为其添加“body”，这将为您提供包含要进行拼写检查的文本的内容区域的 ID。

您可以使用e.editor.document.

var fieldsToCheck;

CKEDITOR.on("instanceReady", function(e) {
  console.log(e.editor.name);
  console.log(e.editor.document);

  var assignedId = e.editor.name + "body";
  fieldsToCheck[fieldsToCheck.length] = [e.editor.document, assignedId];
});

如果需要在fieldsToCheck触发拼写检查时设置数组，可以循环遍历实例数组。

$("#test_button").click(function(){
  var fieldsToCheck;

  $.each(CKEDITOR.instances, function () {
    console.log(this.name);
    console.log(this.document);

    var assignedId = this.name + "body";
    fieldsToCheck[fieldsToCheck.length] = [this.document, assignedId];
  });
});

7月26日更新

我拿了你的文件准备部分并做了一些更改。我注释掉了我替换的项目，并将新版本放在注释掉的部分下方。正在为 iframe 分配 ID。我不知道为实例分配了哪些名称，但只要它们是唯一的，ID 就将是唯一的。

这可能不是很明显，但 CkEditoron.instanceReady方法会为每个创建的实例单独调用，因此您可能希望将jspellInit()函数调用移到函数之外，并在所有实例都添加到数组后instanceReady让它与数组一起工作。fieldsToCheck

我还添加了一些console.log()包含实际 CkEditor 对象的语句。如果需要更改某些内容，您可以查看可用的属性和方法。

请务必阅读最后的说明。

$(document).ready(function() {  
    var fieldsToCheck=new Array();
    var editorCount = 0;

    CKEDITOR.on("instanceReady", function(e) {
        console.log("In instanceReady ...................................");
        console.log(e);
        console.log(e.editor);

        var assignedId  =   e.editor.name + "jspell";

    //    $("#cke_contents_" + e.editor.name+" iframe").attr("id", assignedId);
        $("#cke_contents_" + e.editor.name+" iframe").context.activeElement.id = assignedId;

    //    var iframeDoc   =   null;    
        var iframeDoc = $('#'+assignedId)[0].contentDocument;

    //    $('#'+assignedId).each( 
    //        function(){ iframeDoc=this.contentWindow.document;}
    //    );


    //    This won't work, iframeDoc is inside the iFrame with id=assignedId
    //    console.log(" innerDoc Element = "+iframeDoc.getElementById(assignedId));
        console.log(iframeDoc);

        var editorBody = e.editor.document.getBody();
        editorBody.setAttribute("id", "TESTsetBODYid"+editorCount);
        console.log(editorBody);
        editorCount += 1;

        fieldsToCheck[fieldsToCheck.length] = [iframeDoc, assignedId];
        console.log(fieldsToCheck);
        jspellInit();
    });
});

笔记

我没有使用过 jSpell，所以我不确定您真正需要将什么放入fieldsToCheck数组中，但现在包含在 iframe 中找到iframeDoc的完整 HTML 代码 ( )。<head> and <body>该assignedId变量包含 iframe 的 ID。

在我看来，要进行拼写检查，您需要元素的内容，所以我在创建数组之前<body>包含了一个方法示例。我还提供了一个如何设置正文 ID 的示例。getBody()fieldsToCheck

于 2012-07-20T10:04:33.167 回答