Ограничить вставку в contenteditable (HTML / JS) - PullRequest
Новая
       10

Ограничить вставку в contenteditable (HTML / JS)

0 голосов
/ 07 ноября 2018

Я бы хотел запретить пользователю вставлять недопустимую разметку в contenteditable div.

Я бы хотел ограничить вставку жирным шрифтом, курсивом, ударением, подчеркиванием и ссылками.

Как лучше (я использую jQuery)?

Это не дубликат Вставка текстового редактора JQuery без форматирования . Я не хочу вставлять без форматирования. Я хочу выбрать / ограничить некоторые наценки.

Я уже прочитал следующие вопросы, ни один не дает четкого ответа:

1 Ответ

0 голосов
/ 29 января 2019

Ограничьте вставленный контент, прослушивая событие paste редактируемого элемента. Внутри этого события вы можете фильтровать данные, которые пользователь пытается вставить, используя регулярное выражение. 

const el = document.querySelector('p');

el.addEventListener('paste', (e) => {
  // Get user's pasted data
  let data = e.clipboardData.getData('text/html') ||
      e.clipboardData.getData('text/plain');
  
  // Filter out everything except simple text and allowable HTML elements
  let regex = /<(?!(\/\s*)?(a|b|i|em|s|strong|u)[>,\s])([^>])*>/g;
  data = data.replace(regex, '');
  
  // Insert the filtered content
  document.execCommand('insertHTML', false, data);

  // Prevent the standard paste behavior
  e.preventDefault();
});
<p contenteditable>Try pasting content into this paragraph. The pasted content can include a <b>BOLD</b>, <i>ITALIC</i>, <s>STRIKE</s>, or <u>UNDERLINE</u>. It can also include a <a href='#'>LINK</a>.</p>
...