使用 v-html 从 textarea 添加 CSS 规则

Question

我正在构建一个 WYSIWYG 类型的应用程序，用户可以在文本区域中写入 CSS，并且 CSS 规则将应用于页面上的 HTML 我试过这样的事情在模板中

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

VueCompilerError: 带有副作用 ( 和 ) 的标签在客户端组件模板中被忽略。

Answer 1

旧答案，下面是更好的答案

Add textarea with v-model:
<textarea v-model="css" />
You can create style tag in 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;
});
You must be able to access this element later, so assign style to el.value.

Then add watch on input value:
watch(css, () => {
  updateCss(el.value, css.value);
});
Where updateCss is a function:
const updateCss = (el, css) => {
  if (el.styleSheet) {
    el.styleSheet.cssText = css.value;
  } else {
    el.innerHTML = "";
    el.appendChild(document.createTextNode(css));
  }
};
Demo:

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

编辑

我找到了更好的解决方案：

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

组件没有抛出关于样式标签的错误：

<component :is="'style'">

注意这里有v-text，而不是v-html。 V-html 可能不安全。

演示： https://codesandbox.io/s/festive-germain-q9tg3?file=/src/App.vue:122-281

使用 v-html 从 textarea 添加 CSS 规则

Add CSS rules from textarea using v-html

javascript

css

wysiwyg

vue.js

旧答案，下面是更好的答案

编辑