How can I add a CSS editor inside my HTML page

Question

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>

Can you please show what you have tried? That way it might be easier for us to understand — user14341744
– user14341744, Commented Nov 15, 2020 at 17:10
Depending on how much flexibility you want to give to the user, I'd be tempted to use a <form>-based UI with radio buttons and select options rather than parsing a plain text area. — Rounin
– Rounin, Commented Nov 15, 2020 at 17:16
@Rounin : User will be just copy pasting CSS. We cant give radio or checkbox as the css properties might be very big. — JiniKJohny
– JiniKJohny, Commented Nov 15, 2020 at 17:18
Fair enough. In that case, can you maybe use a <textarea> and a <button type="button"> such that when the button is clicked, a script creates a new <style> element in the <head> and adds the contents of the <textarea> to the <style> element? — Rounin
– Rounin, Commented Nov 16, 2020 at 12:56

John Pavek · Accepted Answer · 2020-11-16 04:22:02Z

2

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>

answered Nov 16, 2020 at 4:22

John Pavek

2,5853 gold badges17 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JiniKJohny Over a year ago

Thanks for the code snippet. But how can I submit this via form?

Collectives™ on Stack Overflow

How can I add a CSS editor inside my HTML page

1 Answer 1

Use a content editable, visible, style tag.

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Use a content editable, visible, style tag.

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related