【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文件，然后注册为全局组件：