代码编辑器 plugin-view-code-edit

约 933 字大约 3 分钟

...

2026-09-28

插件说明

基于 CodeMirror 6 的全屏代码编辑弹窗，供内核编辑模板 JSON / 打印数据 / 属性函数 / 自定义元素 JSON。属于「被动编辑器」：不注册任何 toolbar 按钮，由内核的 edit() / editData() / editFunction() / editPrintElementJson() 方法调起；不安装本插件时这些方法会静默失效。

核心能力：

支持 javascript / typescript / json / html / css 语法高亮
搜索面板（Ctrl/Cmd + F）已汉化：查找、替换、区分大小写、正则、全字匹配等
编辑 javascript / typescript 时内置 hiprint 全局 API 代码补全（hiprint.*、hinnn.*、模板实例方法等）
通过 editorConfig 自定义：每行最大宽度、搜索面板默认配置、自定义补全项、额外 CodeMirror 扩展等

第三方依赖：codemirror 6、eslint-linter-browserify、jsonlint-mod。

npm install @sv-print/plugin-view-code-edit

注意

插件包含 UI 组件，必须引入样式文件：import '@sv-print/plugin-view-code-edit/dist/style.css';

示例代码

import '@sv-print/plugin-view-code-edit/dist/style.css'; // 必须引样式
import pluginViewCodeEdit from '@sv-print/plugin-view-code-edit';

await hiprint.register({
  // 需在设计器初始化前完成注册
  plugins: [pluginViewCodeEdit()], // 被动编辑器：不注册 toolbar 按钮，由内核 edit()/editData() 等方法调起
});

带配置的写法（设计器组件传 plugins props 内部同样走 register）：

const plugins = [
  pluginViewCodeEdit({
    editorConfig: {
      lineMaxLength: 120, // 每行最大 120 字符，超出横向滚动
      searchConfig: { caseSensitive: true, regexp: true }, // 搜索面板默认配置
      tabSize: 4,
      lineWrapping: true,
      autocompletion: [
        // 自定义补全项，与内置 hiprint/hinnn API 补全自动合并
        { label: 'myFunc', type: 'function', info: '自定义函数' },
      ],
    },
  }),
];

注册后无需手动调用，内核的 edit() / editData() / editFunction() / editPrintElementJson() 会自动打开编辑弹窗。

高级用法

editorConfig 参数

参数	类型	默认	说明
`lineMaxLength`	`number`	-	每行最大字符宽度，超出后横向滚动
`searchConfig`	`SearchPanelConfig`	-	搜索面板默认配置：`literal` / `wholeWord` / `caseSensitive` / `regexp`
`autocompletion`	`AutocompleteOption[]`	-	自定义补全项（js/ts 自动合并 hiprint 全局 API 补全）
`extensions`	`Extension[]`	-	额外的 CodeMirror 扩展
`useTab`	`boolean`	`true`	是否启用 Tab 缩进
`tabSize`	`number`	`2`	Tab 缩进空格数
`lineWrapping`	`boolean`	`false`	是否自动换行
`onReady`	`(payload) => void`	-	编辑器就绪回调，见下表

onReady 回调参数

在 CodeMirror EditorView 创建完成后触发：

属性	说明
`view`	EditorView 实例，可 dispatch / 获取 state
`state`	当前 EditorState
`appendExtension`	追加扩展（不会覆盖已有 lang/basicSetup 等）
`EditorView` / `EditorState` / `StateEffect`	CodeMirror 核心类

pluginViewCodeEdit({
  editorConfig: {
    onReady: ({ view, appendExtension, EditorView }) => {
      // 追加扩展：监听文档变化
      appendExtension(
        EditorView.updateListener.of((update) => {
          if (update.docChanged) console.log('内容变化:', update.state.doc.toString());
        }),
      );
      // 也可用 keymap.of([...]) 追加快捷键、读取 view/state 等
    },
  },
});

内置补全导出

import { HIPRINT_AUTOCOMPLETION } from '@sv-print/plugin-view-code-edit';

编辑 js/ts 时输入 hinnn. 触发补全，包含 hinnn.event / hinnn.mm / hinnn.pt / hinnn.px 等工具对象，hinnn.dateFormat / hinnn.throttle / hinnn.debounce 等工具函数；可通过该导出查看或扩展内置补全列表。

挂载机制与注意事项

onDesigned hook 中：globalThis.designerUtils = designerUtils → 创建 #SVPrint-code-editor 容器 → designerUtils.setEditor(editor)
内核打开方式：editor.show({ oldValue, value, lang: 'javascript'|'json'|'html'|'css', title, desc, submit, cancel })
json 提交用 jsonlint 校验；javascript 自动带 ESLint 校验 + hiprint 字段补全
不安装本插件时，内核的 edit()/editData()/editFunction()/editPrintElementJson() 静默失效

版权所有

版权归属：sv-print

许可证：署名 4.0 国际 (CC-BY-4.0)