概述

json是前后端交互的一种非常常见的格式，本文分享一个小工具实现json的格式化与压缩，并通过ace.js优化交互与展示。

效果

错误提示 格式化 压缩

实现

1. 初始化编辑器

//初始化代码编辑器
var editor = null;
function initEditor(){
  //获取控件   id ：codeEditor
  editor = ace.edit("codeEditor");
  //设置风格和语言（更多风格和语言，请到github上相应目录查看）
  theme = "monokai";
  // theme = "terminal";
  //语言
  language = "json";
  editor.setTheme("ace/theme/" + theme);
  editor.session.setMode("ace/mode/" + language);
  //字体大小
  editor.setFontSize(18);
  //设置只读（true时只读，用于展示代码）
  editor.setReadOnly(false);
  //自动换行,设置为off关闭
  editor.setOption("wrap", "free");
  //启用提示菜单
  ace.require("ace/ext/language_tools");
  editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true
  });
}

2. 格式化

var json = editor.getValue()
if(json) {
  editor.setValue(JSON.stringify(JSON.parse(json), null, 2))
} else {
  alert('json不能为空')
}

3. 压缩

var json = editor.getValue()
if(json) {
  editor.setValue(JSON.stringify(JSON.parse(json)))
} else {
  alert('json不能为空')
}

4. 复制代码

代码的复制基于clipbord.js实现。

var json = editor.getValue()
if(json) {
  copyTextToClipboard(json);
  alert('复制成功')
}