如何将网页文本框中的 HTML 和 CSS 渲染成

Question

基本上我正在尝试创建 JSFiddle 的迷你克隆。

也就是说，我想让我的用户输入一些 HTML 和 CSS，然后在屏幕的另一个区域看到呈现的结果。我也在寻找使用 AngularJS。

有没有人对此有任何建议或经验？

Answer 1

您可以使用提供的 CSS 和 HTML 创建一个临时文件，然后使用框架在页面的另一部分查看该文件

Answer 2

我不确定您知道/想要使用多少 Javascript，但您可以为 HTML、CSS 和输出创建 3 个框架。在 HTML 和 CSS 框架中，放置一个输入文本区域。然后单击“运行”按钮，将输出的内部 HTML 更改为 html（在 HTML 标签内）和 css（在 Style 标签内）的内容。

Answer 3

（我在你进行 Angular 编辑之前起草了这个，但你可以将 jQuery 与 Angular 一起使用。）

如果你有点小心的话，你可以在一个页面中执行此操作：

1. 一个页面上只能有一个body 标签。所以任何body 样式都应该只适用于容器，不适用于文档正文。下面的代码通过将body 标记样式更改为.body 类样式来处理此问题，该样式适用于容器内的div 类body。

2. 任何其他样式也应仅适用于容器的子项。下面的代码通过首先将“样式表”文本区域附加到容器来处理此问题，然后遍历样式规则并将容器的 ID 附加到每个选择器。 （原规则被删除，新规则被插入。）

以下代码适用于 IE9+ 和现代浏览器。 Working Fiddle.

---

<div>
  <textarea placeholder="Enter HTML here"></textarea>
  <textarea placeholder="Enter CSS here"> </textarea>
</div>

<div id="Render"></div>

$('div').first()
  .keyup(function() {
    $('#Render').html(
      '<style>'+$('div:first textarea:not(:first)').val()+'</style>'+
      '<div class="body">'+$('div:first textarea:first').val()+'</div>'
    );
    var ss= document.styleSheets[document.styleSheets.length-1],
        rules= ss.cssRules;
    for(var i = 0 ; i < rules.length ; i++) {
      var rule= '#Render '+rules[i].selectorText
                .replace('body','.body')
                .split(',').join(', #Render')+
                '{'+rules[i].cssText.split('{')[1];
      ss.deleteRule(i);
      ss.insertRule(rule, i);
    }      
  })
  .keyup();