13

次の問題があります。blockquoteinを追加したらcontenteditable、Enter キーを押すと、新しい行に移動し、別のblockquote要素が追加されます。それは永遠に続き、フォーマットから逃れることはできません。望ましい機能は、順序付けられていないリストの機能です。Enter キーを押すと、新しい空の<li>要素が追加されますが、もう一度 Enter キーを押すと、書式設定がエスケープされ、以前に作成された要素が削除され<li><p>.

デモをご覧ください: http://jsfiddle.net/wa9pM/

私が見つけた 1 つのハック<p>blockquoteblockquote. しかし、JavaScript でこのフォーマット動作を壊す方法はありますか? 確認方法がわかりません。カーソルがどこにあるか、それが行末であり、それが引用符であり、Enter キーを押した場合は、新しい を追加しないでくださいblockquote

このコードを使用してblockquote、JS でa を生成しています。

document.execCommand('formatBlock', false, 'blockquote');
4

3 に答える 3

8

iOS アプリケーション用のリッチ テキスト エディターを作成しているときに、同じ問題に直面しました。<blockquote>テキスト フィールドにタグを挿入してを押すたびEnterに、ブロック引用符を取り除くことができませんでした。

少し調べたところ、実用的な解決策が見つかりました。

内部 HTML タグの検索:

function whichTag(tagName){

    var sel, containerNode;
    var tagFound = false;

    tagName = tagName.toUpperCase();

    if (window.getSelection) {

        sel = window.getSelection();

        if (sel.rangeCount > 0) {
            containerNode = sel.getRangeAt(0).commonAncestorContainer;
        }

     }else if( (sel = document.selection) && sel.type != "Control" ) {

         containerNode = sel.createRange().parentElement();

     }

     while (containerNode) {

         if (containerNode.nodeType == 1 && containerNode.tagName == tagName) {

             tagFound = true;
             containerNode = null;

         }else{

             containerNode = containerNode.parentNode;

         }

     }

     return tagFound;
 }

block-quote タグの出現を確認しています。

function checkBlockquote(){

    var input = document.getElementById('text_field_id');

    input.onkeydown = function() {

        var key = event.keyCode || event.charCode;

        if( key == 13){

            if (whichTag("blockquote")){

                document.execCommand('InsertParagraph');
                document.execCommand('Outdent');

            }

        }

    };

}

キーダウン イベントのトリガー:

<body onLoad="checkBlockquote();">
<!-- stuff... -->
</body>

上記のコードは、ニーズに合わせて簡単に調整できると思います。さらにサポートが必要な場合は、お気軽にお問い合わせください。

于 2013-04-20T02:12:17.993 に答える