CODEWITHSUNDEEP
htmlcssuser-interface
JiniKJohny
JiniKJohny

Reputation: 1182

How can I add a CSS editor inside my HTML page

I'm creating a web page where user can add their custom CSS. As of now I'm using plain text area but it is not parsing new lines and css properties properly. Which is the best way I can create a panel to read and validate CSS inside my HTML page

My current form is like this

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

Upvotes: 3

Views: 319

Answers (1)

John Pavek
John Pavek

Reputation: 2665

Use a content editable, visible, style tag.

Note: This is a partial answer, because I cannot figure out the bug with new styles.

In the example below you can use the content editable style tag, to change 'green' to 'blue' and see the document update. This might be related to stack overflow snippets, but I could not add a new style for the spans to change anything.

style {
  display: block;
}
<h1> Heading </h1>

<span> Something else</span>

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

Upvotes: 2

Related Questions