избежать, т.е. элемент contentEditable для создания абзацев по клавише Enter

Question

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

Answer 1

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

Однако IE зависит от этого div для настройки стилей и т. Д., И вы будете сталкиваться с проблемами при использовании
s.

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

Answer 2

Вот решение (использует jQuery). После нажатия кнопки «Изменить на БР» вместо тега <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>

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

Вы всегда можете научиться использовать SHIFT + ENTER для возврата в одну строку и ENTER для возврата абзаца. IE ведет себя как MS Word в этом отношении.

Answer 4

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

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

Answer 5

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