目錄

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编辑器使用总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。