Как я могу добавить редактор CSS на свою HTML-страницу

#html #css #user-interface

#HTML #css #пользовательский интерфейс

Вопрос:

Я создаю веб-страницу, на которой пользователь может добавлять свой пользовательский CSS. На данный момент я использую обычную текстовую область, но она неправильно анализирует новые строки и свойства css. Какой наилучший способ создать панель для чтения и проверки CSS на моей HTML-странице

Моя текущая форма выглядит так

 <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>

1. Не могли бы вы показать, что вы пробовали? Таким образом, нам будет легче понять

2. В зависимости от того, какую гибкость вы хотите предоставить пользователю, у меня возникнет соблазн использовать <form> пользовательский интерфейс на основе a с переключателями и параметрами выбора, а не анализировать область обычного текста.

3. Обновлена текущая текстовая область

4. @Rounin: пользователь будет просто копировать вставку CSS. Мы не можем указать radio или checkbox, поскольку свойства css могут быть очень большими.

5. Достаточно справедливо. В таком случае, можете ли вы использовать a <textarea> и a <button type="button"> таким образом, чтобы при нажатии кнопки скрипт создавал новый <style> элемент в <head> и добавлял содержимое <textarea> в <style> элемент?

Ответ №1:

Используйте редактируемый, видимый, тег стиля.

Примечание: Это частичный ответ, потому что я не могу понять ошибку с новыми стилями.

В приведенном ниже примере вы можете использовать тег редактируемого стиля содержимого, чтобы изменить «зеленый» на «синий» и просмотреть обновление документа. Это может быть связано с фрагментами переполнения стека, но я не смог добавить новый стиль для промежутков, чтобы что-то изменить.

 style {
  display: block;
}

 <h1> Heading </h1>

<span> Something else</span>

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