前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >json的格式化与压缩并用ace.js优化交互与展示

json的格式化与压缩并用ace.js优化交互与展示

作者头像
lzugis
发布2023-06-10 11:21:00
5250
发布2023-06-10 11:21:00
举报

概述

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

效果

错误提示
错误提示
格式化
格式化
压缩
压缩

实现

1. 初始化编辑器

代码语言:javascript
复制
//初始化代码编辑器
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. 格式化

代码语言:javascript
复制
var json = editor.getValue()
if(json) {
  editor.setValue(JSON.stringify(JSON.parse(json), null, 2))
} else {
  alert('json不能为空')
}

3. 压缩

代码语言:javascript
复制
var json = editor.getValue()
if(json) {
  editor.setValue(JSON.stringify(JSON.parse(json)))
} else {
  alert('json不能为空')
}

4. 复制代码

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

代码语言:javascript
复制
var json = editor.getValue()
if(json) {
  copyTextToClipboard(json);
  alert('复制成功')
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023-06-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 概述
  • 效果
  • 实现
    • 1. 初始化编辑器
      • 2. 格式化
        • 3. 压缩
          • 4. 复制代码
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档