@vg-print/plugin-code-edit

一个面向 Vue 3 的轻量代码编辑器插件，基于 vue-prism-editor 和 PrismJS 实现。

当前版本专注 Vue 3，提供代码编辑、语法高亮、行号、Tab 缩进、撤销重做、中文搜索替换、简单自动补全和实例 API。编辑器采用 textarea + 高亮预览的轻量方案，适合表单代码编辑、模板编辑和中小体量代码场景。

特性

• Vue 3 + Vite + TypeScript
• JavaScript、TypeScript、JSON、HTML、CSS 语法高亮
• 中文查找、替换、正则、区分大小写、全字匹配
• 行号、只读、禁用、占位符、Tab 缩进、自动换行
• 自定义补全项和 hINNN 补全项
• onReady 暴露 textarea、预览节点和常用编辑方法
• 支持 Vue 组件和无模板的 createCodeEditor API
• PrismJS 语言包按需引入，发布包不捆绑完整编辑器运行时

安装

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

组件样式需要在应用入口引入：

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

Vue 3 基础用法

全局安装

import { createApp } from 'vue'
import App from './App.vue'
import pluginCodeEditor from '@vg-print/plugin-code-edit'
import '@vg-print/plugin-code-edit/style.css'

createApp(App)
  .use(pluginCodeEditor())
  .mount('#app')

局部使用

<script setup lang="ts">
import { ref } from 'vue'
import { CodeEditor } from '@vg-print/plugin-code-edit'

const code = ref('const message = "hello vg-print"')
</script>

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

组件属性

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | modelValue | string | '' | Vue 3 v-model 的值 | | language | string | javascript | javascript、typescript、json、html、css、text | | height | string | 360px | 编辑器高度 | | minHeight | string | - | 最小高度 | | maxHeight | string | - | 最大高度 | | placeholder | string | - | 空内容提示 | | readonly / readOnly | boolean | false | 是否只读 | | disabled | boolean | false | 是否禁用 | | autofocus | boolean | false | 初始化后自动聚焦 | | lineNumbers | boolean | true | 是否显示行号 | | editorConfig | EditorConfig | - | 编辑器扩展配置 |

事件

<CodeEditor
  v-model="code"
  @input="onInput"
  @change="onChange"
  @ready="onReady"
  @focus="onFocus"
  @blur="onBlur"
  @keydown="onKeydown"
  @keyup="onKeyup"
  @click="onClick"
/> 

| 事件 | 参数 | 说明 | | --- | --- | --- | | update:modelValue | value | Vue 3 v-model 更新 | | input | value | 输入内容变化 | | change | value, textarea | 内容变化，同时返回原生 textarea | | ready | payload | 编辑器初始化完成 | | focus | FocusEvent | 获得焦点 | | blur | FocusEvent | 失去焦点 | | keydown | KeyboardEvent | 键盘按下 | | keyup | KeyboardEvent | 键盘释放 | | click | MouseEvent | 编辑器点击 |

editorConfig 配置

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

示例：

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

搜索和替换

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

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

也可以通过组件实例调用：

editor.value?.openSearch()
editor.value?.getSearchApi().findNext()
editor.value?.getSearchApi().replaceNext()
editor.value?.getSearchApi().replaceAll()
editor.value?.closeSearch()

自动补全

编辑器会根据当前单词前缀显示补全列表，支持上下键选择、Enter/Tab 插入：

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

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

自定义补全项支持 label、type、detail、info、boost 和 apply：

{
  label: 'wrapLog',
  type: 'function',
  apply: ({ value, from, to }) => `console.log(${value.slice(from, to)})`,
}

onReady

onReady 会返回原生编辑器节点和通用操作方法：

const editorConfig = {
  onReady({ textarea, preview, lineNumbers, focus, getValue, setValue, setSelection }) {
    console.log(textarea)
    console.log(preview)
    console.log(lineNumbers)
    console.log(getValue())

    focus()
    setValue('const count = 1')
    setSelection(0, 5)
  },
}

组件实例方法

<script setup lang="ts">
import { ref } from 'vue'
import type { CodeEditorExposed } from '@vg-print/plugin-code-edit'

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

const insertLog = () => editor.value?.insertText('console.log(value)')
</script>

| 方法 | 说明 | | --- | --- | | getValue() | 获取当前内容 | | setValue(value) | 设置内容 | | focus() | 聚焦编辑器 | | insertText(text, from?, to?) | 插入或替换文本 | | getTextarea() | 获取原生 textarea | | getPreview() | 获取高亮预览节点 | | openSearch() / closeSearch() | 打开或关闭搜索面板 | | getSearchApi() | 获取搜索、替换 API | | destroy() | 移除编辑器 DOM |

底层 API

不直接使用组件模板时，可以使用 createCodeEditor：

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

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

editor.setValue('const count = 2')
editor.openSearch()

样式定制

默认样式包含 vue-prism-editor 基础布局和 Prism token 颜色：

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

可以覆盖以下 class：

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

.vg-prism-editor {
  font-size: 14px;
}

注意事项

vue-prism-editor 采用 textarea 与高亮预览层叠的轻量实现，不是完整语言服务器编辑器。因此：

• 不提供 CodeMirror/Monaco 级别的语义补全、折叠和诊断能力
• 大型文档会受到 DOM 高亮刷新影响
• 高亮预览层和 textarea 需要保持相同的字体、行高、字间距等布局属性
• 当前版本仅支持 Vue 3，Vue 2 入口已移除

构建和发布

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

许可证

本项目使用 GNU Lesser General Public License v3.0 or later（LGPL-3.0-or-later），许可证说明见 LICENSE。

相关链接

• vue-prism-editor
• PrismJS
• CHANGELOG.md