vue利用CodeMirrorr+json-lint实现可编辑可自动格式化的Json-Editor组件

Json-Editor is base on CodeMirrorr. Lint base on json-lint.

老规矩先来张效果图

下面捋一下实现步骤

1、安装CodeMirrorr、jsonlint

npm install codemirror
npm install jsonlint

2、编写Json-Editor组件

在如下位置新建JsonEditor文件夹及index文件

index文件全部内容如下：

<template><div class="json-editor"><textarea ref="textarea" /></div>
</template><script>
import CodeMirror from 'codemirror'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/rubyblue.css'
require('script-loader!jsonlint')
import 'codemirror/mode/javascript/javascript'
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/json-lint'export default {name: 'JsonEditor',/* eslint-disable vue/require-prop-types */props: ['value'],data() {return {jsonEditor: false}},watch: {value(value) {const editorValue = this.jsonEditor.getValue()if (value !== editorValue) {this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))}}},mounted() {// CodeMirror.fromTextArea()中第一个参数是DOM元素，而且必须是textarea元素；第二个参数是可选配置项this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {lineNumbers: true,mode: 'application/json',gutters: ['CodeMirror-lint-markers'],theme: 'rubyblue',lint: true})this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))this.jsonEditor.on('change', cm => {this.$emit('changed', cm.getValue())this.$emit('input', cm.getValue())})},methods: {getValue() {return this.jsonEditor.getValue()},}
}
</script><style scoped>
.json-editor{height: 100%;position: relative;
}
.json-editor >>> .CodeMirror {height: auto;min-height: 300px;
}
.json-editor >>> .CodeMirror-scroll{min-height: 300px;
}
.json-editor >>> .cm-s-rubyblue span.cm-string {color: #F08047;
}
.addbtn{margin-bottom: 15px;margin-left: 30px;
}
</style>

3、利用json-editor组件实现自己的逻辑，我就不放自己的业务代码了，下面是一个小demo可以参考

<template><div class="components-container"><div class="editor-container"><json-editor ref="jsonEditor" v-model="value" /></div></div>
</template><script>
import JsonEditor from '@/components/JsonEditor'const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]'export default {name: 'JsonEditorDemo',components: { JsonEditor },data() {return {value: JSON.parse(jsonData)}}
}
</script><style scoped>
.editor-container{position: relative;height: 100%;
}
</style>

https://github.com/PanJiaChen/vue-element-admin/，感谢潘大佬提供给我们这么好的后台集成系统，有需要的可以自己去瞅瞅

vue利用CodeMirrorr+json-lint实现可编辑可自动格式化的Json-Editor组件相关推荐

MonacoEditor 自动格式化sql json数据
先上个效果吧: 安装: npm install vue-monaco-editor script中引用: import MonacoEditor from 'vue-monaco-editor' 引用 ...
vue极简代码实现自定义可编辑行及操作按钮的Table表格组件（含源码及演示视频）
效果图如下: 涉及到技术点包括: 父组件给子组件传值props.动态赋值 refs 对DOM进行操作,slot具名插槽的使用,插槽通过slot-scope给父组件传值父组件代码: <templ ...
linux服务器返回json,Linux 命令行工具解析和格式化输出 JSON的方法
JSON 是一种轻量级且与语言无关的数据存储格式,易于与大多数编程语言集成,也易于人类理解 -- 当然,如果格式正确的话.JSON 这个词代表 J ava S cript O bject N otat ...
json yeid_【分享】自动格式化输出JSON的小插件分享给大家
大家在使用UNIT的时候,是不是经常要处理返回的JSON数据,经常需要复制粘贴到网页来进行格式转化很麻烦. 在这里写了一个JSON通用格式化输出的PYTHON代码:UNIT_JSON_FORMAT V ...
利用Idea中Gson插件快速编辑POJO类
利用Idea中Gson插件快速编辑POJO类 (1)需求说明现在有一个hashmap,想写一个POJO类实现它所有字段的get.set方法,当hashmap中字段较多的时候,过程会变成很繁琐的体力活 ...
vue 在线编辑excel表格（原生和使用组件的两种方式）
vue 在线编辑excel表格(原生和使用组件的两种方式) top表头和left表头格式的表格 <template><div>& ...
vue利用 vue-animate-number插件动态展示数字（从0动态滚动到指定数字）
vue利用 vue-animate-number插件动态展示数字(从0动态滚动到指定数字) 第一步:安装vue-animate-number插件 $ npm install vue-animate-n ...
利用viewbag把数据对象传到前端并转换成json对象，及解决json字符串被转义问题
利用viewbag把数据对象传到前端并转换成json对象,及解决json字符串被转义问题参考文章: (1)利用viewbag把数据对象传到前端并转换成json对象,及解决json字符串被转义问题 ( ...
ant design vue利用rowClassName给table添加行样式
ant design vue利用rowClassName给table添加行样式目录 1. 需求:表格每行数据hasVerdict值不为'1'时标红显示 2. 实现方式:table属性rowClass ...

vue利用CodeMirrorr+json-lint实现可编辑可自动格式化的Json-Editor组件

1、安装CodeMirrorr、jsonlint

2、编写Json-Editor组件

3、利用json-editor组件实现自己的逻辑，我就不放自己的业务代码了，下面是一个小demo可以参考

vue利用CodeMirrorr+json-lint实现可编辑可自动格式化的Json-Editor组件相关推荐

最新文章

热门文章