无法在 xml 模式下让折叠装订线显示在 CodeMirror 中

Can't get fold gutter to show in CodeMirror in xml mode

本文关键字：装订线 显示 CodeMirror 折叠 xml 模式      更新时间：2023-09-26

我正在尝试为某些显示折叠装订线的XML内容创建一个CodeMirror编辑器。我正在加载一堆代码镜像库代码（版本 3.18）：

<script src="js/lib/codemirror.js"></script>
<script src="js/lib/foldcode.js"></script>
<script src="js/lib/xml-fold.js"></script>
<script src="js/lib/foldgutter.js"></script>
<script src="js/lib/xml.js"></script>
<script src="js/lib/sparql.js"></script>

然后我创建编辑器对象：

var showCodeMirrorResult = function( code, count, mode ) {
  var editor = CodeMirror( $("#results").get(0), {
    value: code,
    mode: mode,
    lineNumbers: true,
    extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
    foldGutter: true,
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
  } );
};

其中code是编码 XML 文档的字符串，mode是application/xml 。这一切都有效 - 我得到了一个语法突出显示的CodeMirror编辑器，我可以使用ctl-Q来折叠和展开XML节点，一切都很好。但是，我无法显示装订线，向用户表明折叠是他们可以在此编辑器中执行的操作。我期待这样的事情 - 注意 LH 排水沟中的三角形以指示折叠点。无论我怎么尝试，我都无法让它们出现。

你添加了 CSS 吗？

 .CodeMirror-foldmarker {    
    font-family: arial;
  }
 .CodeMirror-foldgutter {
    width: .7em;
  }
  .CodeMirror-foldgutter-open,
  .CodeMirror-foldgutter-folded {
    color: #555;
    cursor: pointer;
  }
  .CodeMirror-foldgutter-open:after {
    content: "'25BE";
  }
  .CodeMirror-foldgutter-folded:after {
    content: "'25B8";
  }
相关文章：