HTML5 콘텐츠 수정 후 목록

Question

Google 크롬을 사용합니다.

아주 작은 HTML 편집기가 있어야하고 찾을 수는 Simple Edit입니다. 내 필요를위한 아주 작은 편집기. 그러나 ... Content Editable을 사용하는이 편집자와 다른 많은 편집자에게는 공통된 문제점이 하나 있습니다.

목록을 만든 후 문제

는 (마지막 목록 항목에 두 번 Enter 키를 누르십시오), 그것은 새로운 사업부를 작성합니다. 새로운 단락 태그를 만드는 것이 나에게 기대된다.

링크

• 여기 에디터보십시오 : 작은 소스 코드http://files.inlovewithcss.com/simple-edit/
• 봐 :https://github.com/mlabod/simple-edit/blob/master/editor.jquery.js

질문

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