Codemirror 关闭标签不是样式

Question

我正在尝试获得一个代码编辑器，它可以在单击按钮时显示结果。我已经改编但我遇到了示例代码中未设置样式的结束标记的问题。

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

如果有人能帮我看看并指出正确的方向，我将不胜感激（我对 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>

Answer 1

我修好了。它没有正确配置。还将代码放在单独的 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,
  });

Answer 2

您可以尝试该代码：-

   <!doctype html>
    <html>
      <head>
    <title>CodeMirror</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
    <link rel=stylesheet href="https://CodeMirror.net/doc/docs.css">
    <script src="https://CodeMirror.net/addon/hint/anyword-hint.js" id="anyword"></script>
    <link rel="stylesheet" href="https://CodeMirror.net/lib/codemirror.css">
    <link rel="stylesheet" href="https://CodeMirror.net/addon/hint/show-hint.css">
    <link rel="stylesheet" href="https://CodeMirror.net/addon/dialog/dialog.css">
    <link rel="stylesheet" href="https://CodeMirror.net/addon/search/matchesonscrollbar.css">
    <script src="https://CodeMirror.net/lib/codemirror.js"></script>
    <script src="https://CodeMirror.net/addon/edit/closetag.js"></script>
    <script src="https://CodeMirror.net/addon/hint/show-hint.js"></script>
    <script src="https://CodeMirror.net/addon/hint/sql-hint.js"></script>
     <script src="https://CodeMirror.net/addon/mode/loadmode.js"></script>
    <script src="https://CodeMirror.net/mode/meta.js"></script>
    <script src="https://CodeMirror.net/addon/hint/xml-hint.js"></script>
    <script src="https://CodeMirror.net/addon/hint/html-hint.js"></script>
    <script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
    <script src="https://CodeMirror.net/addon/hint/javascript-hint.js"></script>
    <script src="https://CodeMirror.net/mode/xml/xml.js"></script>
    <script src="https://CodeMirror.net/mode/javascript/javascript.js"></script>
    <script src="https://CodeMirror.net/mode/css/css.js"></script>
    <script src="https://CodeMirror.net/mode/htmlmixed/htmlmixed.js"></script>
    <script src="https://CodeMirror.net/addon/dialog/dialog.js"></script> 
    <script src="https://CodeMirror.net/addon/search/searchcursor.js"></script>
    <script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script> 
    <script src="https://CodeMirror.net/addon/search/search.js"></script> 
    <script src="https://CodeMirror.net/addon/scroll/annotatescrollbar.js"></script> 
    <script src="https://CodeMirror.net/addon/search/matchesonscrollbar.js"></script>
    </head>
    <body>
    <div id="editor"></div>
<button onclick="CloseTag()">Close Tag</button>
    <script>
        function CloseTag() {
            
            myCodeMirror.execCommand("closeTag");
        }
    </script>
    <script>
       var myCodeMirror = CodeMirror(
       document.getElementById('editor'), {
          lineNumbers: true,
       });
    </script>
    </body>
    </html>

Codemirror 关闭标签不是样式

Codemirror Closing tags not styling

codemirror