1

自分でテキストエディタを作りたいのですが。私は他のいくつかの定評のあるエディターの例に従い、隠されたコンボ<textarea>と目に見える<iframe>コンボを使用しようとしています。

キー入力の最初のステップで問題が発生しました<iframe>。execCommandをコンテンツ編集可能で動作させて <div>、たとえばテキストを太字にすることができますが、で同じことを行うのに問題があり<iframe>ます。

これが私のHTMLです：

<html>
<button type="button" class="btn btn-bold">bold</button>
<textarea id="input" name="input" style="display: none;">Start typing..</textarea>
<iframe frameborder="0" src="javascript:true;" style="">  </iframe>
</html>

これが私のJavaScriptです：

    $(function() {
        var currentBtn;
        $("#input").focus(function() {
            currentBtn = this;
        });
        $(".btn").on( 'click', '.btn-bold', function(){
            var $this=$(this);
            if($this.hasClass("btn-bold")){ document.execCommand('bold', false, null);}
            $(currentBtn).contents().focus();
        });
    });

親ドキュメントではなくiframeドキュメントでexecCommandを実行する必要があることはわかっていますが、これを行う方法がわかりません。現在、このコードではiframeをキーアップできないため、太字のボタンの効果をテストできません。

どんな考えでも大歓迎です！

4

2 に答える 2

2

Rangyを使用<b>して、選択範囲を太字で囲みます。この方法で他のタスクを実行することもできます。

デモ: http://rangy.googlecode.com/svn-history/r511/trunk/demos/core.html

編集

iframe編集可能にする方法:

window.frames[0].document.getElementsByTagName("body")[0].contentEditable = true;​
于 2012-04-14T17:59:59.733 に答える