vue3-ace-editor前端 json格式化显示 json编辑器使用

前端 json格式化显示 json编辑器使用vue3-ace-editor

1.安装

项���目录下打开终端 运行

npm install vue3-ace-editor

2.使用

                                        格式化        压缩            import { reactive } from 'vue'import { VAceEditor } from 'vue3-ace-editor';//import "ace-builds/webpack-resolver";// 加了这个【import "ace-builds/webpack-resolver";】可能会报错//（若报错 则需要安装node.js的一个包 就是主题）// 命令：npm install --save-dev file-loaderimport 'ace-builds/src-noconflict/mode-json';import 'ace-builds/src-noconflict/theme-chrome';import 'ace-builds/src-noconflict/ext-language_tools';//ace编辑器配置const aceConfig = reactive({    lang: 'json', //解析json    theme: 'chrome', //主题    arr: [        /*所有主题*/        "ambiance",        "chaos",        "chrome",        "clouds",        "clouds_midnight",        "cobalt",        "crimson_editor",        "dawn",        "dracula",        "dreamweaver",        "eclipse",        "github",        "gob",        "gruvbox",        "idle_fingers",        "iplastic",        "katzenmilch",        "kr_theme",        "kuroir",        "merbivore",        "merbivore_soft",        "monokai",        "mono_industrial",        "pastel_on_dark",        "solarized_dark",        "solarized_light",        "sqlserver",        "terminal",        "textmate",        "tomorrow",        "tomorrow_night",        "tomorrow_night_blue",        "tomorrow_night_bright",        "tomorrow_night_eighties",        "twilight",        "vibrant_ink",        "xcode",    ],    readOnly: false, //是否只读    options: {        enableBasicAutocompletion: true,        enableSnippets: true,        enableLiveAutocompletion: true,        tabSize: 2,        showPrintMargin: false,        fontSize: 13    }});//formconst dataForm = reactive({    textareashow: '{"A":"A1"}'});const jsonError = (e) => {    console.log(`JSON字符串错误：${e.message}`);}// JSON格式化const jsonFormat = () => {    try {        dataForm.textareashow = JSON.stringify(JSON.parse(dataForm.textareashow), null, 2)    } catch (e) {        jsonError(e)    }};// JSON压缩const jsonNoFormat = () => {    try {        dataForm.textareashow = JSON.stringify(JSON.parse(dataForm.textareashow))    } catch (e) {        jsonError(e)    }}.content{    padding-top: 20px;}.el-button{    margin-left: 20px;}

效果：

说明：这里我们不需要主题其他啥的，只需要简单的功能实现即可，代码简化一下：

            格式化        压缩            import { reactive } from 'vue'import { VAceEditor } from 'vue3-ace-editor';//ace编辑器配置const aceConfig = reactive({    lang: 'json', //解析json    readOnly: false, //是否只读});//formconst dataForm = reactive({    textareashow: '{"A":"A1","B":"B1"}'});const jsonError = (e) => {    console.log(`JSON字符串错误：${e.message}`);}// JSON格式化const jsonFormat = () => {    try {        dataForm.textareashow = JSON.stringify(JSON.parse(dataForm.textareashow), null, 2)    } catch (e) {        jsonError(e)    }};// JSON压缩const jsonNoFormat = () => {    try {        dataForm.textareashow = JSON.stringify(JSON.parse(dataForm.textareashow))    } catch (e) {        jsonError(e)    }}.content{    padding-top: 20px;}.el-button{    margin-left: 20px;}

效果：

实例效果：