Работа с линией Разрывы на contentEditable DIV
У меня проблема с разрывами строк contenteditable
на SAFARI/CHROME. Когда я нажимаю "return" на contentEditable <div>
, вместо создания <br>
(например, Firefox), они создают новый <div>
:
<div>Something</div>
<div>Something</div>
Это выглядит как (на contentEditable DIV):
Something
Something
Но после дезинфекции (удаление <div>
) я получаю следующее:
SomethingSomething
В Firefox contenteditable
:
Something
<br>
Something
И что после санитазы выглядит одинаково:
Something
Something
Есть ли какое-либо решение "нормализовать" это в браузерах?
Я нашел этот код на Сделать a <br> вместо <div> </div> нажав Enter на доступном для контента
$(function(){
$("#editable")
// make sure br is always the lastChild of contenteditable
.live("keyup mouseup", function(){
if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
this.appendChild(document.createChild("br"));
}
})
// use br instead of div div
.live("keypress", function(e){
if (e.which == 13) {
if (window.getSelection) {
var selection = window.getSelection(),
range = selection.getRangeAt(0),
br = document.createElement("br");
range.deleteContents();
range.insertNode(br);
range.setStartAfter(br);
range.setEndAfter(br);
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
return false;
}
}
});
});
Это работает, но (в SAFARI и CHROME) Я должен нажать два раза клавишу "возврат", чтобы получить новую строку...
Любая идея?
Изменить: с кодом, который я нашел (в нижней части этого вопроса) работает отлично, кроме функции, которая "гарантирует, что элемент <br>
всегда является lastChild... Любая идея о как это исправить?
Изменить 2: Я получаю эту ошибку на консоли: Uncaught TypeError: Object #<HTMLDocument> has no method 'createChild'
Изменить 3: Хорошо, я изменил document.createChild("br");
на document.createElement("br");
, и я думаю, что получил его в FF/Safari/Chrome... Все возвращают <br>
для новых строк...
Проблема в том, что когда я попадаю в упорядоченный или неупорядоченный список, мне нужно получить новую строку без <br>
...
Изменить 4: Если кто-то заинтересован в решении последнего редактирования: Избегите функции createElement, если она находится внутри символа <LI> element (contentEditable)
Ответы
Ответ 1
Этот метод, как представляется, позволяет избежать ошибки Chrome, которая показывает BR в первый раз (с кодом, который вы указали, вам нужно нажать два раза клавишу Enter).
Это не идеальный взлом, но он работает: он добавляет пробел после вашего БР, чтобы он отображался правильно.
Тем не менее, вы увидите, что добавление только пробела "" ничего не изменит, оно работает с другими буквами. Браузер не отобразит его, возможно, потому, что он похож на пустое пространство внутри html-страницы, это ничего не значит. Чтобы избавиться от этой ошибки, я создал div с jQuery, который включает тег
, и я беру свойство text()
, чтобы поместить его в текстовый индекс, иначе он не будет работать.
$editables = $('[contenteditable=true]');
$editables.filter("p,span").on('keypress',function(e){
if(e.keyCode==13){ //enter && shift
e.preventDefault(); //Prevent default browser behavior
if (window.getSelection) {
var selection = window.getSelection(),
range = selection.getRangeAt(0),
br = document.createElement("br"),
textNode = document.createTextNode("\u00a0"); //Passing " " directly will not end up being shown correctly
range.deleteContents();//required or not?
range.insertNode(br);
range.collapse(false);
range.insertNode(textNode);
range.selectNodeContents(textNode);
selection.removeAllRanges();
selection.addRange(range);
return false;
}
}
});
Ответ 2
Прослушивание нажатий клавиш кажется большой работой. Было бы просто так, как это было бы возможно:
var html = $('.content').html().replace(/<div>/gi,'<br>').replace(/<\/div>/gi,'');
JSFiddle demo здесь.
Кроме того, он выглядит как sanitize.js позволяет настраивать конфигурацию. Вы пытались добавить div
в качестве разрешенного элемента?
Разрешение HTML/CSS опасно, поэтому убедитесь, что вы осторожны.
РЕДАКТИРОВАТЬ: Удалены комментарии на стороне сервера. Санитация происходит во время использования - если клиент хочет обходить это локально, это может быть сделано на свой страх и риск. Спасибо Винсент Макнабб за это.
Ответ 3
Вы можете просто использовать следующую команду
document.execCommand('insertHTML',false,'<br>');
Эта команда предотвратит поведение по умолчанию и добавит тег, который вы хотите.
Это все, 1 строка кода
И еще более простой подход.
ТОЛЬКО для CSS.
К вам contenteditable element применяется правило display:inline-block
и это добавит только br s
Ответ 4
Webkits не будут отображать один br
, если он является последним (непустым) дочерним элементом контейнера. Для Safari нативное нажатие клавиши для вставки разрыва строки - Ctrl + Return. Если вы посмотрите внимательно, вы заметите, что Safari фактически вставляет два br
, а только рендеринг; однако он будет вставлять один br
, если есть какой-то завершающий текст, или будет избавлен от двойного br
после того, как вы введете его (если бы были удвоены).
По-видимому, решение Webkits похоже на вставку double br
, как и они сами, и пусть они справятся с остальными.
Ответ 5
Возможно, вы захотите проверить свойство css white-space
. Установка стиля на white-space: pre-wrap
позволяет вам избавиться от всего этого javascript, поскольку он изменяет поведение пробелов для отображения вместо краха.
И посмотрите этот ответ: HTML - Новая строка char в DIV-содержимом редактируемая?
Ответ 6
см. этот Fiddle
Или это сообщение
Как разобрать редактируемый текст DIV с поддержкой браузера
Ответ 7
Ты можешь использовать:
document.execCommand("defaultParagraphSeparator", false, "br");
Полная ссылка здесь