Можно ли отключить или управлять «командами» в элементах contentEditable? - PullRequest
Новая
       14

Можно ли отключить или управлять «командами» в элементах contentEditable?

17 голосов
/ 26 августа 2011

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

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

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

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

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

Ответы [ 4 ]

16 голосов
/ 04 августа 2014

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

Вот как я обработал это в javascript, чтобы отключить команду ctrl + ( ctrl + B , ctrl + Любой ключ ), я использовал:

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 ( Bold ), 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 <ч /> Теперь это будет нормально работать для стандартных функций копирования + вставки, но ограничит другие, такие как жирный, курсив и подчеркивание.

<ч /> EDIT

Как Betty_St Предложено , чтобы сделать эту работу на Mac, вам необходимо заменить: 

if(e.ctrlKey){

с 

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

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

Примечание: я раньше не имел дела с Mac, поэтому я не знаю, правильный ли это способ или нет. <ч /> Надеюсь, поможет :). Приветствия.

13 голосов
/ 23 января 2016

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

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

[contenteditable] b {
  font-weight: normal;
}
    
[contenteditable] i {
  font-style: normal;
}
<div contenteditable></div>
10 голосов
/ 26 августа 2011

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

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

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

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

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

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

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

В 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>
...