Vue中如何将CodeMirror编辑器输入的CSS代码应用到HTML样式

• 调用Element.append()传入字符串时，内容会被作为纯文本节点插入，不会解析为DOM元素。你插入的<style>标签实际是普通文本，浏览器不会将其识别为样式规则生效
• append()方法无返回值，因此cssAdd变量值为undefined，拼接进document.write()的内容时无效
• 操作顺序逻辑错误：先向preview文档插入内容后调用document.open()，会清空整个文档的所有已有内容，之前插入的样式内容会被完全清除

修改clickRun方法的实现，可选择以下任意一种方案：

方案1：直接拼接完整HTML内容写入 #

将CSS样式作为<style>标签直接拼入HTML内容中，一次性写入iframe文档：

methods : {
  clickRun(){
    const htmlCode = this.htmlCode.getValue()
    const cssCode = this.cssCode.getValue()
    const previewDoc = document.getElementById('preview').contentWindow.document      
    // 拼接完整HTML内容，包含自定义样式
    const fullRenderContent = `${htmlCode}<style type='text/css'>${cssCode}</style>`

    previewDoc.open();
    previewDoc.write(fullRenderContent);
    previewDoc.close();
  },
}

方案2：HTML写入完成后单独插入样式节点 #

如果需要单独控制样式插入逻辑，可在HTML内容写入完成后，手动创建DOM样式节点插入head：

methods : {
  clickRun(){
    const htmlCode = this.htmlCode.getValue()
    const cssCode = this.cssCode.getValue()
    const previewDoc = document.getElementById('preview').contentWindow.document      

    // 先写入HTML结构
    previewDoc.open();
    previewDoc.write(htmlCode);
    previewDoc.close();

    // 手动创建style节点插入head
    const styleNode = document.createElement('style')
    styleNode.type = 'text/css'
    styleNode.textContent = cssCode
    previewDoc.head.appendChild(styleNode)
  },
}

如果你的HTML代码包含完整的<html>、<head>结构，方案1的<style>标签也可以通过字符串替换插入到</head>结束标签之前，和普通网页的样式引入逻辑完全一致。

内容的提问来源于stack exchange，提问作者yeonju