Vue JSON校验格式化编辑框 -- jsoneditor

项目要求编辑框要字体高亮、可编辑、可格式化、可实时检验，这些jsoneditor都可满足，并且还可以一键修复错误

1，安装

第一种方式：

npm install jsoneditor --save

第二种方式：

（当然可以使用cnpm，但当时用了cnpm，但在main.js中引入文件名时不是官方名称，别人在根据package.json文件install后启动项目会报错，需要自己手动改）

直接去package.json文件中，在dependencies中手动添加，然后npm install （可能会需要删除node_modules）即可

2，使用

2.1 main.js 中

import jsoneditor from 'jsoneditor'Vue.prototype.$jsoneditor = jsoneditor

2.2 对应文件中

<template><div class="hello"><div id="jsoneditor" style="width: 600px;height: 400px;"></div></div>
</template><script>export default {data () {return {}},mounted: function () {let container = document.getElementById('jsoneditor')let json = {"Array": [1, 2, 3],"Boolean": true,"Null": null,"Number": 123,"Object": {"a": "b", "c": "d"},"String": "Hello World",};let jsons = [{"name":"Header Parameters","children":[{"name":"Accept","dataType":"string","required":true,"defaultValue":"*/*","description":"允许接受的类型"}]},{"name":"Body Parameters","children":[{"name":"username","dataType":"string","required":true,"defaultValue":"zhangsan","description":"用户名"},{"name":"duixiang","dataType":"object","required":true,"defaultValue":"","description":"对象","children":[{"name":"childName","dataType":"string","required":true,"defaultValue":"lisi","description":"孩子名"},{"name":"childAge","dataType":"int","required":true,"defaultValue":"10","description":"密码"}]},{"name":"shuzu","dataType":"array","required":true,"defaultValue":"","description":"数组","children":[{"name":"childNumber","dataType":"int","required":true,"defaultValue":"10","description":"孩子号"}]}]}]let options = {mode: 'code',modes: ['code'],onError: function(err) {alert(err.toString());}}var codeEditor = new this.$jsoneditor(container, options);codeEditor.set(json)},methods: {},computed: {}}
</script>
<style></style>

2-3 获取编辑框中的内容，先初始化声明 this.codeEditorR = {}，再调用方法 getText()

this.codeEditorR.getText()

2-4 需要销毁时，先初始化声明 this.codeEditorR = {}，调用方法 destroy()

this.codeEditorP.destroy()

3，jsoneditor.js 有各种方法的详细说明，需要时自行查阅即可

4，效果图如下

Vue JSON校验格式化编辑框 -- jsoneditor相关推荐

在线代码格式化，在线JSON校验格式化
在线代码格式化 http://tool.oschina.net/codeformat/json 在线JSON校验格式化 http://www.kjson.com/ 两个好用工具
手动json校验格式化
<body><textarea id="a"></textarea><input type="button" valu ...
android仿微信图片编辑器,electron/vue可编辑框contenteditable|仿微信截图
基于Electron+vue实现div可编辑contenteditable插入表情|electron-vue截图功能为了避免使用 vue 手动建立起 electron 应用程序.electron-v ...
js实现json格式化，以及json校验工具的简单实现
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, ...
vue html 格式化,解决在写Vue时，格式化代码属性自动换行的问题
参考来源特别说明,这些内容非本人原创,只是网络上说法很多,而这种我亲测有效,分享给大家感谢segmentfault网用户 Raymond 它拥有3.6k的点赞量感谢segmentfault网用户 ...
php json schema,php使用json-schema模块实现json校验示例，jsonschema
php使用json-schema模块实现json校验示例,jsonschema 本文实例讲述了php使用json-schema模块实现json校验.分享给大家供大家参考,具体如下: 客户端和服务端的h ...
一个Json在线格式化的网站
一个Json在线格式化的网站网址: http://jsonformatter.curiousconcept.com/ 便于我们调试JSON非常的方便 posted on 2011-03-31 ...
vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
element筛选 ajax,vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
##vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询基于element Transfer 直接上代码 XXXXX 编辑XXX 编辑XXXX style=" ...
编辑框CEdit自动换行简单设置
在VC 6中可以将一个编辑框的"Styles"中的"Multiline"和"Auto VScroll"勾上,然后编辑框里面的内容即可自动换行 ...

Vue JSON校验格式化编辑框 -- jsoneditor

Vue JSON校验格式化编辑框 -- jsoneditor相关推荐

最新文章

热门文章