Ace 编辑器不会格式化编辑器 div 内的数据

Question

我在编辑器div中嵌入了一些JSON数据。

如下所示：http://jsfiddle.net/P3TwV/11/

但正如小提琴所示，JSON并没有被格式化。它只是将数据放在一行中。

我希望我在没有任何空格的情况下以单行形式输入的数据，应该根据指定的类型自动进行适当的缩进格式化，如这里的JSON，并且编辑器中所有对象的折叠和展开都应该启用。

我该如何处理？

任何答案都会对我有所帮助。非常感谢。

Answer 1

Ace不支持格式化代码，您可以使用beautity.js或浏览器内置的json格式化程序

var val = editor.session.getValue()
var o = JSON.parse(val) // may throw if json is malformed
val = JSON.stringify(o, null, 4) // 4 is the indent size
editor.session.setValue(val)

Answer 2

我使用了美化，并使用了js_beautify函数和完成的工作。

Answer 3

正如用户所提到的，您应该使用beautity.js.

我尝试包括Ace Beautifier插件，但格式完全关闭。

// https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-beautify.js
var beautify = ace.require('ace/ext/beautify');
beautify.beautify(editor.getSession());

下面是一个将JS Beautifier挂接到现有Ace编辑器中的示例。

// Variables
var editor = ace.edit('editor');
var txtAra = document.querySelector('textarea[name="editor"]');
var jsbOpts = {
  indent_size : 2
};
// Setup
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/json");
syncEditor();
// Main Logic
setTimeout(formatCode, 1000); // Format sample JSON after 1 second.
// Functions
function syncEditor() {
  editor.getSession().setValue(txtAra.value);
}
function commitChanges() {
  txtAra.value = editor.getSession().getValue();
}
function formatCode() {
  var session = editor.getSession();
  session.setValue(js_beautify(session.getValue(), jsbOpts));
}

.title {
  font-size: 1.67em;
  font-weight: bold;
  text-align: center;
}
#editor {
  height: 75vh;
  width: 100%;
}
textarea[name="editor"] {
  display: none;
}
.as-console-wrapper {
  display: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.8/beautify.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>
<div>
  <div class="title">Ace Editor - JSON Format</div>
  <textarea name="editor">{"glossary": {"title": "example glossary","GlossDiv": {"title": "S","GlossList": {"GlossEntry": {"ID": "SGML","SortAs": "SGML","GlossTerm": "Standard Generalized Markup Language","Acronym": "SGML","Abbrev": "ISO 8879:1986","GlossDef": {"para": "A meta-markup language, used to create markup languages such as DocBook.","GlossSeeAlso": ["GML", "XML"]},"GlossSee": "markup"}}}}}</textarea>
  <div id="editor"></div>
</div>