9

Cleditorテキストボックスのコンテンツを.などの外部HTML要素で表示する方法に関する以前のStackoverflowの質問をフォローアップしようとしています<p>。これが、FirefoxやIEではなくWebkitブラウザでの私の問題を解決する質問とフィドルです。

フィドルのコードは次のとおりです。

<textarea id="input" name="input"></textarea>
<p id="x"></p>  

<script>
  $("#input").cleditor();

  $(".cleditorMain iframe").contents().find('body').bind('keyup',function(){
    var v = $(this).text(); // or .html() if desired
    $('#x').html(v);
  });
</script>

「window.top....を使用してメインページにアクセスし、.contents（）がすべてのブラウザでサポートされているわけではないため、その方法で渡す必要がある」というjqueryからのiframeのコンテンツの取得を読みましたが、そうではありません。この目的のためにwindow.topを使用する方法を確認し、誰かがこのトピックに光を当てることができるかもしれないことを望んでいます。

4

2 に答える 2

13

cleditorのドキュメントには、「keyup」イベントで機能すると主張する「change」イベントがあると記載されていますが、残念ながら、私のテストではFirefox 7では期待どおりに機能しませんでした（テキストエディタをクリックする必要があります） 。

Jsfiddle： http: //jsfiddle.net/qm4G6/27/

コード：

var cledit = $("#input").cleditor()[0];

cledit.change(function(){
    var v = this.$area.context.value;
    $('#x').html(v);
});

同じことについて尋ねた別のStackOverflowの質問もあります。この質問では、ユーザーLingがプラグインを変更して独自の関数を追加することを提案しています 。jqueryCLEditorからコンテンツを取得する

編集：上記のSO質問結果が機能しないというコメントに基づいて、以下のコードを修正しました。これは、IE9およびIE9の「IE8」開発者モードで機能します。http://jsfiddle.net/qm4G6/80/

$(document).ready(function(){

 var cledit = $("#inputcledit").cleditor()[0];
 $(cledit.$frame[0]).attr("id","cleditCool");

var cleditFrame;
if(!document.frames)
{
   cleditFrame = $("#cleditCool")[0].contentWindow.document;
}
else
{
    cleditFrame = document.frames["cleditCool"].document;
}

$( cleditFrame ).bind('keyup', function(){
    var v = $(this).text(); 
    $('#x').html(v);
});

});

別の編集：HTMLを取得するには、iframe内でのような本文を見つける必要があります$(this).find("body").html()。以下のコードを参照してください。JSFiddle： http: //jsfiddle.net/qm4G6/84/

var cledit = $("#inputcledit").cleditor()[0];
$(cledit.$frame[0]).attr("id","cleditCool");

var cleditFrame;
if(!document.frames)
{
   cleditFrame = $("#cleditCool")[0].contentWindow.document;
}
else
{
    cleditFrame = document.frames["cleditCool"].document;
}

$( cleditFrame ).bind('keyup', function(){
        var v = $(this).find("body").html();
        $('#x').html(v);
});

$("div.cleditorToolbar, .cleditorPopup div").bind("click",function(){
      var v = $( cleditFrame ).find("body").html();
      $('#x').html(v);
});
于 2011-10-23T04:42:44.393 に答える
0

私はあなたにこれを促した質問に答えたので、私もこれに答えると思います;）

これはChromeとFirefoxで機能します（私はIEにアクセスできません）：

$("#input").cleditor();

$( $(".cleditorMain iframe")[0].contentWindow.document ).bind('keyup', function(){
    var v = $(this).text(); // or .html() if desired
    $('#x').html(v);
});

jsFiddleを更新しました

アップデート

これはChromeとFirefoxでも機能します。たぶんIEも？

$("#input").cleditor();

$( $(".cleditorMain iframe")[0].contentDocument ).bind('keyup', function(){
    var v = $(this).text(); // or .html() if desired
    $('#x').html(v);
});

jsFiddle

于 2011-10-23T04:33:59.967 に答える