[JavaScript知识库] vue CodeMirror组件封装完成新增和编辑操作

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue CodeMirror组件封装完成新增和编辑操作 -> 正文阅读

[JavaScript知识库]vue CodeMirror组件封装完成新增和编辑操作

之前项目里要做在线代码编辑器，找了很多最后相比较下来觉得 CodeMirror还不错，所以拿出来给大家分享一下。顺便在此做个记录方便以后查阅。

CodeMirror官网：https://codemirror.net/

第一步：安装插件

npm i codemirror --save

第二步：子组件封装

<template lang="pug">
  .json-editor
    textarea(ref='textareaCoder')
</template>

<script>
import codeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
// 代码高亮必须引入
import 'codemirror/mode/javascript/javascript'
import 'codemirror/theme/rubyblue.css'
// 主题样式
import 'codemirror/theme/rubyblue.css'
// 括号显示匹配
import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/addon/selection/active-line'
// 括号、引号编辑和删除时成对出现
import 'codemirror/addon/edit/closebrackets'
// 全屏
import 'codemirror/addon/display/fullscreen.css'
import 'codemirror/addon/display/fullscreen.js'
// 折叠
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldcode'
import 'codemirror/addon/fold/foldgutter'
import 'codemirror/addon/fold/brace-fold'
import 'codemirror/addon/fold/comment-fold'

export default {
  data() {
    return {
      codeEditor: null,
      code: '',
    }
  },
  mounted () {
    this.initCodeEditor()
  },
  methods: {
    initCodeEditor () {
      this.codeEditor = codeMirror.fromTextArea(this.$refs.textareaCoder, {
        theme: 'rubyblue',
        tabSize: 2,
        mode: 'javascript',
        // 是否智能缩进
        smartIndent: true,
        // 当前行高亮
        styleActiveLine: true,
        // 显示行号
        lint: true,
        lineNumbers: true,
        // 添加折叠
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        // 括号匹配显示
        matchBrackets: true,
        // 输入和退格时成对
        autoCloseBrackets: true,
      })
      // 监听改变
      this.codeEditor.on('change', item => {
        this.code = item.getValue()
      })

      this.codeEditor.setOption("extraKeys", {
        // F1键切换全屏
        "F1" (cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        // Esc键退出全屏
        "Esc" (cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
      });
    },
    // 赋值操作
    setValue (val) {
      this.codeEditor.setValue(val)
    },
    refresh() {
      this.codeEditor && this.codeEditor.refresh()
    },
  }
}
</script>

<style lang="scss" scoped>
.json-editor {
  height: 100%;
  position: relative;
  line-height: initial;
}
.json-editor >>> .CodeMirror {
  height: auto;
  min-height: 250px;
}
.json-editor >>> .CodeMirror-scroll {
  min-height: 250px;
}
.json-editor >>> .cm-s-rubyblue span.cm-string {
  color: #f08047;
}
</style>

第三步：父组件引用

<template lang="pug">
	div
	  code-mirror(ref="codeMirror")
</template>

<script>
import CodeMirror from '@/code-mirror/index.vue'

export default {
	CodeMirror,
	methods: {
		refresh() {
	      this.$refs.codeMirror.refresh()
	    },
	    // 获取编辑器的值
	    getValue () {
	      return this.$refs.codeMirror.code
	    },
	    // 回显赋值
	    setValue (value) {
	      this.$refs.codeMirror.setValue(value)
	    },
	}
}
</script>