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

Question

我正在创建一个 web 页面，用户可以在其中添加他们的自定义 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

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

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

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

 style { display: block; }

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