즉, contentEditable 요소가 Enter 키에 단락을 만들지 않도록합니다.

Question

InternetExplorer에서 Enter를 누를 때마다 contentEditable DIV가 새로운 단락 (<p></p>)을 생성하고 Firefox는 <br/> 태그를 만듭니다. IE가 새로운 단락 대신 <br/>을 삽입하도록 강제 할 수 있습니까?

Answer 1

예 keydown 이벤트를 먼저 중지하고 (window.event.stopPropagation();) 문단 삽입을 피하고 삽입물 HTML command을 사용하여 문자열을 삽입 할 수 있습니다.

그러나 IE는이 divs 스타일 설정 등에 따라 다르며 <br>을 사용하면 문제가 발생할 것입니다.

TinyMCE or other editors과 같은 프로젝트를 사용하고 다른 브라우저 문제에 대한 모든 종류의 해결 방법이 있으므로 원하는대로 동작하는 편집기를 검색해보십시오. 아마 당신은 < BR에게 >의를 사용하는 편집기 ...

Answer 2

당신이 그것을 사용하는 경우, FCKEditor이

Answer 3

에 대한 설정이 여기에 솔루션 (jQuery를 사용)의를 찾을 수 있습니다. 'BR로 변경'버튼을 클릭하면 <p></p> 태그 대신 <br> 태그가 삽입됩니다.

HTML :

<div id='editable' contentEditable="true"> 
This is a division that is content editable. You can position the cursor 
within the text, move the cursor with the arrow keys, and use the keyboard 
to enter or delete text at the cursor position. 
</div> 
<button type="button" onclick='InsertBR()'>Change to BR</button> 
<button type="button" onclick='ViewSource()'>View Div source</button> 

자바 스크립트 :

function InsertBR() 
{ 
    $("#editable").keypress(function(e) { 
     if (e.which == 13) 
     { 
      e.preventDefault(); 
      document.selection.createRange().pasteHTML("<br/>")  
     } 
    }); 
} 

function ViewSource() 
{   
    var div = document.getElementById('editable'); 
    alert('div.innerHTML = ' + div.innerHTML); 
} 

Theselinkshelped. 작업 예제 here.

Answer 4

당신은 항상 + 이 한 줄의 반환을위한를 입력하고 단락 반환을위한를 입력 SHIFT를 사용하는 방법을 배우게 할 수 있습니다. IE는 이와 관련하여 MS Word처럼 작동합니다.

Answer 5

하여 편집 <div> 작품 내부의 <p>의 line-height 변경 :

#editable_div p 
{ 
    line-height: 0px; 
}