HTML5コンテンツリスト後の編集可能な段落

Question

Google Chromeを使用しています。

非常に小さなHTMLエディタが必要です。Simple Editが見つかりました。私の必要性のための非常に小さなエディタ。ただし、これと他の多くの編集者がコンテンツ編集可能なものに共通の問題が1つあります。

問題

（最後のリスト項目を2回入力ヒット）のリストを作成した後、それは新しいdiv要素を作成します。私には、新しい段落タグを作成することが期待されます。

リンク

• ここエディタを試してみてください：https://github.com/mlabod/simple-edit/blob/master/editor.jquery.js

質問

：小さなソースコードを http://files.inlovewithcss.com/simple-edit/

ルック

divを防ぐ正しい方法は何ですか？リストの後ろに段落タグを追加しますか？

Answer 1

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); 
}); 


​ 

Answer 2

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

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

希望します。がんばろう。

Answer 3

代わりの処理オンザフライ、あなたが考えることができ、すべてのkeyupイベントと後処理：

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

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

Answer 4

formatblock which has compatibility issuesを使用していたと、私が思い付くことが最高。基本的にはそうのような別のリンクを追加することができます。

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

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

Answer 5

以前の回答は、keyupまたはblurベースのソリューションを提案しました。

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')); 
}); 
​