интерпретировать HTML-код из буфера обмена и вставить его в HTML-формат представления - PullRequest
Новая
       12

интерпретировать HTML-код из буфера обмена и вставить его в HTML-формат представления

0 голосов
/ 12 декабря 2018

У меня есть некоторый HTML-код, например,

<div><span style="background:yellowgreen">name:</span><span>Rose</span></div>,

Я хочу скопировать и вставить код в расширенный текстовый формат, который может преобразовать HTML-код в реальный DOM,

Я знаю, что есть js clipBoardData, zeroClipBoard, clipBoard-polyfill, но все они имеют проблему совместимости.Я хочу написать один, который может работать для большинства браузеров, как я могу это сделать?какая-то идея?

По моему мнению, каждый браузер может разрешить код html, и скопированный мною материал также записывается в html, когда я вставляю его в какое-то место, например textarea на каком-то веб-сайте,браузер может интерпретировать материал и отображать его.Но как этого добиться?Заранее спасибо!

Ответы [ 3 ]

0 голосов
/ 12 декабря 2018

Вы должны использовать один из текстовых редакторов. Здесь вы можете увидеть самые продвинутые текстовые редакторы. 

clipboard.setData('text/plain', selection.getText());
clipboard.setData('application/officeObj’, selection.serialize());
clipboard.setData('image/bmp', draw(selection));
clipboard.setData('text/html', '<div><span style="background:yellowgreen">name:</span><span>Rose</span></div>');

Это код JavaScript, который поможет вам скопировать текст с типом, таким как text/plain, text/html и т. Д.Вам понадобится text/html

Ваш вопрос: совместим ли этот код во всех браузерах?право?Как я вижу Здесь этот тип clipboarevent совместим с современными браузерами.

Удачи.Если мой ответ поможет вам, пожалуйста, оцените его как полезный

0 голосов
/ 12 декабря 2018

Проверьте, допустим ли фрагмент HTML с Javascript - на основании этого я "проверяю" html, но я не знаю, нужен ли он вам, если вы хотите или не хотите иметь только выводбыть правильным (даже если HTML-строка, которую вы вставили, не на 100% правильная).Если вы хотите, чтобы только выходные данные были правильными, то ответ Девана самый простой 

function tidy(html) {
    var d = document.createElement('div');
    d.innerHTML = html;
    return d.innerHTML;
}

function print(){
    //get input from textbox
    var htmlInputValue = document.getElementById("htmlInput").value;
    // "validate" as html
    var result = tidy(htmlInputValue);
    //print it
    document.getElementById("result").innerHTML = result;
}

var myInput  = document.getElementById("htmlInput");
myInput.addEventListener("input", print, false);
#result {
  font-size: 40px;
  font-weight: bold
  
}
<html>
  <body>

    <label for="input">Enter your html here </label>
    <input class="myInput" id="htmlInput" value="">

    <p id="result"/> 

  </body>
</html>

Редактировать: я добавил немного CSS для жирного и большого текста #result {font-size: 40px;начертание шрифта: жирный шрифт}

0 голосов
/ 12 декабря 2018

Вы можете сделать это, просто установив innerHTML нужного элемента со значением textarea.

Что касается наличия хорошего текстового редактора, который делает это в браузере.Проверить https://github.com/Microsoft/monaco-editor.

const buttonElement = document.getElementById("submit");
const inputElement = document.getElementById("input");
const outputElement = document.getElementById("output");

buttonElement.onclick = function() {
    output.innerHTML = inputElement.value;
};

buttonElement.click();
#output {
  border: 1px solid black;
}
<textarea id="input"><h1>test</h1></textarea>
<button id="submit">submit</button>
<div id="output">
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...