自定义编辑器插件
约 646 字大约 2 分钟
...
2026-09-29
说明
默认 @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 opt = ref({});
const content = ref(''); // 编辑的内容
// 导出方法
const show = (options) => {
opt.value = options;
// xxx 核心逻辑,更新 编辑器内容 等等
content.value = options.value;
dialogShow.value = true;
};
const close = () => {
dialogShow.value = false;
};
// 其他方法, 导出, 方便用户 api 调用
const submit = () => {
console.log('确认事件');
// 调用传递过来的 确认事件
// content.value 是编辑的内容.
opt.value.submit(content.value);
close();
};
const cancel = () => {
console.log('取消事件');
// 调用传递过来的 取消事件
// content.value 是编辑的内容.
opt.value.cancel(content.value);
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 app = createApp(Editor);
// 挂载 vue 实例
const editor = app.mount(codeEditContainer[0]);
// 编辑器挂载到 designerUtils
designerUtils.setEditor(editor); // 内核 edit* 方法依赖此编辑器
}, 0);
},
},
],
leastHiprintVersion: '0.3.0',
};
}版权所有
版权归属：sv-print