Apply CSS styles from a text area using v-html

Question

Apply CSS styles from a text area using v-html

I am currently working on developing a unique WYSIWYG application where users have the ability to write CSS in a textarea field and view its direct impact on the HTML content displayed on the page. As I was experimenting with different approaches, I attempted something similar to the following code snippet within my template:

<textarea v-bind="css"></textarea>
<style v-html="css"></style>

However, I encountered an error message stating: VueCompilerError: Tags with side effects (and) are ignored in client component templates.

javascript css vue.js wysiwyg

Answer 1

Answer №1

Outdated answer, see below for an improved solution

Include a textarea with v-model:
<textarea v-model="css" />
Create a style tag in the onMounted hook:
onMounted(() => {
  const style = document.createElement("style");
  style.type = "text/css";
  updateCss(style, css.value);

  document.getElementsByTagName("head")[0].appendChild(style);

  el.value = style;
});
Remember to assign the style to 'el.value' so it can be accessed later.

Add a watch for changes in the input value:
watch(css, () => {
  updateCss(el.value, css.value);
});
The function 'updateCss' should look like this:
const updateCss = (el, css) => {
  if (el.styleSheet) {
    el.styleSheet.cssText = css.value;
  } else {
    el.innerHTML = "";
    el.appendChild(document.createTextNode(css));
  }
};
See a working demo here:

https://codesandbox.io/s/cocky-mestorf-uqz6f?file=/src/App.vue:246-463

Edit

A more efficient solution is available:

<template>
  <textarea v-model="css" />
  <component :is="'style'" type="text/css" v-text="css"></component>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const css = ref("body { background-color: blue; }");
    return { css };
  },
};
</script>

Using a component avoids errors related to the style tag:

<component :is="'style'">

Note that 'v-text' is used instead of 'v-html' as a safety precaution.

Check out the demo here: https://codesandbox.io/s/festive-germain-q9tg3?file=/src/App.vue:122-281

Answer 2

Outdated answer, see below for an improved solution

Include a textarea with v-model:
<textarea v-model="css" />
Create a style tag in the onMounted hook:
onMounted(() => {
  const style = document.createElement("style");
  style.type = "text/css";
  updateCss(style, css.value);

  document.getElementsByTagName("head")[0].appendChild(style);

  el.value = style;
});
Remember to assign the style to 'el.value' so it can be accessed later.

Add a watch for changes in the input value:
watch(css, () => {
  updateCss(el.value, css.value);
});
The function 'updateCss' should look like this:
const updateCss = (el, css) => {
  if (el.styleSheet) {
    el.styleSheet.cssText = css.value;
  } else {
    el.innerHTML = "";
    el.appendChild(document.createTextNode(css));
  }
};
See a working demo here:

https://codesandbox.io/s/cocky-mestorf-uqz6f?file=/src/App.vue:246-463

Edit

A more efficient solution is available:

<template>
  <textarea v-model="css" />
  <component :is="'style'" type="text/css" v-text="css"></component>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const css = ref("body { background-color: blue; }");
    return { css };
  },
};
</script>

Using a component avoids errors related to the style tag:

<component :is="'style'">

Note that 'v-text' is used instead of 'v-html' as a safety precaution.

Check out the demo here: https://codesandbox.io/s/festive-germain-q9tg3?file=/src/App.vue:122-281

Apply CSS styles from a text area using v-html

Answer №1

Outdated answer, see below for an improved solution

Edit

Similar questions

The issue of Nodejs Messenger broadcast message functionality being inoperative

Checking for any lint errors in all JavaScript files within the project package using JSHint

Transferring a dynamic HTML file created using R's animation package onto a WordPress platform

Align the text to the center within the Paper component using React and Material-ui

Present the array elements in a format that allows the user to easily choose an option and explore the content

A guide on how to efficiently retrieve all images stored in a specific directory

Vue Tab doesn't properly initialize Vue Chart.js

Array of JSON data passed in the request body

Alter Express routes automatically upon updating the CMS

Sender receives a response from Socket.io

Optimizing Require.js File for Efficient Loading

Unable to link myxins with Quasar on a worldwide scale

jquery method for retrieving default value from dropdown list

Unlinked Checkbox in Angular Bootstrap Modal Controller

Scrollspy in Twitter Bootstrap consistently highlights the final element

How can I conceal child <div> elements when the parent div is resized?

Guide to capturing and playing audio on iOS6 with HTML5

Using NPM imports within a Node-RED node: A step-by-step guide

Execute the component function located within one page using another page

What is the process of extracting data from a variable and inserting it into a JSON object in JavaScript?