【vue-codemirror】Vue中强大的编辑器插件--vue-codemirror

写在前面:

我手里有个项目,近期有想接活的小伙伴可以来了解一下。项目需求我放giithub上了。

github.com/yuhan-9527/coder2retire

在Vue中如何使用CodeMirror插件

CodeMirror是一个功能强大的Web代码编辑器,广泛应用于各种Web应用中。在Vue3项目中集成CodeMirror,可以显著提升代码编辑和展示的用户体验。本文将结合实际案例,详细介绍在Vue3中使用CodeMirror插件的方法。

一、安装CodeMirror插件

首先,我们需要安装CodeMirror相关的插件。在Vue3项目中,可以通过npm或yarn进行安装。

  1. 安装vue-codemirror包

    css 复制代码
    npm install vue-codemirror --save

    或者

    csharp 复制代码
    yarn add vue-codemirror
  2. 安装语言支持包

    如果你需要支持特定的编程语言,比如JavaScript,可以安装对应的语言包。

    css 复制代码
    npm i @codemirror/lang-javascript

    或者

    sql 复制代码
    yarn add @codemirror/lang-javascript
  3. 安装主题包

    CodeMirror提供了多种主题,你可以选择自己喜欢的主题进行安装。例如,安装One Dark主题:

    css 复制代码
    npm i @codemirror/theme-one-dark

    或者

    sql 复制代码
    yarn add @codemirror/theme-one-dark

二、创建CodeMirror组件

接下来,我们需要在Vue3项目中创建一个CodeMirror组件,用于代码编辑和展示。

  1. 新建组件mirrorTextArea.vue

    xml 复制代码
    <template>
      <codemirror
        v-model="code"
        placeholder="Code goes here..."
        :style="{ height: '100%' }"
        :autofocus="true"
        :tabSize="2"
        :extensions="extensions"
      />
    </template>
    
    <script lang="ts" setup>
    import { Codemirror } from "vue-codemirror";
    import { javascript } from "@codemirror/lang-javascript";
    import { oneDark } from "@codemirror/theme-one-dark";
    import { ref } from "vue";
    import { EditorView } from "@codemirror/view";
    
    let myTheme = EditorView.theme({
      "&": { color: "#0052D9", backgroundColor: "#FFFFFF" },
      ".cm-content": { caretColor: "#0052D9" },
      ".cm-activeLine": { backgroundColor: "#FAFAFA" },
      ".cm-activeLineGutter": { backgroundColor: "#FAFAFA" },
      "&.cm-focused .cm-cursor": { borderLeftColor: "#0052D9" },
      "&.cm-focused .cm-selectionBackground, ::selection": {
        backgroundColor: "#0052D9",
        color: "#FFFFFF"
      },
      ".cm-gutters": { backgroundColor: "#FFFFFF", color: "#ddd", border: "none" }
    }, { dark: true });
    
    interface IProps {
      height?: string;
    }
    
    const props = withDefaults(defineProps<IProps>(), { height: '400px' });
    const code = ref('');
    const extensions = [javascript(), myTheme];
    
    const change = () => {
      // 可以在这里添加代码变化时的处理逻辑
    };
    </script>
    
    <style scoped>
    /* 可以在这里添加组件的样式 */
    </style>

    在这个组件中,我们使用了vue-codemirror提供的Codemirror组件,并通过v-model指令实现了双向数据绑定。我们还设置了编辑器的一些基本属性,如自动聚焦、制表符大小等,并添加了JavaScript语言支持和自定义的One Dark主题。

  2. 在父组件中使用mirrorTextArea组件

    现在,我们可以在父组件中使用mirrorTextArea组件来展示代码编辑器。

    xml 复制代码
    <template>
      <div>
        <mirrorTextArea :height="editorHeight" />
      </div>
    </template>
    
    <script lang="ts" setup>
    import { ref } from "vue";
    import mirrorTextArea from "./components/mirrorTextArea.vue";
    
    const editorHeight = ref('600px');
    </script>
    
    <style scoped>
    /* 可以在这里添加父组件的样式 */
    </style>

    在这个例子中,我们将mirrorTextArea组件的高度设置为600px,并通过:height属性传递给子组件。

三、配置CodeMirror编辑器

CodeMirror编辑器提供了丰富的配置选项,可以满足不同的需求。接下来,我们将介绍一些常用的配置选项。

  1. 设置编辑器高度和宽度

    可以通过内联样式或CSS类来设置编辑器的高度和宽度。

    ini 复制代码
    <codemirror
      v-model="code"
      :style="{ height: '400px', width: '600px' }"
      placeholder="Code goes here..."
      :autofocus="true"
      :tabSize="2"
      :extensions="extensions"
    />
  2. 设置语言模式

    CodeMirror支持多种编程语言,可以通过设置mode属性来选择语言模式。

    ini 复制代码
    <codemirror
      v-model="code"
      :style="{ height: '400px' }"
      placeholder="Code goes here..."
      :autofocus="true"
      :tabSize="2"
      :extensions="[javascript(), oneDark]"
      mode="text/javascript"
    />

    在这个例子中,我们将编辑器设置为JavaScript模式。

  3. 设置主题

    可以通过设置extensions属性来应用主题。

    ini 复制代码
    <codemirror
      v-model="code"
      :style="{ height: '400px' }"
      placeholder="Code goes here..."
      :autofocus="true"
      :tabSize="2"
      :extensions="[javascript(), oneDark]"
    />

    在这个例子中,我们应用了One Dark主题。

  4. 设置自动聚焦

    可以通过设置autofocus属性来使编辑器在页面加载时自动聚焦。

    ini 复制代码
    <codemirror
      v-model="code"
      :style="{ height: '400px' }"
      placeholder="Code goes here..."
      :autofocus="true"
      :tabSize="2"
      :extensions="[javascript(), oneDark]"
    />
  5. 设置制表符大小

    可以通过设置tabSize属性来设置制表符的大小(以空格为单位)。

    ini 复制代码
    <codemirror
      v-model="code"
      :style="{ height: '400px' }"
      placeholder="Code goes here..."
      :autofocus="true"
      :tabSize="4"
      :extensions="[javascript(), oneDark]"
    />
  6. 设置占位符

    可以通过设置placeholder属性来显示占位符文本。

    ini 复制代码
    <codemirror
      v-model="code"
      :style="{ height: '400px' }"
      placeholder="Enter your code here..."
      :autofocus="true"
      :tabSize="2"
      :extensions="[javascript(), oneDark]"
    />
  7. 禁用编辑器

    可以通过设置disabled属性来禁用编辑器,使其变为只读状态。

    ini 复制代码
    <codemirror
      v-model="code"
      :style="{ height: '400px' }"
      placeholder="Code goes here..."
      :autofocus="true"
      :tabSize="2"
      :extensions="[javascript(), oneDark]"
      :disabled="true"
    />
  8. 监听事件

    CodeMirror提供了多种事件,如changeinputready等,可以通过监听这些事件来处理编辑器中的变化。

    ini 复制代码
    <codemirror
      v-model="code"
      :style="{ height: '400px' }"
      placeholder="Code goes here..."
      :autofocus="true"
      :tabSize="2"
      :extensions="[javascript(), oneDark]"
      @change="handleChange"
      @input="handleInput"
      @ready="handleReady"
    />
    
    <script lang="ts" setup>
    import { ref } from "vue";
    
    const code = ref('');
    
    const handleChange = (value: string, viewUpdate: any) => {
      console.log('Code changed:', value);
    };
    
    const handleInput = (value: string) => {
      console.log('Code input:', value);
    };
    
    const handleReady = (editor: any) => {
      console.log('Editor is ready:', editor);
    };
    </script>
相关推荐
jojo是只猫17 分钟前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机4 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程8 小时前
2025前端面试题
前端·面试
前端小趴菜0510 小时前
React - createPortal
前端·vue.js·react.js
晓131310 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo10 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴11 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78912 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼12 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原12 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序