html - 如何在我的 HTML 页面中添加 CSS 编辑器

Question

我正在创建一个网页，用户可以在其中添加他们的自定义 CSS。到目前为止，我正在使用纯文本区域，但它没有正确解析新行和 css 属性。这是创建面板以读取和验证 HTML 页面内 CSS 的最佳方式

我现在的表格是这样的

<div class="form-group" style="min-height: 300px;">
     <label for="cssString" class="control-label col-sm-4">
          Enter CSS
     </label>
     <div class="col-sm-8">
          <textarea class="form-control" id="cssString" name="customCssData" cols="5" rows="15"> `+ customCss + ` </textarea>
     </div>
</div>

Answer 1

使用内容可编辑、可见的样式标签。

注意:这是部分答案，因为我无法找出新样式的错误。

在下面的示例中，您可以使用内容可编辑样式标签，将“绿色”更改为“蓝色”并查看文档更新。这可能与堆栈溢出片段有关，但我无法为跨度添加新样式来更改任何内容。

style {
  display: block;
}

<h1> Heading </h1>

<span> Something else</span>

<pre>
<style contenteditable="true">
  h1 {
    color: green;
  }
</style>
</pre>