0

多くのckeditorインスタンスが1つのページで動的に生成され、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ドキュメントで見つからなかったことを意味します。誰かが、iframeに割り当てられたIDを使用して取得できるように、ckeditorのiframeにIDを割り当てる方法について教えてもらえますか？

ありがとう。

4

1 に答える 1

0

<body>各インスタンスの HTML に ID を割り当て、それを使用してコンテンツ ブロックを取得できます。

複数のインスタンスを作成しているため、CKEDITOR.replaceAll().

インスタンスの作成時に、各コンテンツ本文に ID を割り当てることができます。<body>IDに「body」を追加してIDを作成してい<textarea>ます。

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" 関数で、インスタンス名 (テキストエリア ID と同じ) を取得し、それに "body" を追加します。これにより、スペル チェックするテキストを含むコンテンツ エリアの ID が得られます。

で iFrame ドキュメントを取得できます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 コード ( ) が含まれています。変数には、iframe の ID が含まれます<head> and <body>。assignedId

スペル チェックを行うには、要素の内容が必要なように思われるので、配列が作成される直前にメソッド<body>の例を含めました。ボディのIDを設定する方法の例も含めました。getBody()fieldsToCheck

于 2012-07-20T10:04:33.167 に答える