codeBlock, заключенный в <pre>внутри contenteditable breaks при нажатии Enter - PullRequest
Новая
       102

codeBlock, заключенный в <pre>внутри contenteditable breaks при нажатии Enter

0 голосов
/ 27 мая 2020

В моем пользовательском редакторе, обертывание кода тегами <pre> работает нормально. Хотелось бы визуально организовать вставляемый код для лучшей читаемости. Для этого мне нужны пустые строки между кусками кода. Но вместо пустой строки, когда я нажимаю Enter, весь блок кода разбивается на два, а новый блокируется в собственном пре-теге. Приведенный ниже код должен быть в одном блоке с пустой строкой между example_function и another_example_function()

precode issue

FYI , класс contenteditable имеет значение style="display:inline-block", чтобы предотвратить div.wrapper в каждой строке. Возможно актуально CSS информация - pre { white-space: pre-wrap;}. Я на chrome 83.xx. Дайте мне знать, если вам понадобится дополнительная информация. Ниже показано, что я пробовал и не смог: 

//there could be several code-blocks so running a loop to get all
let preTags = document.querySelector('.custom_editor').querySelectorAll('pre')
if (preTags) {
  preTags.forEach(function(item) { // attaching an event-listener to each code block
    item.addEventListener('click', function(e) {
      if (e.keyCode === 13) { //on enter just need a empty new line
        document.execCommand('insertHTML', false, '<br>');
        return false;
      }
    })
  }
}

HTML 

<div class="content" style="display:inline-block;" contenteditable="true"></div>

1 Ответ

0 голосов
/ 28 мая 2020

Вложенные теги, например. contenteditable>pre не кажется идеальной настройкой для таких событий, как 'keypress', 'keydown' и 'keyup', поскольку в моем случае они действительно реагировали на эти события. Событие 'click' в pretags сработало, но не обработало проверку if (e.key === 'Enter'), поэтому я не пошел по этому пути.

Вместо того, чтобы прослушивать события для каждого pretag, я прикрепил слушателя только к контейнеру, и внезапно мои пользовательские настройки для enter-event работали внутри и снаружи всех pretags внутри контейнера. В конце концов, я могу получить пустые строки в своих предварительных тегах, нажав клавишу Enter . 

document.querySelector('.custom_editor').addEventListener('keypress', someFunc)
function someFunc(e){
    if (e.key === 'Enter') { 
        document.execCommand('insertHTML', false, "<br>");
        e.preventDefault()
    } 
}
...