vue3+TS使用Codemirror插件实现浏览器的多功能文本编辑器

最新推荐文章于 2025-10-23 02:26:37 发布

原创

最新推荐文章于 2025-10-23 02:26:37 发布 · 4.6k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

本文介绍了如何在Vue3项目中使用Codemirror5创建一个代码编辑器组件。首先，通过npm或yarn安装所需包。然后，全局或局部注册组件。接着，在模板中使用组件并设置选项、事件监听器。文章还提供了TS支持的示例，并解决了可能出现的模块找不到的问题。

简介：
Codemirror的vue3组件，开箱即用的代码编辑器组件。基于Codemirror5开发，仅支持vue3.

实现步骤

第一步：安装

// npm
npm install codemirror-editor-vue3 codemirror@5.x -S

// yarn
yarn add codemirror-editor-vue3 codemirror@^5.65.12

如果项目支持TS则还需要安装一个包

// npm
npm install @types/codemirror -D

// yarn
yarn add @types/codemirror

第二步：注册组件

import { InstallCodemirro } from "codemirror-editor-vue3" 


方式1： 
app.use(InstallCodemirro) 

方式2：
app.use(InstallCodemirro, { componentName: "customName" })

注意：提示不建议全局注册组件，这会导致无法正确获取模板上的类型提示。

第三步：在组件中使用

Vue3+TS

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    ref="cmRef"
    height="400"
    width="600"
    @change="onChange"
    @input="onInput"
    @ready="onReady"