@vg-print/plugin-code-edit-vue2

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

插件使用 Vue 2 的 Options API 和 value / input 双向绑定约定，适合表单代码编辑、模板编辑和中小体量代码场景。编辑器采用 textarea + Prism 高亮预览的轻量方案。

特性

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

安装

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

在应用入口引入样式：

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

Vue 2 基础用法

全局安装

import Vue from 'vue'
import App from './App.vue'
import pluginCodeEditor from '@vg-print/plugin-code-edit-vue2'
import '@vg-print/plugin-code-edit-vue2/style.css'

Vue.use(pluginCodeEditor)

new Vue({
  render: (h) => h(App),
}).$mount('#app')

也可以指定全局组件名：

Vue.use(pluginCodeEditor, { componentName: 'VgCodeEditor' })

局部使用

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

export default Vue.extend({
  components: { CodeEditor },
  data: () => ({
    code: 'const message = "hello vg-print"',
  }),
})
</script>

<template>
  <CodeEditor
    v-model="code"
    language="typescript"
    height="420px"
    placeholder="请输入代码"
    @change="onChange"
    @ready="onReady"
  />
</template>

Vue 2 的 v-model 对应 value 属性和 input 事件：

<CodeEditor :value="code" @input="code = $event" />

modelValue 和 update:modelValue 仍然保留为迁移兼容别名，但新项目建议使用 Vue 2 原生的 v-model 写法。

组件属性

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | value | string | '' | Vue 2 v-model 的值 | | modelValue | string | - | 从 Vue 3 迁移时可使用的值别名 | | 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"
/>

| 事件 | 参数 | 说明 | | --- | --- | --- | | input | value | Vue 2 v-model 更新 | | update:modelValue | value | Vue 3 迁移兼容事件 | | 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：查找上一个
• 支持区分大小写、正则表达式、全字匹配
• 支持替换当前匹配和全部替换

通过组件实例调用：

const editor = this.$refs.editor as CodeEditorExposed

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

自动补全

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

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

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)})`,
}

ready 事件

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

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

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

组件实例方法

import Vue from 'vue'
import type { CodeEditorExposed } from '@vg-print/plugin-code-edit-vue2'

export default Vue.extend({
  methods: {
    insertLog() {
      const editor = this.$refs.editor as CodeEditorExposed
      editor.insertText('console.log(value)')
    },
  },
})

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

无模板 API

如果需要在已有 DOM 节点中创建编辑器，可以使用 Vue 2 版本的 createCodeEditor：

import { createCodeEditor } from '@vg-print/plugin-code-edit-vue2'

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

editor.setValue('const count = 2')
editor.focus()
editor.destroy()

迁移说明

• 包名确定为 @vg-print/plugin-code-edit-vue2。
• 运行时从 Vue 3 改为 Vue 2.7，组件实现改为 Options API。
• v-model 从 modelValue / update:modelValue 改为 Vue 2 的 value / input。
• vue-prism-editor 使用 Vue 2 兼容的 1.3.x 版本。
• 不再使用 createApp、script setup、defineExpose 等 Vue 3 专属 API。