vue3代码编辑组件codemirror-editor-vue3 使用

在Vue3中使用CodeMirror-editor-vue3组件是一个很好的选择，它能够提供强大的代码编辑功能，并且与Vue3完美集成。以下是在Vue3中使用CodeMirror-editor-vue3组件

官方文档：codemirror-editor-vue3 | codemirror-editor-vue3 (rennzhang.github.io)

安装使用

首先，需要安装CodeMirror-editor-vue3组件。可以通过npm或yarn进行安装，使用以下命令：

npm install codemirror-editor-vue3 --save

或者

yarn add codemirror-editor-vue3

安装完成后，可以在Vue3组件中引入CodeMirror-editor-vue3组件。在需要使用代码编辑器的组件中，添加以下代码：

import { codemirrorEditor } from 'codemirror-editor-vue3';

在Vue3组件的模板中，添加一个textarea元素，并使用codemirrorEditor组件将其包装起来。同时，需要传入一些配置选项，例如主题、模式等。以下是一个简单的示例：

<template>
  <div>
    <codemirror-editor 
		v-model="code" 
		:options="editorOptions"  
		@change="onChange">
		</codemirror-editor>
  </div>
</template>

其中，v-model绑定了代码编辑器的值，editorOptions是一个包含配置选项的对象。具体的配置选项可以参考CodeMirror-editor-vue3的文档。

在Vue3组件的setup中，添加一个用于存储代码编辑器值的变量和一个包含配置选项的对象。例如：

import { ref, onMounted, onUnmounted } from "vue"
import "codemirror/mode/javascript/javascript.js"
import Codemirror from "codemirror-editor-vue3"
export default {
  components: { Codemirror },
  setup() {
    const code = ref()

    const cmOptions = {
      mode: "text/javascript"
    }
onChange() {
      // console.log(code);
    },
}
}

通过以上步骤，就可以在Vue3中使用CodeMirror-editor-vue3组件了。这个组件提供了丰富的配置选项和事件，可以根据实际需求进行自定义。

代码折叠功能使用

第一步导入需要的资源

// 折叠
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'

配置cmOptions

cmOptions: {
	foldGutter: true, // 启用行槽中的代码折叠
	gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'], // 启用折叠需要的配置
}

完整的代码示例

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    placeholder="测试 placeholder"
    text-align="left"
    @change="onChange"
    style="text-align: left"
  />
</template>

<script>
import Codemirror from "codemirror-editor-vue3";
// 导入的语言
import "codemirror/mode/javascript/javascript.js";
import "codemirror/mode/python/python.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'
import { ref } from "vue";

export default {
  name: "MyCodemirror",
  props: {
    mode: String,
  },
  components: { Codemirror },
  setup(props) {
    const code = ref();
    const mode = props.mode || "python"
    return {
      code,
      cmOptions: {
        mode: mode, // 语言模式
        theme: "default", // 主题
        lineNumbers: true, // 显示行号
        smartIndent: true, // 智能缩进
        indentUnit: 4, // 智能缩进单位为4个空格长度
        foldGutter: true, // 启用行槽中的代码折叠
        styleActiveLine: true, // 显示选中行的样式
        completeSingle: false,
        lineWrapping: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'], // 启用折叠需要的配置
      },
      onChange() {
        // console.log(code);
      },
    };
  },

}
</script>

有关使用上的问题，欢迎您在底部评论区留言，一起交流~

安装使用

代码折叠功能使用

读者评论