Проблемы с отображением CSS и HTML из текстового поля в элемент div

Question

Я могу отобразить HTML-код, набранный в текстовом поле, в элемент div рядом с ним, но у меня возникают некоторые проблемы с CSS, которые он пытается визуализации. Установки, которые у меня есть, аналогичны тем, что у w3schools есть с разделами «попробуйте», где слева находится код для написания кода и div справа для визуализированного html, но когда я применяю CSS к «body», он применяется он вместо этого на всю веб-страницу вместо div.

Так что, если этот код будет введен в текстовое поле:

body { 
    background: linear-gradient(45deg, red, blue, green); 
} 

Было бы изменить фон всего сайта, а не на фоне DIV, что веб-страница оказанной в. Есть ли способ исправить это или это всегда будет проблемой? Это моя функция для визуализации кода текстовой:

$(document).ready(function(){ 
      $("#showmeImg").click(function(){ 
       $("#outputContainer").html($(editor.getValue())); 
      }); 
     }); 

Щелчок «showmeImg» сделает код из «редактора» в DIV в «outputContainer».

Answer 1

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

Что вы могли бы попробовать в своем блоке замены javascript с помощью селектора элементов, который вы измените. .

var html = $(editor.getValue()); 
$('#outputContainer').html(html.replace('body','#outputContainer')); 

Это не очень изящное решение, однако оно быстро сделает то, что вы пытаетесь достичь.

Answer 2

Если я правильно понял сценарий, вы копируете код, введенный в текстовое поле, в div рядом с ним, чтобы получить эффект, похожий на w3schools «попробуйте». Мой совет? Это неэффективный способ сделать то, что вы хотите сделать.

Самый простой способ, которым я могу думать, - использовать iframe, а не div. При представлении с небольшим внутренним кодом вы можете сделать исходный код iframe в тексте в текстовом поле. Невозможно обмануть браузера, считая, что div является тегом тела.