Можно ли отключить или контролировать "команды" в contentEditable элементах?

Как я понимаю, элемент с contentEditable="true" является своего рода редактором HTML WYSIWYG. Он генерирует соответствующие теги HTML, соответствующие выданной команде.

Например, если вы выбираете текст и затем нажимаете Ctrl + B, выделенный текст помещается между тегами <b></b>.

Мне нужно, чтобы в полученном тексте не было тегов стиля. Как можно подавить, захватить или контролировать поведение этих команд?

Другие вещи, которые я мог сделать:

  • Отфильтровать теги после факта; но тогда пользователь подумает, что они поместили вещи жирным, если у них действительно нет
  • Повторите стиль тегов, чтобы они не отображались, а затем отфильтровывали их; но есть шанс, что я могу его забыть, или что-то, что таблица стилей отключена.
  • Вместо contentEditable использовать contentEditable вместо textarea. Но между прочим, contentEditable позволяет легко выделить абзац, который редактируется. Это гораздо труднее сделать с textarea.

Ответы

Ответ 1

Вероятно, лучший ресурс целевой страницы для contentEditable находится здесь:

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

В основном, это сводится к следующему: вы не можете переконфигурировать сами коды ключей - они всегда существуют, и они различаются в зависимости от локализации браузеров.

Однако вы можете перехватывать команды клавиатуры с помощью JavaScript, пример которой можно увидеть здесь:

http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js

Я играл с contentEditable в последнее время со смешанным успехом. Некоторые вещи, как правило, работают лучше, чем другие, и имеют смешанные результаты в браузере. Если все, что вам действительно нужно, это редактор для элементов contentEditable block, попробуйте взглянуть на редактор aloha.

Ответ 2

Я знаю, что уже слишком поздно, но если это может помочь кому-то, стоит попробовать.

Вот как я обработал его в javascript, чтобы отключить ctrl + Command (ctrl + B, ctrl + Any Key), я использовал:

HTML:

<div id="xyz" onKeyDown="return disable(this,event);" contentEditable="true">
This is my Rich Text Editor
</div>

JavaScript:

function disable(x,e){
    if(e.ctrlKey){ // .ctrlKey tells that ctrl key was pressed.
    return false;
    }
return true;
}

DEMO

Но это также повлияет на способ копирования по-умолчанию по умолчанию ctrl + C и ctrl + V. Если вы хотите сохранить все функциональные возможности по умолчанию, за исключением особых случаев, таких как: ctrl + B (Полужирный), ctrl + i (курсив) и ctrl + u (Подчеркивание), то лучше использовать switch case statements на keyCode значениях, например: 
function disable(x,e){
   var ret=true;
    if(e.ctrlKey){
        switch(e.keyCode){
            case 66: //ctrl+B or ctrl+b
            case 98: ret=false;
                     break;
            case 73: //ctrl+I or ctrl+i
            case 105: ret=false;
                      break;
            case 85: //ctrl+U or ctrl+u
            case 117: ret=false;
                      break;
        }
    }
    return ret;
} // This will work fine for ctrl+c and ctrl+v.

DEMO

Теперь это будет отлично работать для стандартных функций копирования и вставки, но ограничит других, например, полужирным, курсивом и подчеркиванием.

ИЗМЕНИТЬ

Как Betty_St Рекомендуемые, Чтобы выполнить эту работу на Mac Вам необходимо заменить:

if(e.ctrlKey){

с

if(e.ctrlKey || e.metaKey){ // Coz You'll be using CMD key on mac

Тогда это может работать на Mac OS.

Примечание. Я ранее не занимался Mac, поэтому я не знаю, правильно ли это делается или нет.

Надеюсь, поможет:). Приветствия.

Ответ 3

Вместо того, чтобы пытаться подавить нежелательные теги с помощью JavaScript, я просто отменяю их и сохраняю/восстанавливаю текст без текста в области контента:

[contenteditable] {
  background: #eee;
  width: 15rem;
  height: 4rem;
  padding: 1em;
}

[contenteditable] b {
  font-weight: normal;
}
    
[contenteditable] i {
  font-style: normal;
}
<div contenteditable></div>

Ответ 4

В React мы используем следующий код, чтобы отключить все, кроме команд копирования/вставки и перемещения:

const onKeyDown = (e) =>
  e.ctrlKey || e.metaKey
  && !['c', 'v', 'ArrowLeft', 'ArrowRight'].includes(e.key)
  && e.preventDefault()

const App = props => (
  <div
    contentEditable
    suppressContentEditableWarning
    
    onKeyDown={onKeyDown}    
  >
    12345
  </div>
)

ReactDOM.render(
  <App />,
  document.getElementById('react')
)
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>