时间戳

首页 > 解决方案 > Codemirror关闭标签不是样式

codemirror - Codemirror关闭标签不是样式

问题描述

我正在尝试获取一个代码编辑器，该编辑器显示单击按钮的结果。我已经适应了如何在 iframe 中输出 codemirror 的结果？但是我在示例代码上的结束标签没有被设置样式时遇到问题。

请参阅下面的屏幕截图和代码。

如果有人能看一看并指出正确的方向，我将不胜感激（我对 JS 不太擅长）。

代码镜像示例

<!DOCTYPE html>
<html>

  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.js"></script> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.css"/> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/theme/neo.min.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/javascript/javascript.js"></script>   
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/css/css.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/htmlmixed/htmlmixed.min.js"></script>  
   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/addon/fold/indent-fold.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/addon/edit/matchbrackets.min.js"></script>
   
  <style>
  body {
    background-color: #eee;
}
iframe{height:600px;width:400px}
</style>
  </head>

  <body>  
      <div id="codeeditor"></div>
      <iframe>Example</iframe>
      <button>RUN</button>
    <script>
       var editor = CodeMirror(document.getElementById("codeeditor"), {
    value: "<html>\n<body class=\"fdf\">\n<h1>Hello world</h1>\n<button type=\"button\" disabled>Click Me!</button>\n</body>\n</html>",
    theme: "neo",
    lineNumbers: true,
    matchBrackets: true
});

$("button").click(function(){     
  $("iframe").contents().find("body").html(editor.getValue());
})
    </script>
  </body>

</html>

标签： codemirror

解决方案

我修好了它。它没有正确配置。还将代码放在单独的 html 文件中并导入它有助于所有格式。

您需要以下文件（加上任何主题 css 文件）：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/xml/xml.min.js"></script>

这是新的脚本配置：

  var editor = CodeMirror(document.getElementById("codeeditor"), {
    value: "{{ range $matches }}{{ .Content }}{{ end }}",
    theme: "neo",
    mode: "htmlmixed",
    htmlMode: true,
    lineNumbers: true,
    matchBrackets: true,
    smartIndent: true,
  });

推荐阅读