7

Google Chrome を使用しています。

非常に小さな HTML エディターが必要で、Simple Editを見つけました。私のニーズに合わせて、非常に小さなエディターです。ただし... Content Editable を使用しているこのエディターや他の多くのエディターには、共通の問題が 1 つあります。

問題

リストを作成した後 (最後のリスト項目で Enter キーを 2 回押す)、新しい div を作成します。私に期待されるのは、新しい段落タグを作成することです。

リンク

質問

div を防止し、代わりにリストの後に段落タグを追加する正しい方法は何ですか?

4

5 に答える 5

5

Bryan Allo が投稿した回答では、カーソルを div の最後に配置する必要があることを考慮していませんでした。そうしないと、すべての置換アクションで、ユーザーは CTRL-End を押す必要があります。

これは私が提案するソリューションであり、 http://jsfiddle.net/82dS6/で実際に見られるようになっています:

function setEndOfContenteditable(contentEditableElement){
    // Taken from http://stackoverflow.com/a/3866442/1601088
    var range,selection;
    if(document.createRange){//Firefox, Chrome, Opera, Safari, IE 9+
        range = document.createRange();
        range.selectNodeContents(contentEditableElement);
        range.collapse(false);
        selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }
    else if(document.selection){//IE 8 and lower
        range = document.body.createTextRange();
        range.moveToElementText(contentEditableElement);
        range.collapse(false);
        range.select();
    }
}

function replaceDivWithP(el){

    $(el).find('div').each(function(){
        $(this).replaceWith($('<p>' + $(this).html() + '</p>'));
    });
}

$(function(){
    $(".text").simpleEdit();
});

$('.textarea').bind('keyup', function(){
    replaceDivWithP(this);
    setEndOfContenteditable(this);
});


​
于 2012-10-27T20:52:44.403 に答える
1

すべてのイベントでオンザフライで処理する代わりに、後処理をkeyup検討できます。

$('.textarea').bind('blur', function(){
    $('.textarea div').contents().unwrap().wrap('<p/>');
});

フィドル： http： //jsfiddle.net/thNUS/4/

于 2012-10-29T19:45:29.953 に答える
0

以前の回答では、keyupまたはblurベースのソリューションが提案されました。これclickは、リスト ボタンのイベントを使用して、関数呼び出しの量を最小限に抑えます。

http://jsfiddle.net/9ZAL7/ :

function replaceDivWithP(el){

    $(el).find('div').each(function(){
        $(this).replaceWith($('<p>' + $(this).html() + '</p>'));
    });
}

$(function(){
    $(".text").simpleEdit();
});

$('button.list').bind('click', function(){
    replaceDivWithP($('.textarea'));
});
​
于 2012-10-29T22:01:33.483 に答える
0

簡単な解決策は、DIV を P に置き換えることです。これをコンテンツの編集可能な DIV 内に配置します。

onkeyup="this.innerHTML=this.innerHTML.replace('div','p')"

それが役に立てば幸い。幸運を。

于 2012-10-19T19:35:28.817 に答える
0

私が思いついた最善の方法は、互換性の問題があるformatblockを使用することでした。基本的に、次のように別のリンクを追加できます。

textcontainer.prepend("<button class='paragraph'>p</button>");

...

$(".paragraph").live("click", function(){
    document.execCommand('formatblock', false, "p");
});

これにより、ユーザーは段落タグを挿入することができます。ただし、そのタグから抜け出すのは少し難しいので、ユーザビリティの問題もあります。提供されたデモでそれを試すことができます:

デモ: http://jsbin.com/ovexiz/1
ソース: http://jsbin.com/ovexiz/1/edit

*段落は緑色のテキストでスタイル設定されていることに注意してください。

于 2012-10-29T20:41:34.723 に答える