Question

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

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

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

我如何处理？

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

Answer 1

Ace不支持格式化代码，您可以使用beautify.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

我使用了beautify并使用了js_beautify函数并完成了工作。

Answer 3

提到a user时，您应该使用beautify.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编辑器的示例。

＆＃13;

// 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));
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

3 个答案: