自定义编辑器插件

说明

默认 @sv-print/plugin-view-code-edit 插件使用的是 codemirror 6.x 插件. 如果项目中 有其他版本,或者不想使用 codemirror 6.x 插件, 可以编写一个自定义的 编辑器插件.

组件内部 使用的是 designerUtils.editor.show 方法显示编辑器.传递参数 :

const options = {
  value: 'let a = "i不简"', // 内容
  lang: 'javascript', // 语言类型
  title: '编辑器标题', // 标题
  submitText: '确定', // 确定按钮文字
  submit: (value) => {
    console.log('确认事件', value)
  },
  cancelText: '取消', // 取消按钮文字
  cancel: (value) => {
    console.log('取消事件', value)
  },
}
designerUtils.editor.show(options)

编写编辑器主体(vue3)

编辑器 editor.vue

<template>
  <div>
     xxxxx 编辑器自行实现
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const dialogShow = ref(false);
// 导出方法
const show = (options) => {
  // xxx 核心逻辑,更新 编辑器内容 等等
  dialogShow.value = true;
};
const close = () => {
  dialogShow.value = false;
}
// 其他方法, 导出, 方便用户 api 调用
const submit = () => {
  console.log('确认事件');
  close();
}
const cancel = () => {
  console.log('取消事件');
  close();
}
defineExpose({
  show,
  close,
  submit,
  cancel
});
</script>

编写插件

插件主体 index.ts

import type { PluginOptions } from "sv-print";
import { createApp } from "vue";
import Editor from './editor.vue'

export default function plugin(config?: any): PluginOptions {
  return {
    name: "codeEdit",
    description: "代码编辑器",
    hooks: [
      {
        hook: "onDesigned",
        name: "codeEdit",
        description: "代码编辑器",
        priority: 1,
        run: ({ hiprint, designerUtils }) => {
          setTimeout(() => {
            // 编辑器容器
            const designerContainer = globalThis.$("#SVPrint");
            // 编辑器容器
            let codeEditContainer = globalThis.$("#SVPrint-code-editor");
            if (codeEditContainer.length == 0) {
              codeEditContainer = globalThis.$(`<div id="SVPrint-code-editor"></div>`);
              designerContainer.append(codeEditContainer);
            }
            const editor = createApp(Editor);
            // 挂载 vue 实例
            editor.mount(codeEditContainer[0]);
            // 编辑器挂载到 designerUtils
            designerUtils.setEditor(editor);
          }, 0);
        },
      },
    ],
    leastHiprintVersion: "0.3.0",
  };
}