【codemirror】Json编辑器使用总结

1.前言：

2.使用步骤：

拷贝admin项目中关于这个的,vue文件

npm下载对应的包

接下来可以注册为全局组件

暴露接口，通过:value传输数据给组件，就可以简单使用。

3.注意事项

4.封装成公共组件，可直接使用，基于vue2，运行后按照提示npm下载包

1.前言：

使用的是vue-template-admin中的Json编辑器。目的是展示后端传过来的Json字符串数据。

2.使用步骤：

拷贝admin项目中关于这个的.vue文件

npm下载对应的包

接下来可以注册为全局组件

暴露接口，通过:value传输数据给组件，就可以简单使用。

3.注意事项

1.设置编辑器的样式之类的，需要再引用文件，在node_moudules里面找codemirror文件夹。

2.可以设置的地方很多，可以参考官网，列举一些常用属性：
mode: "text/groovy",    //实现groovy代码高亮
mode: "text/x-java", //实现Java代码高亮
lineNumbers: true,  //显示行号
theme: "dracula", //设置主题
lineWrapping: true, //代码折叠
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
matchBrackets: true,    //括号匹配
//readOnly: true,        //只读
3.除了使用对外暴露的接口外，还可以使用setvalue（）方法去赋值

4.封装成公共组件，可直接使用，基于vue2，运行后按照提示npm下载包

新建JsonEditor.vue文件，然后注册为全局组件：

<template>
<!-- 只需要传入数据即可使用：value --><div class="json-editor"><textarea ref="textarea" /></div>
</template>
<style scoped>
@import '../../../node_modules/codemirror/lib/codemirror.css';
@import '../../../node_modules/codemirror/theme/dracula.css';
@import '../../../node_modules/codemirror/addon/lint/lint.css';
</style>
<script>
import CodeMirror from 'codemirror'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/json-lint'
// eslint-disable-next-line import/no-webpack-loader-syntax
require('script-loader!jsonlint')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 () {this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {lineNumbers: true,mode: 'application/json',gutters: ['CodeMirror-lint-markers'],theme: 'rubyblue',lint: true,readOnly: 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 lang="scss" scoped>
.json-editor {text-align-last: left;// width: 100%;// height: 100%;position: relative;::v-deep {.CodeMirror {height: auto;min-height: 300px;}.CodeMirror-scroll {min-height: 300px;}.cm-s-rubyblue span.cm-string {color: #F08047;}}
}
</style>

【codemirror】Json编辑器使用总结相关推荐

# Vue 中 JSON 编辑器使用
Vue 中 JSON 编辑器使用文章目录 Vue 中 JSON 编辑器使用背景描述 vue-json-edit 安装依赖测试页面效果图 bin-code-editor 安装依赖测试页面效果 ...
51js 的json编辑器
无忧JSON编辑器[辅助工具] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
使用jsonEditor打造一个复杂json编辑器
最近研究一个web版的json编辑器,在github中搜索,发现了这个利器. https://github.com/jdorn/json-editor 几经研究,终于把该控件的大部分功能研究透彻. 发 ...
antd picker 使用如何_如何基于jsoneditor二次封装一个可实时预览的json编辑器组件?(react版)...
前言做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一 ...
vue-json-editor json编辑器
一.概述现有一个vue项目,需要一个json编辑器,能够格式化json数据,同时也支持编辑功能. vue-json-editor 插件就可以实现这个功能二.vue-json-editor 使用安 ...
VUE2使用的JSON编辑器
1.先看看效果图,可以自行选择展示效果 2.这是我在vue2项目中使用的JSON编辑器,首先引入第三方插件 npm install vue-json-editor --save 3.引入到项目中(最下 ...
一个能在vue3中运行的JSON编辑器，能展示JSON数据的高亮，打开时有默认数据
以下是一个可以在Vue 3中运行的JSON编辑器组件.它使用了元素来输入JSON数据,并使用JSON.parse()将输入的JSON数据解析为JavaScript对象.解析成功后,将在编辑器下方展示高 ...
一个好用的 JSON 编辑器 JsonEditor V1.03.2
一个好用的 JSON 编辑器 JsonEditor V1.03.2 点击打开 JsonEditor V1.03.2 JSON 因为其它简单易用,被广泛应用的 web 程序上.JSON的良好结构性,使得 ...
推荐一个好用的JSON编辑器
推荐一个好用的JSON编辑器使用说明: http://www.thomasfrank.se/json_editor.html 在线试用: http://www.thomasfrank.se/down ...
JSON编辑器，在线与离线
JSON编辑器,在这里记录一下. http://jsoneditor.net/ 比较好用除了在线版,还有AIR版本的离线版 JSONView 有Firefor插件版.还有chrome插件版 ecli ...

【codemirror】Json编辑器使用总结

1.前言：

2.使用步骤：

拷贝admin项目中关于这个的.vue文件

npm下载对应的包

接下来可以注册为全局组件

暴露接口，通过:value传输数据给组件，就可以简单使用。

3.注意事项

4.封装成公共组件，可直接使用，基于vue2，运行后按照提示npm下载包

【codemirror】Json编辑器使用总结相关推荐

最新文章

热门文章