使用带有缩进的angular-ui-codemirror进行代码美化

时间:2015-06-14 09:03:34

标签: javascript jquery angularjs codemirror

我使用以下代码

使用jquery生成xml代码

var myCodeMirror = CodeMirror(document.body, {
  value: code,
  mode:  "text/html",
  lineNumbers:true
});

现在我在$ output变量中得到一行xml代码。我尝试使用codemirror.js来美化这段代码,它应用了样式,但它没有添加缩进。

这里我尝试使用普通的codemirror.js

从浏览器控制台尝试
{{1}}

我如何使用缩进?如何使用angular-ui-codemirror显示代码?

1 个答案:

答案 0 :(得分:1)

要获得正确的xml语法缩进,您需要包含

<script type="text/javascript" src="codemirror/mode/xml/xml.js"></script>

(xml模式js文件的路径可能不同,但你总是需要这样定义..)

然后你就像使用它一样:

config = {
    mode : "xml",
    htmlMode: true,
    // ...
};

..并且在角度中,您将ui-codemirror附加到您需要的任何元素。

在角度方面,设置虽然有所不同:

myAppModule.controller('MyController', [ '$scope', function($scope) {
$scope.editorOptions = {
    lineWrapping : true,
    lineNumbers: true,
    readOnly: 'nocursor',
    mode: 'xml',
};

}]);

..而且

<ui-codemirror ui-codemirror-opts="editorOptions"></ui-codemirror>

来源/进一步阅读:

https://libraries.io/bower/angular-sdco-tools

CodeMirror HTML mode not working

https://github.com/angular-ui/ui-codemirror/blob/master/README.md