5

ユーザーがリスト（UL）を編集できるようにしようとしています。私の試みでは、contenteditableは特別なことは何もしていないようです（舞台裏のマークアップを強制するなど）。ユーザーにinnerHTMLへのウィンドウを提供するだけです。

これにより、LIがまだ存在せず、ユーザーが何かを追加しても、LI化されないという問題が発生します。同様に、リストアイテムがあるが、ユーザーがそれらを削除すると、LIが削除され、LIなしで新しいテキストが追加されます。http://jsfiddle.net/JTWSC/を参照してください。また、カーソルが存在するLIの「外に出る」可能性があることもわかりましたが、一貫して再現することはできません。

コードを含める必要があるため、「結果」は次のようになります。

<ul>whatever the user typed in</ul>

これを修正するにはどうすればよいですか？htmlをチェックして必要に応じてラップする$（'ul'）。keyup（）ハンドラーのパスから始めましたが、タイミング、要​​素へのフォーカスの喪失、再フォーカスの必要性など、いくつかの落とし穴に遭遇していました。適切な場所など。私がそれで働いていればそれは可能だと確信していますが、私はもっと簡単な解決策を望んでいます。

4

1 に答える 1

7

コンテンツを編集可能な<UL>のばかげた証拠にするために、次のキーアップ/ダウンハンドラーを作成しました。*

それは2つのことをします：

  1. <UL>が空の場合、<LI>を<UL>に追加します。SO（Tim Downから）で見つけたコードを使用して、予想される場所にキャレットを配置します
  2. すべての非LI/非BRタグをクリーンアップします。これは基本的に、手っ取り早いペーストクリーナーです。

これは、jqueryとDOM操作の快適さのレベルを押し上げているので、おそらく私がもっとうまくできることがいくつかありますが、それはそのままでかなりうまく機能します。

//keyup prevented the user from deleting the bullet (by adding one back right after delete), but didn't add in li's on empty ul's, thus keydown added to check
$('ul').on('keyup keydown', function() {
  var $this = $(this);
    if (! $this.html()) {
        var $li = $('&lt;li&gt;&lt;/li&gt;');
        var sel = window.getSelection();
       var range = sel.getRangeAt(0);
        range.collapse(false);
        range.insertNode($li.get(0));
        range = range.cloneRange();
        range.selectNodeContents($li.get(0));
        range.collapse(false);
        sel.removeAllRanges();
        sel.addRange(range);

    } else {
        //are there any tags that AREN'T LIs?
        //this should only occur on a paste
        var $nonLI = $this.find(':not(li, br)');

        if ($nonLI.length) {
            $this.contents().replaceWith(function() {
    //we create a fake div, add the text, then get the html in order to strip out html code. we then clean up a bit by replacing nbsp's with real spaces
return '&lt;li&gt;' + $('&lt;div /&gt;').text($(this).text()).html().replace(/&nbsp;/g, ' ') + '</li>';
            });
            //we could make this better by putting the caret at the end of the last LI, or something similar
        }                   
    }
});

http://jsfiddle.net/aVuEk/5/のjsfiddle

*私は、トレーニングがすべての場合において最良/最も簡単な解決策であるという、Diodeusに敬意を表して同意しません。私の状況では、ページ上にコンテンツ編集可能な<UL>がいくつかあります。これらは非常にインラインのWYSIWYGであり（つまり、tinymceスタイルのクロムの余地はあまりありません）、カジュアルで初めての上級者以外のユーザーが使用します。

于 2012-11-14T01:01:16.963 に答える