如何在我的 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>