Как изменить поведение блоков contenteditable после нажатия Enter в различных браузерах

Ответ 1

Как ранее сказал Дуглас, браузеры пытаются клонировать предыдущий тег, когда клиент начинает новый абзац на редактируемой странице. Расхождение происходит, когда браузеру нечего отходить - например, когда изначально тело страницы пуст. В этом случае разные браузеры ведут себя по-разному: IE начинает обертывать каждую строку в <p> , Chrome обертывает каждую строку в <div> .

Чтобы увеличить опыт работы с несколькими браузерами, разработчики WebKit внедрили команду DefaultParagraphSeparator. Вы можете использовать следующий JavaScript при загрузке страницы для Chrome, чтобы изменить разделитель абзацев по умолчанию на <p> тег:

document.execCommand('defaultParagraphSeparator', false, 'p');

Ответ 2

Далее будет добавлен <br>, когда во всех основных браузерах будет нажата клавиша ввода, и попытка поместить каретку сразу после нее. Тем не менее, у WebKit, Opera и IE есть проблемы с правильной установкой каретки после <br>, которую следующий код не пытается исправить.

function enterKeyPressHandler(evt) {
    var sel, range, br, addedBr = false;
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    if (charCode == 13) {
        if (typeof window.getSelection != "undefined") {
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                br = document.createElement("br");
                range.insertNode(br);
                range.setEndAfter(br);
                range.setStartAfter(br);
                sel.removeAllRanges();
                sel.addRange(range);
                addedBr = true;
            }
        } else if (typeof document.selection != "undefined") {
            sel = document.selection;
            if (sel.createRange) {
                range = sel.createRange();
                range.pasteHTML("<br>");
                range.select();
                addedBr = true;
            }
        }

        // If successful, prevent the browser default handling of the keypress
        if (addedBr) {
            if (typeof evt.preventDefault != "undefined") {
                evt.preventDefault();
            } else {
                evt.returnValue = false;
            }
        }
    }
}

var el = document.getElementById("your_editable_element");

if (typeof el.addEventListener != "undefined") {
    el.addEventListener("keypress", enterKeyPressHandler, false);
} else if (typeof el.attachEvent != "undefined") {
    el.attachEvent("onkeypress", enterKeyPressHandler);
}

Ответ 3

Отличные ссылки находятся здесь на контентной основе.

http://blog.whatwg.org/the-road-to-html-5-contenteditable

Что приводит к действительно хорошему API здесь http://dev.opera.com/articles/view/rich-html-editing-in-the-browser-part-1/ http://dev.opera.com/articles/view/rich-html-editing-in-the-browser-part-2/

Если вы готовы занять от 30 минут до часа, чтобы прочитать все это, вам абсолютно не придется использовать какой-то дерьмовый сторонний редактор, такой как tinyMCE или ckeditor, или что-то еще, вы можете самостоятельно его строить и настраивать и быть откровенным, проще и быстрее делать это с нуля, чем обращаться со всем крутым и ненужным API стороннего редактора WYSIWYG.

Ответ 4

Если вы предпочитаете быть счастливым, а не преследовать ошибки:-) было бы гораздо лучше попытаться использовать FF p или div. Не только потому, что он оказался большинством голосов:-)

Причина заключается в том, что br только граничит с незаконченным, если вы посмотрите на тег с глазами XML (он вводит смешанную модель данных - как в тексте, который не защищен тегом), и успех был в течение многих лет (всеми браузерами ) к полной XML-ization.

В зависимости от вашего фактического приложения, возможно, стоит попробовать установить div с полностью сформированным стилем и определенно с каким-то исходным контентом - если вы видели страницы, где вы видите серый текст, например "введите свой комментарий здесь", и он исчезнет второй вы нажимаете на него (или remians - это дизайнерское решение).

Причиной этой части является то, что семантика "contenteditable" заключается в том, что "у этого уже есть контент = > у браузера достаточно информации, чтобы знать, что делать", поэтому в то время как браузеры делают все возможное, чтобы что-то сделать, когда сталкиваются с отсутствием контента, который он делает ситуация гораздо более случайная.

Ответ 5

Я считаю, что если у div уже есть тег абзаца внутри него, и пользователь нажимает на возврат, когда фокус находится внутри тега абзаца, тогда Firefox добавит еще один. Итак, если у вас есть это:

<div contenteditable="true">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</div>

и вы фокусируете внимание на прессе, Firefox добавит третий абзац.

Возможно, вы сможете обойтись с & nbsp ; в тегах абзаца, указав им минимальную высоту, и у вас может быть только один. В последний раз, когда я смотрел на это, я не дошел до сути своего поведения. Вероятно, вам понадобится JavaScript для принудительного применения как минимум одного абзаца абзаца внутри div.