Удалите внешнее форматирование, но сохраните отступы и возврат каретки при вводе элемента <pre> - PullRequest
Новая
       42

Удалите внешнее форматирование, но сохраните отступы и возврат каретки при вводе элемента <pre>

1 голос
/ 05 августа 2020

Я использую следующее: 


        pre {
            outline:none;
            font-family : monospace;
            white-space : pre;
            background-color : rgb(19, 22, 27);
            color            : #98d8e7;    
        }

В Chrome мне предоставляется возможность «Вставить» (нежелательный результат) или «Вставить и сопоставить стиль» (желаемый результат), но в других браузерах предлагается только «Вставить».

Обычная «Вставка» сохраняет исходное форматирование содержимого, которое мне не нужно, например цвета текста и цвета фона. Это создает нежелательный результат для моего варианта использования.

Я хочу всегда заставлять вставку соответствовать стилю элемента <pre>.

Одна из моих идей - чтобы перехватить вставленный текст, передайте его невидимому элементу textarea, а затем получите это значение. Но похоже, что это дополнительная работа для чего-то, что (по крайней мере, на мой взгляд) должно быть очень простым. Но я не уверен, как это сделать. sh.

Я открыт для решений javascript или css. Все, что угодно.

1 Ответ

1 голос
/ 05 августа 2020

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

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

function onPaste (e) {
  e.preventDefault(); // stop the paste
  const t = e.clipboardData.getData("text"); // grab the pasted content as plain text
  e.target.innerHTML = t; // set the element's innerHTML to the plain text
}

const p = document.getElementById('test');
p.addEventListener('paste', onPaste);
pre {
  min-height: 200px;
  outline: none;
  font-family: monospace;
  white-space: pre;
  background-color: rgb(19, 22, 27);
  color: #98d8e7;
}

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

function onPaste (e) {
  // setTimeout to wait for the paste to complete
  setTimeout(() => {
    // do something with p.innerHTML or p.innerText;
    console.log(e.target.innerHTML);
  }, 0);
}
...