@vg-print/plugin-code-editor

基于 CodeMirror 6 的 Vue 代码编辑器插件，支持 Vue 2.6+ 和 Vue 3。只需要发布、安装一个 npm 包，插件会在安装时自动判断 Vue 版本并注册对应组件。

支持 JavaScript、TypeScript、JSON、HTML、CSS 语法高亮，中文搜索/替换面板，自动补全、只读模式、自动换行和 CodeMirror 扩展注入。

特性

• 一个 npm 包同时支持 Vue 2.6+ 和 Vue 3
• 基于 CodeMirror 6，支持现代编辑器能力
• JavaScript、TypeScript、JSON、HTML、CSS、纯文本模式
• 中文查找、替换、正则、区分大小写、全字匹配
• 默认 JavaScript/浏览器 API 补全和业务自定义补全
• 支持通过 onReady 或 extensions 使用任意 CodeMirror 扩展
• 支持受控值 v-model、只读、禁用、占位符、Tab 缩进和自动换行
• 同时提供 Vue 组件和无框架底层 createCodeEditor API
• JSON 模式下自动启用实时语法校验（基于 jsonlint-mod），错误行高亮并显示提示
• JavaScript / TypeScript 模式下自动启用 ESLint 实时校验（基于 eslint-linter-browserify），支持错误和警告提示

安装

npm install @vg-print/plugin-code-editor

或者：

pnpm add @vg-print/plugin-code-editor
yarn add @vg-print/plugin-code-editor

使用

Vue 3：

import '@vg-print/plugin-code-editor/style.css'
import pluginEleCodeEditor from '@vg-print/plugin-code-editor'

hiprint.register({
  plugins: [
    pluginEleCodeEditor()
  ]
})

Vue 2（Hiprint 插件模式）：

import '@vg-print/plugin-code-editor/style.css'
import { pluginEleCodeEditor } from '@vg-print/plugin-code-editor/vue2'

hiprint.register({
  plugins: [
    pluginEleCodeEditor()
  ]
})

也可以带参数：

hiprint.register({
  plugins: [
    pluginEleCodeEditor({ componentName: 'CodeEditor' })
  ]
})

注册后，CodeEditor 组件会注入到 vg-print 环境中；Vue 3 使用默认入口，Vue 2 请使用 @vg-print/plugin-code-editor/vue2 子入口。

使用示例

<template>
  <CodeEditor
    v-model="code"
    language="typescript"
    height="420px"
    placeholder="请输入代码"
    @change="(value) => console.log('内容变化：', value)"
    @ready="({ view }) => console.log('编辑器已准备：', view)"
  />
</template>

Vue 2 中兼容 value / input 双向绑定：

<template>
  <CodeEditor
    v-model="code"
    language="json"
    height="360px"
    :editor-config="{ tabSize: 2, lineWrapping: true }"
  />
</template>

组件属性

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | modelValue | string | '' | Vue 3 的 v-model 值 | | value | string | '' | Vue 2 的 v-model 值，也可用于单向传值 | | language | string | javascript | javascript、typescript、json、html、css、text | | height | string | 360px | 编辑器高度，支持 px、vh 等 CSS 单位 | | minHeight | string | - | 最小高度 | | maxHeight | string | - | 最大高度 | | placeholder | string | - | 空内容占位提示 | | readonly / readOnly | boolean | false | 是否只读 | | disabled | boolean | false | 是否禁用编辑 | | autofocus | boolean | false | 初始化后自动聚焦 | | editorConfig | EditorConfig | - | CodeMirror 编辑器配置 |

事件

<CodeEditor
  v-model="code"
  @input="onInput"
  @change="onChange"
  @ready="onReady"
  @focus="onFocus"
  @blur="onBlur"
/> 

| 事件 | 参数 | 说明 | | --- | --- | --- | | update:modelValue | value | Vue 3 v-model 更新事件 | | input | value | Vue 2 / 通用输入事件 | | change | value, view | 文档内容发生变化 | | ready | payload | 编辑器创建完成 | | focus | view | 编辑器获得焦点 | | blur | view | 编辑器失去焦点 |

editorConfig 配置

interface EditorConfig {
  language?: 'javascript' | 'typescript' | 'json' | 'html' | 'css' | 'text'
  lineMaxLength?: number
  searchConfig?: {
    caseSensitive?: boolean
    regexp?: boolean
    wholeWord?: boolean
    literal?: boolean
  }
  autocomplete?: AutocompleteOption[]
  autocompletion?: AutocompleteOption[]
  extensions?: Extension[]
  useTab?: boolean
  tabSize?: number
  lineWrapping?: boolean
  readOnly?: boolean
  editable?: boolean
  onReady?: (payload: EditorReadyPayload) => void
}

示例：

<CodeEditor
  v-model="code"
  language="typescript"
  :editor-config="{
    tabSize: 4,
    lineWrapping: true,
    lineMaxLength: 120,
    searchConfig: {
      caseSensitive: true,
      regexp: true,
      wholeWord: false
    },
    autocomplete: [
      {
        label: 'myFunc',
        type: 'function',
        detail: '业务函数',
        info: '这是一个自定义补全项'
      }
    ]
  }"
/> 

onReady 扩展编辑器

onReady 参数包含 CodeMirror 核心对象，可以动态追加扩展、监听文档变化或增加快捷键：

import { EditorView, keymap } from '@codemirror/view'

const editorConfig = {
  onReady({ view, state, appendExtension, EditorView }) {
    console.log('当前内容：', state.doc.toString())

    appendExtension(
      EditorView.updateListener.of((update) => {
        if (update.docChanged) {
          console.log('内容变化：', update.state.doc.toString())
        }
      }),
    )

    appendExtension(
      keymap.of([
        {
          key: 'Mod-s',
          run: () => {
            console.log('保存：', view.state.doc.toString())
            return true
          },
        },
      ]),
    )
  },
}

EditorReadyPayload 暴露：

• view: EditorView 实例
• state: EditorState 实例
• appendExtension: 动态追加 CodeMirror 扩展
• EditorView、EditorState、StateEffect、StateField

搜索和替换

编辑器内置中文搜索面板：

• Ctrl + F / Command + F：查找
• Ctrl + H / Command + H：替换
• F3 或 Ctrl/Command + G：查找下一个
• 支持区分大小写、正则表达式、全字匹配
• 支持上一个、下一个、全部选择、替换、全部替换

可以通过 searchConfig 设置搜索面板默认状态：

const editorConfig = {
  searchConfig: {
    caseSensitive: true,
    regexp: false,
    wholeWord: true,
  },
}

自动补全

编辑 JavaScript / TypeScript 时，编辑器默认提供一组常用的 JavaScript 和浏览器 API 补全，也可以添加业务补全：

import {
  DEFAULT_AUTOCOMPLETION,
  HINNN_AUTOCOMPLETION,
} from '@vg-print/plugin-code-editor'

const editorConfig = {
  autocomplete: [
    ...DEFAULT_AUTOCOMPLETION,
    ...HINNN_AUTOCOMPLETION,
    { label: 'myFunc', type: 'function', info: '自定义函数' },
  ],
}

补全项支持 label、type、detail、info、apply 和 boost 等 CodeMirror Completion 字段。

组件实例方法

Vue 3：

const editor = ref<CodeEditorExposed | null>(null)

editor.value?.setValue('const count = 1')
editor.value?.insertText('console.log(count)')
editor.value?.focus()
console.log(editor.value?.getValue())
console.log(editor.value?.getView())

组件实例提供：

| 方法 | 说明 | | --- | --- | | getValue() | 获取当前编辑器内容 | | setValue(value) | 设置编辑器内容 | | focus() | 聚焦编辑器 | | insertText(text, from?, to?) | 插入或替换文本 | | getView() | 获取 EditorView | | getState() | 获取当前 EditorState | | appendExtension(extension) | 动态追加扩展 | | destroy() | 销毁编辑器实例 |

底层 API

不使用 Vue 组件时，可以直接创建 CodeMirror 编辑器：

import { createCodeEditor } from '@vg-print/plugin-code-editor'
import '@vg-print/plugin-code-editor/style.css'

const editor = createCodeEditor({
  parent: document.querySelector('#editor')!,
  value: 'const count = 1',
  language: 'javascript',
  config: {
    tabSize: 2,
    lineWrapping: true,
  },
  onChange(value) {
    console.log('内容变化：', value)
  },
})

editor.setValue('const count = 2')

样式定制

默认样式通过以下路径引入：

import '@vg-print/plugin-code-editor/style.css'

组件根节点 class 为 .vg-code-editor，可以覆盖以下样式：

.vg-code-editor {
  height: 500px;
  border-radius: 8px;
}

.vg-code-editor .cm-content {
  font-size: 14px;
}

构建和发布

发布前建议执行：

npm install
npm run typecheck
npm run build
npm pack --dry-run
npm publish --access public

包构建后包含：

• Vue 3 / 通用入口：@vg-print/plugin-code-editor
• Vue 2 兼容入口：@vg-print/plugin-code-editor/vue2
• 样式入口：@vg-print/plugin-code-editor/style.css
• ESM、CommonJS 和 TypeScript 声明文件

许可证

本项目使用 GNU Lesser General Public License v3.0 or later（LGPL-3.0-or-later），许可证说明见 LICENSE，完整许可证正文以 GNU 官方文本为准。npm 页面中的许可证信息来自 package.json 的 license 字段。

开源使用须知

1. 请自觉遵守 LGPL 协议，其他用途可以联系作者进一步确认。
2. 允许用于个人学习、毕业设计、教学示例、公益项目和商业项目。
3. 商业项目使用时，请保留本项目版权信息、许可证声明和必要的开源通知。
4. 本项目按现状提供，不对特定业务场景、稳定性或安全性作额外保证；商业使用前请自行审查代码、依赖和漏洞风险。
5. 使用者应自行确认所在国家或地区、所在组织及目标项目的合规要求，并承担因使用本项目产生的责任。

以上是项目使用说明，具体权利和义务以 LICENSE 中的 LGPL 正文为准。

相关文件

• LICENSE
• CHANGELOG.md
• package.json