Как запретить браузеру вставлять HTML в contenteditable элемент

Когда пользователь вставляет разрывы строк в contenteditable элемент, браузеры вставляют HTML в элемент.

Вот то, что вы получаете, когда вы нажмете [Enter] в разных браузерах:

IE:      <p></p>
Chrome:  <div><br></div>
Safari:  <div><br></div>
Firefox: <br />
Opera:   <br />

(Проверьте себя с помощью этой демонстрации JSFiddle.)

Есть ли способ заставить браузер НЕ вставлять HTML, когда пользователь не вставил HTML? Конечно, я мог бы просто использовать

<textarea></textarea>

... и это ведет себя очень похоже на то, как я хочу, однако я не хочу строго "только текстовый" ввод, так как я буду добавлять и изменять HTML в редактируемом элементе, используя Javascript.

Я подумывал о том, чтобы постоянно удалять весь HTML как пользовательские типы, оставляя только HTML со специальным классом, который я создаю. Однако это не кажется хорошим решением. Есть ли что-то вроде wrap='soft' или каким-то другим способом сказать "перестань придумывать HTML и вставлять его в мой элемент!"

Источник

2 ответа

Если вы делаете его доступным для редактирования, вы неявно разрешаете пользователю изменять содержимое HTML.

Нажатие возврата должно вставить какой-то символ новой строки - либо как закрытие абзаца (</p>) и начало нового (<p>) или ввод переноса строки (<br>). Оба из которых в HTML требуют теги HTML, по той простой причине, что стандартный символ новой строки (например, \n или же \n\r) отображается как один пробел, а это не то, чего ожидал бы пользователь, поэтому вставка необработанной новой строки в качестве "мягкого переноса" не имеет смысла и в конечном итоге приведет к тому, что пользователи будут бессильно хлопать своим ключом ввода, злясь на ваш сайт за то, что он не вставляя перерыв, когда они думают, что это должно.

Еще более забавный факт заключается в том, что если пользователь выделяет какой-то текст, он может (или должен) выделять жирным шрифтом и курсивом текст с помощью сочетаний клавиш, которые снова будут вставлять HTML.

Если не считать написания Javascript для переопределения этого поведения, я не уверен, что вы можете отключить клавишу ввода, вставляя HTML-теги для отображения запрошенных строк новой строки.

Чтобы продемонстрировать это, вот действительно простая страница:

<html>
<body>
<div contentEditable="true"> Some things.</div>
</body>
</html>

(По крайней мере, в Internet Explorer). Если дважды щелкнуть текст, он станет редактируемым. Перейти к концу строки и введите следующее:

  • Enter - (Новый парагаф сделан (оборачивая предыдущий текст в p теги).
  • Тип "Words", выберите его и нажмите Crtl + b - текст теперь обернут в <strong> теги.
  • Хит Shift + Enter - разрыв строки (<br>) теперь вставлен.
  • Тип "More words", выберите его и нажмите Crtl + i. Теперь он выделен курсивом. <em> теги.

И источник должен выглядеть так:

<html>
<body>
<div contentEditable="true">
  <p>Some things.</p>
  <p>
    <strong>Words</strong>
    <br>
    <em>More words</em>
  </p>
</div>
</body>
</html>

Если вы хотите получить полный контроль над содержимым, попадающим в область, я бы порекомендовал использовать редактор WYSIWYG или альтернативный вариант: примите, что браузер, вероятно, знает, что он делает, и дайте ему сделать свое дело, чтобы вам не пришлось об этом беспокоиться.,

Источник

Не существует кросс-браузерного способа отключить или заставить редактируемый div интерпретировать нажатие клавиши ввода иначе, чем предполагал браузер.

Кроме того, разные браузеры будут делать разные вещи с новой строкой. Некоторые обернут строки внутри <p> теги, некоторые добавят <br>,

Идея состоит в том, что браузер контролирует редактируемый div, а не вы.
Если вы попытаетесь поиграть с выходом в режиме реального времени, вы будете как пассажир, время от времени пытающийся вырвать колесо из рук водителя.

Вам даже не гарантировано получить ключевые события от такого div. Например, ваша скрипка не работает в IE11.

Я бы предпочел сделать это точно так же, как это делает этот SO-редактор: использовать текстовую область для ввода данных пользователем и генерировать любой нужный HTML-код в другом, не редактируемом div.

Источник
Другие вопросы по тегам