【codemirror】Json编辑器使用总结

左手的ㄟ右手 2023-10-01 12:44 8阅读 0赞

**目录**

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>
    
      <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>

--------------------