избегайте элемента ie contentEditable для создания абзацев по клавише Enter

Question

В InternetExplorer раздел с возможностью редактирования создает новый абзац (<p></p>) каждый раз, когда вы нажимаете Enter, в то время как Firefox создает <br/> пометка.Можно ли заставить IE вставить <br/> вместо нового абзаца ?

Answer 1

Да, можно избежать вставки абзацев, сначала остановив событие keydown (window.event.stopPropagation();), а затем вставляем строку с помощью insert HTML - команда.

Однако IE зависит от этого divs для настройки стилей и т.д.и вы попадете в беду, используя <br>s.

Я предлагаю вам использовать такой проект, как TinyMCE или другие редакторы и найдите редактор, который ведет себя так, как вам хотелось бы, поскольку в нем есть всевозможные обходные пути для решения различных проблем браузера.Возможно, вы сможете найти редактор, который использует <br>s...

Answer 2

Вот решение (использует jQuery).После того, как вы нажмете на кнопку "Изменить на BR", <br> тег будет вставлен вместо <p></p> пометка.

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>

Javascript:

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

Эти Ссылки помогло.Рабочий пример здесь.

Answer 3

Вы всегда можете научиться использовать СДВИГ + ВОЙТИ для однострочных возвратов и ВОЙТИ для возврата абзаца.IE в этом отношении ведет себя как MS Word.

Answer 4

Изменение line-height из числа <p> внутри редактируемого <div> работает:

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

Answer 5

Если вы можете это использовать, FCKeditor - Редактор имеет настройку для этого