mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-04-05 07:27:09 +08:00
docs: 1.2.0文档
This commit is contained in:
roymondchen
parent
c143a5f767
commit
f6262be397
2
.github/workflows/pages.yml
vendored
2
.github/workflows/pages.yml
vendored
@ -38,7 +38,7 @@ jobs:
|
||||
run: mkdir dist && mkdir dist/docs && mkdir dist/playground
|
||||
|
||||
- name: move to dist
|
||||
run: mv docs/dist/* dist/docs && mv playground/dist/* dist/playground
|
||||
run: mv docs/.vitepress/dist/* dist/docs && mv playground/dist/* dist/playground
|
||||
|
||||
- name: Deploy to GitHub Pages
|
||||
uses: crazy-max/ghaction-github-pages@v2
|
||||
|
||||
3
docs/.gitignore
vendored
3
docs/.gitignore
vendored
@ -1,3 +0,0 @@
|
||||
node_modules
|
||||
.temp
|
||||
.cache
|
||||
395
docs/.vitepress/config.ts
Normal file
395
docs/.vitepress/config.ts
Normal file
@ -0,0 +1,395 @@
|
||||
import path from 'path';
|
||||
import { defineConfig, DefaultTheme } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
title: 'tmagic-editor',
|
||||
description: '页面可视化平台',
|
||||
|
||||
head: [
|
||||
['meta', { name: 'theme-color', content: '#646cff' }],
|
||||
],
|
||||
|
||||
themeConfig: {
|
||||
logo: './favicon.png',
|
||||
|
||||
socialLinks: [
|
||||
{ icon: 'github', link: 'https://github.com/Tencent/tmagic-editor' }
|
||||
],
|
||||
|
||||
footer: {
|
||||
message: 'Powered by 腾讯视频会员平台技术中心',
|
||||
copyright: 'Copyright (C) 2021 THL A29 Limited, a Tencent company.'
|
||||
},
|
||||
|
||||
nav: [
|
||||
{ text: '文档', link: '/guide/', activeMatch: '/guide/' },
|
||||
{ text: 'API', link: '/api/editor/props', activeMatch: '/api/' },
|
||||
{ text: '表单配置', link: '/form-config/fields/text', activeMatch: '/form-config/' },
|
||||
{ text: '更新日志', link: 'https://github.com/Tencent/tmagic-editor/releases' },
|
||||
{ text: 'Playground', link: 'https://tencent.github.io/tmagic-editor/playground/index.html' },
|
||||
],
|
||||
|
||||
sidebar: {
|
||||
'/guide/': [
|
||||
{
|
||||
text: '文档',
|
||||
items: [
|
||||
{
|
||||
text: '介绍',
|
||||
link: '/guide/introduction.md'
|
||||
},
|
||||
{
|
||||
text: '快速开始',
|
||||
link: '/guide/'
|
||||
},
|
||||
{
|
||||
text: '基础概念',
|
||||
link: '/guide/conception.md',
|
||||
},
|
||||
{
|
||||
text: '页面发布',
|
||||
link: '/guide/publish.md'
|
||||
},
|
||||
{
|
||||
text: 'RUNTIME',
|
||||
link: '/guide/runtime.md'
|
||||
},
|
||||
{
|
||||
text: '组件开发',
|
||||
link: '/guide/component.md'
|
||||
},
|
||||
{
|
||||
text: '编辑器扩展',
|
||||
link: '/guide/editor-expand.md'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '进阶指南',
|
||||
items: [
|
||||
{
|
||||
text: 'JS Schema',
|
||||
link: '/guide/advanced/js-schema.md',
|
||||
},
|
||||
{
|
||||
text: '布局原理',
|
||||
link: '/guide/advanced/layout.md',
|
||||
},
|
||||
{
|
||||
text: '页面渲染',
|
||||
link: '/guide/advanced/page.md',
|
||||
},
|
||||
{
|
||||
text: '联动原理',
|
||||
link: '/guide/advanced/coupling.md',
|
||||
},
|
||||
{
|
||||
text: '代码块',
|
||||
link: '/guide/advanced/code-block.md',
|
||||
},
|
||||
{
|
||||
text: '@tmagic/ui',
|
||||
link: '/guide/advanced/tmagic-ui.md',
|
||||
},
|
||||
{
|
||||
text: '@tmagic/form',
|
||||
link: '/guide/advanced/tmagic-form.md',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '教程',
|
||||
items: [
|
||||
{
|
||||
text: '写在前面',
|
||||
link: '/guide/tutorial/'
|
||||
},
|
||||
{
|
||||
text: '1.Hello World',
|
||||
link: '/guide/tutorial/hello-world.md'
|
||||
},
|
||||
{
|
||||
text: '2.Runtime',
|
||||
link: '/guide/tutorial/runtime.md'
|
||||
},
|
||||
{
|
||||
text: '3.DSL解析渲染',
|
||||
link: '/guide/tutorial/render.md'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
'/api/': [
|
||||
{
|
||||
text: '编辑器',
|
||||
items: [
|
||||
{
|
||||
text: 'Editor组件',
|
||||
items: [
|
||||
{
|
||||
text: 'props',
|
||||
link: '/api/editor/props.md'
|
||||
},
|
||||
{
|
||||
text: 'slots',
|
||||
link: '/api/editor/slots.md'
|
||||
},
|
||||
{
|
||||
text: 'events',
|
||||
link: '/api/editor/events.md'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'editorService',
|
||||
items: [
|
||||
{
|
||||
text: '方法',
|
||||
link: '/api/editor/editorServiceMethods.md',
|
||||
},
|
||||
{
|
||||
text: '事件',
|
||||
link: '/api/editor/editorServiceEvents.md',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'propsService',
|
||||
items: [
|
||||
{
|
||||
text: '方法',
|
||||
link: '/api/editor/propsServiceMethods.md',
|
||||
},
|
||||
{
|
||||
text: '事件',
|
||||
link: '/api/editor/propsServiceEvents.md',
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'historyService',
|
||||
items: [
|
||||
{
|
||||
text: '方法',
|
||||
link: '/api/editor/historyServiceMethods.md',
|
||||
},
|
||||
{
|
||||
text: '事件',
|
||||
link: '/api/editor/historyServiceEvents.md',
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'eventsService',
|
||||
link: '/api/editor/eventsServiceMethods.md',
|
||||
},
|
||||
{
|
||||
text: 'uiService',
|
||||
link: '/api/editor/uiServiceMethods.md',
|
||||
},
|
||||
{
|
||||
text: 'codeBlockService',
|
||||
link: '/api/editor/codeBlockServiceMethods.md',
|
||||
},
|
||||
{
|
||||
text: 'componentListService',
|
||||
link: '/api/editor/componentListServiceMethods.md',
|
||||
},
|
||||
{
|
||||
text: 'storageService',
|
||||
link: '/api/editor/storageServiceMethods.md',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '表单',
|
||||
items: [
|
||||
{
|
||||
text: 'Form组件',
|
||||
items: [
|
||||
{
|
||||
text: 'props',
|
||||
link: '/api/form/form-props'
|
||||
},
|
||||
{
|
||||
text: 'methods',
|
||||
link: '/api/form/form-methods'
|
||||
},
|
||||
{
|
||||
text: 'events',
|
||||
link: '/api/form/form-events'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'FormDialog组件',
|
||||
items: [
|
||||
{
|
||||
text: 'props',
|
||||
link: '/api/form/form-dialog-props'
|
||||
},
|
||||
{
|
||||
text: 'methods',
|
||||
link: '/api/form/form-dialog-methods'
|
||||
},
|
||||
{
|
||||
text: 'events',
|
||||
link: '/api/form/form-dialog-events'
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '表格',
|
||||
items: [
|
||||
{
|
||||
text: 'Table组件',
|
||||
items: [
|
||||
{
|
||||
text: 'props',
|
||||
link: '/api/table/props'
|
||||
},
|
||||
{
|
||||
text: 'methods',
|
||||
link: '/api/table/methods'
|
||||
},
|
||||
{
|
||||
text: 'events',
|
||||
link: '/api/table/events'
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'stage',
|
||||
items: [
|
||||
{
|
||||
text: 'StageCore',
|
||||
items: [
|
||||
{
|
||||
text: '方法',
|
||||
link: '/api/stage/coreMethods',
|
||||
},
|
||||
{
|
||||
text: '事件',
|
||||
link: '/api/stage/coreEvents',
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
'/form-config/': [
|
||||
{
|
||||
text: '基础配置',
|
||||
items: [
|
||||
{
|
||||
text: 'Input输入框',
|
||||
link: '/form-config/fields/text.md'
|
||||
},
|
||||
{
|
||||
text: 'Textarea文本域',
|
||||
link: '/form-config/fields/textarea.md'
|
||||
},
|
||||
{
|
||||
text: 'InputNumber计数器',
|
||||
link: '/form-config/fields/number.md'
|
||||
},
|
||||
{
|
||||
text: 'Display只读文本',
|
||||
link: '/form-config/fields/display.md'
|
||||
},
|
||||
{
|
||||
text: 'Hidden隐藏域',
|
||||
link: '/form-config/fields/hidden.md'
|
||||
},
|
||||
{
|
||||
text: 'Link链接',
|
||||
link: '/form-config/fields/link.md'
|
||||
},
|
||||
{
|
||||
text: 'Checkbox多选框',
|
||||
link: '/form-config/fields/checkbox.md'
|
||||
},
|
||||
{
|
||||
text: 'Radio单选框',
|
||||
link: '/form-config/fields/radio.md'
|
||||
},
|
||||
{
|
||||
text: 'Switch开关',
|
||||
link: '/form-config/fields/switch.md'
|
||||
},
|
||||
{
|
||||
text: 'Select选择器',
|
||||
link: '/form-config/fields/select.md'
|
||||
},
|
||||
{
|
||||
text: 'Cascader级联选择器',
|
||||
link: '/form-config/fields/select.md'
|
||||
},
|
||||
{
|
||||
text: 'ColorPicker颜色选择器',
|
||||
link: '/form-config/fields/color-picker.md'
|
||||
},
|
||||
{
|
||||
text: 'DatePick日期选择器',
|
||||
link: '/form-config/fields/date-picker.md'
|
||||
},
|
||||
{
|
||||
text: 'DatetimePick日期时间选择器',
|
||||
link: '/form-config/fields/datetime-picker.md'
|
||||
},
|
||||
{
|
||||
text: 'TimePick时间选择器',
|
||||
link: '/form-config/fields/time-picker.md'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '布局配置',
|
||||
items: [
|
||||
{
|
||||
text: '布局',
|
||||
link: '/form-config/layout.md',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '联动配置',
|
||||
items: [
|
||||
{
|
||||
text: '联动',
|
||||
link: '/form-config/relate.md',
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
|
||||
vite: {
|
||||
base: '/tmagic-editor/docs/',
|
||||
|
||||
optimizeDeps: {
|
||||
esbuildOptions: {
|
||||
define: {
|
||||
global: 'globalThis',
|
||||
},
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias:[
|
||||
{ find: /^@tmagic\/form/, replacement: path.join(__dirname, '../../packages/form/src/index.ts') },
|
||||
{ find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
|
||||
{ find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },
|
||||
{ find: /^@tmagic\/design/, replacement: path.join(__dirname, '../../packages/design/src/index.ts') },
|
||||
{ find: /^@tmagic\/element-plus-adapter/, replacement: path.join(__dirname, '../../packages/element-plus-adapter/src/index.ts') },
|
||||
]
|
||||
},
|
||||
ssr: {
|
||||
noExternal: ['lodash-es'],
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1,16 +1,21 @@
|
||||
import 'element-plus/dist/index.css';
|
||||
import 'highlight.js/styles/github.css';
|
||||
|
||||
import './polyfills';
|
||||
import { defineClientConfig } from '@vuepress/client';
|
||||
import ElementPlus from 'element-plus';
|
||||
import Theme from 'vitepress/theme';
|
||||
|
||||
import TMagicDesign from '@tmagic/design';
|
||||
import MagicElementPlusAdapter from '@tmagic/element-plus-adapter';
|
||||
import MagicForm from '@tmagic/form';
|
||||
import DemoBlock from './demo-block.vue';
|
||||
|
||||
export default defineClientConfig({
|
||||
enhance({ app, router, siteData }) {
|
||||
import DemoBlock from './components/demo-block.vue';
|
||||
|
||||
import './styles/vars.css';
|
||||
|
||||
export default {
|
||||
...Theme,
|
||||
|
||||
enhanceApp({ app }) {
|
||||
app.use(ElementPlus);
|
||||
app.use(TMagicDesign, MagicElementPlusAdapter)
|
||||
app.use(MagicForm, {
|
||||
@ -35,8 +40,7 @@ export default defineClientConfig({
|
||||
}
|
||||
}),
|
||||
});
|
||||
|
||||
app.component('demo-block', DemoBlock);
|
||||
},
|
||||
setup() {},
|
||||
rootComponents: [],
|
||||
})
|
||||
};
|
||||
10
docs/.vitepress/theme/styles/vars.css
Normal file
10
docs/.vitepress/theme/styles/vars.css
Normal file
@ -0,0 +1,10 @@
|
||||
:root {
|
||||
--vp-c-brand: #2882e0;
|
||||
--vp-button-brand-border: #2882e0;
|
||||
--vp-button-brand-hover-border: #2882e0;
|
||||
--vp-c-brand-light: #559ce7;
|
||||
--vp-c-brand-lighter: #2882e0;
|
||||
--vp-c-brand-lightest: #2882e0;
|
||||
--vp-c-brand-dark: #2882e0;
|
||||
--vp-c-brand-darker: #2882e0;
|
||||
}
|
||||
357
docs/api/editor/codeBlockServiceMethods.md
Normal file
357
docs/api/editor/codeBlockServiceMethods.md
Normal file
@ -0,0 +1,357 @@
|
||||
# codeBlockService方法
|
||||
|
||||
|
||||
|
||||
## setCodeDsl
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getCodeDsl
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getCodeDslSync
|
||||
|
||||
## getCodeContentById
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setCodeDslById
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getCodeDslByIds
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setCodeEditorShowStatus
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getCodeEditorShowStatus
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setCodeEditorContent
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getCurrentDsl
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getEditStatus
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
## setEditStatus
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setId
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getId
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getMode
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setMode
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setCombineIds
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getCombineIds
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## refreshCombineInfo
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getCombineInfo
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getUndeletableList
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setUndeleteableList
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setCodeDraft
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getCodeDraft
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## removeCodeDraft
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## deleteCodeDslByIds
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getUniqueId
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## deleteCompsInRelation
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## destroy
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
37
docs/api/editor/componentListServiceMethods.md
Normal file
37
docs/api/editor/componentListServiceMethods.md
Normal file
@ -0,0 +1,37 @@
|
||||
# componentListService方法
|
||||
|
||||
## setList
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getList
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## destroy
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
35
docs/api/editor/editorServiceEvents.md
Normal file
35
docs/api/editor/editorServiceEvents.md
Normal file
@ -0,0 +1,35 @@
|
||||
|
||||
# editorService事件
|
||||
|
||||
## root-change
|
||||
|
||||
- **详情：** dsl跟节点发生变化，[editorService.set('root', {})](./editorServiceMethods.md#set)后触发
|
||||
|
||||
- **回调函数：** (value: [MApp](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts?plain=1#L66-L73) => void
|
||||
|
||||
## select
|
||||
|
||||
- **详情：** 选中组价，[editorService.select()](./editorServiceMethods.md#select)后触发
|
||||
|
||||
- **回调函数：** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)) => void
|
||||
|
||||
## add
|
||||
|
||||
- **详情：** 选中组价，[editorService.add()](./editorServiceMethods.md#add)后触发
|
||||
|
||||
- **回调函数：** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]) => void
|
||||
|
||||
|
||||
## remove
|
||||
|
||||
- **详情：** 选中组价，[editorService.remove()](./editorServiceMethods.md#remove)后触发
|
||||
|
||||
- **回调函数：** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]) => void
|
||||
|
||||
|
||||
## update
|
||||
|
||||
- **详情：** 选中组价，[editorService.update()](./editorServiceMethods.md#update)后触发
|
||||
|
||||
- **回调函数：** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]) => void
|
||||
|
||||
632
docs/api/editor/editorServiceMethods.md
Normal file
632
docs/api/editor/editorServiceMethods.md
Normal file
@ -0,0 +1,632 @@
|
||||
# editorService方法
|
||||
|
||||
## get
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'modifiedNodeIds' | 'pageLength' | 'stage'} name`
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{any} value`
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取当前指指定name的值
|
||||
|
||||
'root': 当前整个配置，也就是当前编辑器的值
|
||||
|
||||
'page': 当前正在编辑的页面配置
|
||||
|
||||
'parent': 当前选中的节点的父节点
|
||||
|
||||
'node': 当前选中的第一个节点
|
||||
|
||||
'highlightNode': 当前高亮的节点
|
||||
|
||||
'nodes': 当前选中的所有节点
|
||||
|
||||
'modifiedNodeIds': 当前页面所有改动过的节点id
|
||||
|
||||
'pageLength': 所以页面个数
|
||||
|
||||
'stage': [StageCore](../stage/coreMethods.md)实例
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const node = editorService.get('node');
|
||||
```
|
||||
|
||||
## set
|
||||
- `{'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'modifiedNodeIds' | 'pageLength' | 'stage'} name`
|
||||
- `{any} value`
|
||||
|
||||
- **详情：**
|
||||
参考[get](#get)方法
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const node = editorService.get('node');
|
||||
|
||||
editorService.set('node', {
|
||||
...node,
|
||||
name: 'new name'
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
## getNodeInfo
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number | string}` id 组件id
|
||||
|
||||
- `{boolean}` raw 是否使用toRaw，默认为true
|
||||
|
||||
:::tip
|
||||
如果raw为false，对获取到的对象进行操作会触发vue响应式处理
|
||||
:::
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[EditorNodeInfo](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/type.ts#L139-L143)}
|
||||
|
||||
- **详情：**
|
||||
|
||||
根据id获取组件、组件的父组件以及组件所属的页面节点
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const info = editorService.getNodeInfo('text_123');
|
||||
|
||||
console.log(info.node);
|
||||
console.log(info.parent);
|
||||
console.log(info.page);
|
||||
```
|
||||
|
||||
## getNodeById
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number | string}` id
|
||||
|
||||
- `{boolean}` raw 是否使用toRaw，默认为true
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} 组件节点配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
根据id获取组件的信息
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const node = editorService.getNodeById('text_123');
|
||||
|
||||
console.log(node);
|
||||
```
|
||||
|
||||
## getParentById
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number | string}` id
|
||||
|
||||
- `{boolean}` raw 是否使用toRaw，默认为true
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} 指点组件的父节点配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
根据ID获取指点节点的父节点配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const parent = editorService.getParentById('text_123');
|
||||
|
||||
console.log(parent);
|
||||
```
|
||||
|
||||
## getLayout
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} parent
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} node 可选
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[Layout](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/type.ts#L297-L302)>} 当前布局模式
|
||||
|
||||
- **详情：**
|
||||
|
||||
只有容器拥有布局，目前支持的布局有流式布局（relative），绝对定位布局（absolute），固定定位布局（fixed）
|
||||
|
||||
:::tip
|
||||
固定定位布局需要从当前选中节点判断，固需要传递可选参数 node
|
||||
|
||||
其他布局则是从父组件（容器）来判断
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const parent = editorService.getParentById('text_123');
|
||||
editorService.getLayout(parent).then((layout) => {
|
||||
console.log(parent);
|
||||
});
|
||||
```
|
||||
|
||||
## select
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {number | string | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config 需要选中的节点或节点ID
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>} 当前选中的节点配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
选中指点节点（将指点节点设置成当前选中状态）
|
||||
|
||||
:::tip
|
||||
editorService.select只是设置了编辑器的选中状态，并没有设置画布的选中状态，所以根据实际情况可以调用[stage.select](../stage/coreMethods.md#select)来设置画布的选中态
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
editorService.select('text_123');
|
||||
editorService.get('stage')?.select('text_123');
|
||||
```
|
||||
|
||||
## multiSelect
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {(number | string)[]} ids 需要选中的节点ID集合
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
选中多个节点
|
||||
|
||||
:::tip
|
||||
editorService.multiSelect只是设置了编辑器的选中状态，并没有设置画布的选中状态，所以根据实际情况可以调用[stage.multiSelect](../stage/coreMethods.md#multiSelect)来设置画布的选中态
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
editorService.multiSelect(['text_123', 'button_123']);
|
||||
editorService.get('stage')?.multiSelect(['text_123', 'button_123']);
|
||||
```
|
||||
|
||||
## highlight
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {number | string | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config 需要高亮的节点或节点ID
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
高亮指定节点
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
editorService.highlight('text_123');
|
||||
```
|
||||
|
||||
## doAdd
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} node 新组件节点
|
||||
|
||||
- {[MContainer](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L54-L59)} parent 指定的容器节点
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>} 新增的组件
|
||||
|
||||
- **详情：**
|
||||
|
||||
往指定的容器中添加组件
|
||||
|
||||
## add
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]} node 新组件节点配置或多个节点集合
|
||||
|
||||
- {[MContainer](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L54-L59)} parent 指定的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>} 新增的组件或组件集合
|
||||
|
||||
- **详情：**
|
||||
|
||||
往指定的容器或当前容器中添加组件
|
||||
|
||||
:::tip
|
||||
**与[doAdd](#doadd)的区别：**
|
||||
|
||||
add可以支持一次添加多个组件，add是通过调用[doAdd](#doadd)来最终实现添加的。
|
||||
|
||||
编辑器内部添加组件都是调用add来实现的，add除了添加操作外，还会记录历史堆栈，还会更新编辑中相关的状态，而[doAdd](#doadd)就仅仅是完成添加的行为
|
||||
:::
|
||||
|
||||
## doRemove
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} node 要删除的节点
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
删除指定的组件或者页面
|
||||
|
||||
|
||||
## remove
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[])} node 要删除的节点或节点集合
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
删除指定的组件或者页面或组件集合
|
||||
|
||||
:::tip
|
||||
**与[doRemove](#doRemove)的区别：**
|
||||
|
||||
remove可以支持一次删除多个组件，remove是通过调用[doRemove](#doRemove)来最终实现删除的。
|
||||
|
||||
编辑器内部删除组件都是调用remove来实现的，remove除了删除操作外，还会记录历史堆。
|
||||
:::
|
||||
|
||||
## doUpdate
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99))} node 新的节点
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>} 新的节点
|
||||
|
||||
- **详情：**
|
||||
|
||||
更新节点
|
||||
|
||||
:::tip
|
||||
节点中应该要有id，不然不知道要更新哪个节点
|
||||
:::
|
||||
|
||||
## update
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>} node 新的节点或节点集合
|
||||
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>} 新的节点或节点集合
|
||||
|
||||
- **详情：**
|
||||
|
||||
更新单个或多个节点
|
||||
|
||||
:::tip
|
||||
**与[doUpdate](#doupdate)的区别：**
|
||||
|
||||
update可以支持一次更新多个组件，update是通过调用[doUpdate](#doupdate)来最终实现更新的。
|
||||
|
||||
编辑器内部更新组件都是调用update来实现的，update除了更新操作外，还会记录历史堆，还会更新[代码块](../../guide/advanced/code-block.md)关系链。
|
||||
:::
|
||||
|
||||
## sort
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{ string | number }` id1
|
||||
- `{ string | number }` id2
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -> sort(1,3) -> [2,1,3,4]
|
||||
|
||||
用于流式布局下的组件拖动更新
|
||||
|
||||
## copy
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>} node 需要复制的节点或节点集合
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
复制组件节点或节点集合
|
||||
|
||||
通过[storageService.setItem](./storageServiceMethods.md#setitem),将组将节点配置转化成string，然后存储到localStorage中
|
||||
|
||||
## doPaste
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
粘贴前置操作：返回分配了新id以及校准了坐标的配置
|
||||
|
||||
## paste
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[PastePosition](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L152-L163)} position 粘贴的坐标
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>} 添加后的组件节点配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
粘贴组件节点或节点集合
|
||||
|
||||
通过[storageService.getItem](./storageServiceMethods.md#setitem),从localStorage中获取节点，然后添加到当前容器中
|
||||
|
||||
|
||||
## doAlignCenter
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config 需要居中的组件
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
水平居中组件节点，仅在[流式布局](../../guide/advanced/layout.md)下有效
|
||||
|
||||
:::warning
|
||||
仅是计算出left，并未更新到编辑器中
|
||||
:::
|
||||
|
||||
## alignCenter
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>} config 需要居中的组件或者组件集合
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>}
|
||||
|
||||
|
||||
- **详情：**
|
||||
|
||||
水平居中组件或者组件集合，仅在[流式布局](../../guide/advanced/layout.md)下有效
|
||||
|
||||
:::tip
|
||||
**与[doAlignCenter](#doaligncentere)的区别：**
|
||||
|
||||
alignCenter可以支持一次水平居中多个组件，alignCenter是通过调用[doAlignCenter](#doaligncentere)来获取到已设置好水平居中的位置信息的节点，然后调用update更新。
|
||||
:::
|
||||
## moveLayer
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number | 'top' | 'bottom'}` offset
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
移动当前选中节点位置
|
||||
|
||||
用于实现上移一层、下移一层、置顶、置底
|
||||
|
||||
|
||||
## moveToContainer
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config 需要移动的节点
|
||||
- `{string | number}` targetId 容器ID
|
||||
|
||||
- **返回：**
|
||||
|
||||
- Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | undefined>
|
||||
|
||||
- **详情：**
|
||||
|
||||
移动到指定容器中
|
||||
|
||||
## undo
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
撤销当前操作
|
||||
|
||||
## redo
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
恢复到下一步
|
||||
|
||||
## move
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number}` left
|
||||
- `{number}` top
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
更新当前选中组件位置，通常用于键盘上下左右快捷键操作
|
||||
|
||||
## destroy
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁editorService
|
||||
|
||||
## resetModifiedNodeId
|
||||
|
||||
- **详情：**
|
||||
|
||||
重置当前记录的修改过的节点id记录，通常用于保存之后
|
||||
|
||||
## getCodeDsl
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[CodeBlockDSL](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L75) | null>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
从dsl中的codeBlocks字段读取活动的代码块
|
||||
|
||||
## getCodeDslSync
|
||||
|
||||
- **返回：**
|
||||
|
||||
- [CodeBlockDSL](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L75) | null
|
||||
|
||||
- **详情：**
|
||||
|
||||
从dsl中的codeBlocks字段读取活动的代码块
|
||||
|
||||
## setCodeDsl
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[CodeBlockDSL](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L75)} CodeBlockDSL
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置代码块到dsl的codeBlocks字段
|
||||
7
docs/api/editor/events.md
Normal file
7
docs/api/editor/events.md
Normal file
@ -0,0 +1,7 @@
|
||||
# Editor组件 events
|
||||
|
||||
## props-panel-mounted
|
||||
|
||||
- **详情：** 编辑器右侧组件属性配置加载完毕后触发
|
||||
|
||||
- **回调函数：** (formState: [FomState](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L27-L39)) => void
|
||||
97
docs/api/editor/eventsServiceMethods.md
Normal file
97
docs/api/editor/eventsServiceMethods.md
Normal file
@ -0,0 +1,97 @@
|
||||
# eventService方法
|
||||
|
||||
## init
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setEvents
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setEvent
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getEvent
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setMethods
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setMethod
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getMethod
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## destroy
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
14
docs/api/editor/historyServiceEvents.md
Normal file
14
docs/api/editor/historyServiceEvents.md
Normal file
@ -0,0 +1,14 @@
|
||||
# historyService事件
|
||||
|
||||
## page-change
|
||||
|
||||
- **详情：** 页面切换
|
||||
|
||||
- **回调函数：** (undoRedo: [undoRedo](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/utils/undo-redo.ts)) => void
|
||||
|
||||
## change
|
||||
|
||||
- **详情：** 历史记录发生变化
|
||||
|
||||
- **回调函数：** (state: [StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404)) => void
|
||||
|
||||
62
docs/api/editor/historyServiceMethods.md
Normal file
62
docs/api/editor/historyServiceMethods.md
Normal file
@ -0,0 +1,62 @@
|
||||
# historyService方法
|
||||
|
||||
## reset
|
||||
|
||||
- **详情：**
|
||||
|
||||
重置记录
|
||||
|
||||
## changePage
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MPage](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L61)} page
|
||||
|
||||
- **详情：**
|
||||
|
||||
按页面切换历史堆栈
|
||||
|
||||
## empty
|
||||
|
||||
- **详情：**
|
||||
|
||||
重置记录，同[reset](#reset)
|
||||
## push
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404)} state
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null}
|
||||
|
||||
- **详情：**
|
||||
|
||||
添加一条历史记录
|
||||
|
||||
## undo
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
撤销当前操作
|
||||
|
||||
## redo
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
恢复到下一步
|
||||
|
||||
## destroy
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁
|
||||
776
docs/api/editor/props.md
Normal file
776
docs/api/editor/props.md
Normal file
@ -0,0 +1,776 @@
|
||||
# Editor组件 props
|
||||
|
||||
## modelValue/v-model
|
||||
|
||||
- **详情：**
|
||||
|
||||
页面初始值
|
||||
|
||||
- **默认值：** `{}`
|
||||
|
||||
|
||||
- **类型：** [MApp](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts?plain=1#L66-L73)[]
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor v-model="dsl"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'Vue';
|
||||
|
||||
const dsl = ref({
|
||||
type: 'app',
|
||||
id: 'app_1',
|
||||
items: [
|
||||
{
|
||||
type: 'page',
|
||||
id: 'page_1',
|
||||
items: [
|
||||
{
|
||||
type: 'text',
|
||||
id: 'text_1',
|
||||
text: '文本'
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
## componentGroupList
|
||||
|
||||
- **详情：**
|
||||
|
||||
左侧面板中的组件列表
|
||||
|
||||
- **默认值：** `[]`
|
||||
|
||||
- **类型：** [ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L279-L284)
|
||||
|
||||
::: tip
|
||||
icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/icon.html)
|
||||
|
||||
也可直接使用url，例如
|
||||
```js
|
||||
{
|
||||
icon: 'https://vfiles.gtimg.cn/vupload/20220614/9cc3091655207317835.png'
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :component-group-list="componentGroupList"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, markRaw } from 'Vue';
|
||||
import { FolderOpened, SwitchButton, Tickets } from '@element-plus/icons-vue';
|
||||
|
||||
const componentGroupList = ref([
|
||||
{
|
||||
title: '容器',
|
||||
items: [
|
||||
{
|
||||
icon: markRaw(FolderOpened),
|
||||
text: '组',
|
||||
type: 'container',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '基础组件',
|
||||
items: [
|
||||
{
|
||||
icon: markRaw(Tickets),
|
||||
text: '文本',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
icon: markRaw(SwitchButton),
|
||||
text: '按钮',
|
||||
type: 'button',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
```
|
||||
|
||||
::: warning
|
||||
此配置仅在[sidebar](#sidebar)中配置了'component-list'时有效
|
||||
:::
|
||||
|
||||
## sidebar
|
||||
|
||||
- **详情：**
|
||||
|
||||
左侧面板，目前只支持type: 'tabs';
|
||||
|
||||
- **默认值：**
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'tabs',
|
||||
status: '组件',
|
||||
items: ['component-list', 'layer', 'code-block'],
|
||||
}
|
||||
```
|
||||
|
||||
- **类型：** [SideBarData](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L258-L265)
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :sidebar="sidebar"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, markRaw } from 'Vue';
|
||||
import { List } from '@element-plus/icons-vue';
|
||||
import ModListPanel from '../components/sidebars/ModListPanel.vue';
|
||||
|
||||
const sidebar = ref({
|
||||
type: 'tabs',
|
||||
status: '组件',
|
||||
items: [
|
||||
'component-list',
|
||||
'layer',
|
||||
{
|
||||
type: 'component',
|
||||
icon: markRaw(List),
|
||||
component: markRaw(ModListPanel),
|
||||
text: '模块',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
::: tip
|
||||
icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/icon.html)
|
||||
|
||||
也可直接使用url，例如
|
||||
```js
|
||||
{
|
||||
icon: 'https://vfiles.gtimg.cn/vupload/20220614/9cc3091655207317835.png'
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
## menu
|
||||
|
||||
- **详情：**
|
||||
|
||||
顶部工具栏
|
||||
|
||||
系统提供了几个常用功能： `'/' | 'delete' | 'undo' | 'redo' | 'zoom-in' | 'zoom-out' | 'zoom' | 'guides' | 'rule' | 'scale-to-original' | 'scale-to-fit'`
|
||||
|
||||
'/': 分隔符
|
||||
|
||||
'delete': 删除按钮
|
||||
|
||||
'undo': 撤销按钮
|
||||
|
||||
'redo': 恢复按钮
|
||||
|
||||
'zoom-in': 放大按钮
|
||||
|
||||
'zoom-out': 缩小按钮
|
||||
|
||||
'zoom': 缩放(zoom-in', 'zoom-out', 'scale-to-original', 'scale-to-fit' 的集合)
|
||||
|
||||
'guides': 显示隐藏参考线
|
||||
|
||||
'rule': 显示隐藏标尺
|
||||
|
||||
'scale-to-original': 缩放到实际大小
|
||||
|
||||
'scale-to-fit': 缩放以适应
|
||||
|
||||
- **默认值：**
|
||||
|
||||
```js
|
||||
{ left: [], center: [], right: [] }
|
||||
```
|
||||
|
||||
- **类型：** [MenuBarData](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L235-L242)
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :menu="menu"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, markRaw, toRaw } from 'Vue';
|
||||
import { ArrowLeft, Coin } from '@element-plus/icons-vue';
|
||||
|
||||
const menu = ref({
|
||||
left: [
|
||||
{
|
||||
type: 'button',
|
||||
icon: markRaw(ArrowLeft),
|
||||
tooltip: '返回',
|
||||
},
|
||||
'/',
|
||||
{
|
||||
type: 'text',
|
||||
text: '.temp',
|
||||
},
|
||||
],
|
||||
center: ['delete', 'undo', 'redo', 'zoom'],
|
||||
right: [
|
||||
{
|
||||
type: 'button',
|
||||
text: '保存',
|
||||
icon: markRaw(Coin),
|
||||
disabled: true,
|
||||
handler: ({ editorService }) => {
|
||||
console.log(toRaw(editorService.get('root'));
|
||||
}),
|
||||
},
|
||||
],
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
## layerContentMenu
|
||||
|
||||
- **详情：** 扩展已选组件（组件树）右键菜单
|
||||
|
||||
- **默认值：** `[]`
|
||||
|
||||
- **类型：** ([MenuButton](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L168-L195) | [MenuComponent](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L197-L210))[]
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :layer-content-menu="layerContentMenu"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, toRaw } from 'Vue';
|
||||
import { Upload } from '@element-plus/icons-vue';
|
||||
|
||||
const layerContentMenu = ref([
|
||||
{
|
||||
{
|
||||
type: 'button',
|
||||
icon: toRow(Upload),
|
||||
text: '导出',
|
||||
handler: () => {
|
||||
console.log('export')
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
```
|
||||
|
||||
## stageContentMenu
|
||||
|
||||
- **详情：** 扩展stage（画布区域）右键菜单
|
||||
|
||||
- **默认值：** `[]`
|
||||
|
||||
- **类型：** ([MenuButton](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L168-L195) | [MenuComponent](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L197-L210))[]
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :stage-content-menu="stageContentMenu"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, toRaw } from 'Vue';
|
||||
import { Upload } from '@element-plus/icons-vue';
|
||||
|
||||
const stageContentMenu = ref([
|
||||
{
|
||||
{
|
||||
type: 'button',
|
||||
icon: toRow(Upload),
|
||||
text: '导出',
|
||||
handler: () => {
|
||||
console.log('export')
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
```
|
||||
|
||||
## runtimeUrl
|
||||
|
||||
- **详情：**
|
||||
|
||||
[runtime](../../guide/runtime.md)的HTML地址
|
||||
|
||||
在编辑器画布中渲染组件是使用iframe实现，runtimeUrl就是配置在iframe上的src属性
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `string`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor
|
||||
runtime-url="https://tencent.github.io/tmagic-editor/playground/runtime/vue3/playground/index.html"
|
||||
></m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## render
|
||||
|
||||
- **详情：**
|
||||
|
||||
中间工作区域中画布渲染的内容，通常是通过解析[modelValue](#modelValue)来渲染出DOM，return的DOM结构需要有一个根节点。
|
||||
|
||||
:::tip
|
||||
[runtimeUrl](#runtimeurl)与render有且只需要配置一个
|
||||
:::
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** (stage: [StageCore](../stage/coreMethods.md)) => `HTMLDivElement` | Promise<`HTMLDivElement`>
|
||||
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor
|
||||
:render="renderFunction"
|
||||
></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const renderFunction = async (stage) => {
|
||||
const { iframe } = stage.renderer;
|
||||
|
||||
if (!iframe) throw new Error('iframe 未创建');
|
||||
|
||||
return iframe.contentDocument.createElement('div');
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## autoScrollIntoView
|
||||
|
||||
- **详情：**
|
||||
|
||||
选中组件时，是否自动滚动该组件到可视区域
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :auto-scroll-intoView="true"></m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## propsConfigs
|
||||
|
||||
- **详情：**
|
||||
|
||||
组件的属性配置[表单的dsl](../../form-config/fields/text.md)
|
||||
|
||||
:::tip
|
||||
该属性最终会设置到[propsService](./propsServiceMethods.md)中，所以也可直接调用[propsService.setPropsConfigs()](./propsServiceMethods.md#setPropsConfigs)方法来配置
|
||||
:::
|
||||
|
||||
当选中一个组件时，会根据组件的type值从propsConfigs中获取对应的[表单的dsl](../../form-config/fields/text.md)，并在属性面板中渲染出来
|
||||
|
||||
:::tip
|
||||
获取[表单的dsl](../../form-config/fields/text.md)后实际上还会经过[propsService.fillConfig()](./propsServiceMethods.md#fillConfig)方法来处理，用于添加公共配置
|
||||
:::
|
||||
|
||||
- **默认值：** `{}`
|
||||
-
|
||||
- **类型：** Record<string, [FormConfig](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L706)>
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :props-configs="propsConfigs"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const propsConfigs = {
|
||||
text: [
|
||||
{
|
||||
name: 'text',
|
||||
text: '文本',
|
||||
},
|
||||
{
|
||||
name: 'multiple',
|
||||
text: '多行文本',
|
||||
type: 'switch',
|
||||
},
|
||||
],
|
||||
button: [
|
||||
{
|
||||
name: 'text',
|
||||
text: '文本',
|
||||
},
|
||||
]
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## propsValues
|
||||
|
||||
- **详情：**
|
||||
|
||||
添加组件时的默认值
|
||||
|
||||
添加组件时，组件节点DSL的生成过程为，先从[componentGroupList](#componentgrouplist)中items中item的data得到一个基础配置，然后再通过[propsService.getPropsValue()](./propsServiceMethods.md#getPropsValue)方法，获取到propsValues中对应type的默认值，二者合并生成新增节点的DSL配置
|
||||
|
||||
:::tip
|
||||
该属性最终会设置到[propsService](./propsServiceMethods.md)中，所以也可直接调用[propsService.setPropsValues()](./propsServiceMethods.md#setPropsValues)方法来配置
|
||||
:::
|
||||
|
||||
- **默认值：** `{}`
|
||||
|
||||
- **类型：** `Record<string, Object>`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :props-values="propsValues"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const propsValues = {
|
||||
text: {
|
||||
text: '文本',
|
||||
// 多行文本
|
||||
multiple: true,
|
||||
},
|
||||
button: {
|
||||
text: '按钮',
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## eventMethodList
|
||||
|
||||
- **详情：**
|
||||
|
||||
组件属性配置中事件tab中的事件名与动作的下拉选项列表
|
||||
|
||||
:::tip
|
||||
该属性最终会设置到[eventsService](./eventsServiceMethods.md)中，所以也可直接调用[eventsService.setEvents()](./eventsServiceMethods.md#setEvents)与[eventsService.setMethods()](./eventsServiceMethods#setMethods)方法来配置
|
||||
:::
|
||||
|
||||
- **默认值：** `{}`
|
||||
|
||||
- **类型：** Record<string, { events: [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]; methods: [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[] }>
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :event-method-list="eventMethodList"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const eventMethodList = {
|
||||
page: {
|
||||
methods: [
|
||||
{
|
||||
label: '刷新',
|
||||
value: 'refresh',
|
||||
},
|
||||
],
|
||||
events: [
|
||||
{
|
||||
label: '加载',
|
||||
value: 'load',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## moveableOptions
|
||||
|
||||
- **详情：**
|
||||
|
||||
画布中的选中框配置选项，使用的是[moveable](https://github.com/daybrush/moveable)第三方库，可以用来控制组件在画布中是否能被拖动等行为
|
||||
|
||||
- **默认值：** `{}`
|
||||
|
||||
- **类型：** ((config?: [CustomizeMoveableOptionsCallbackConfig](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/stage/src/types.ts#L97-L109)) => MoveableOptions) | [MoveableOptions](https://daybrush.com/moveable/release/latest/doc/)
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :moveable-options="moveableOptions"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const moveableOptions = ({ targetId }) => {
|
||||
const options = {};
|
||||
const node = editorService.getNodeById(id);
|
||||
|
||||
if (!node) return options;
|
||||
|
||||
const isPage = node.type === 'page';
|
||||
|
||||
// 页面不允许拖动
|
||||
options.draggable = !isPage;
|
||||
options.resizable = !isPage
|
||||
|
||||
return options;
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## defaultSelected
|
||||
|
||||
- **详情：**
|
||||
|
||||
编辑器初始化后默认选中的组件节点id
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `string | number`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :default-selected="defaultSelected"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const defaultSelected = ref('');
|
||||
|
||||
// 加载dsl后设置默认选中节点
|
||||
getDsl().then(() => {
|
||||
defaultSelected.value = 'xxx';
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
## canSelect
|
||||
|
||||
- **详情：**
|
||||
|
||||
鼠标在画布点击时，当前坐标下的dom节点是否可以选中，当前坐标下的dom可能不止只有一个，当有多个时会遍历这些节点并调用canSelect方法进行判断，第一个返回true的dom节点将被选中
|
||||
|
||||
:::tip
|
||||
获取坐标下的节点是通过[document.elementsFromPoint](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/elementsFromPoint)方法
|
||||
:::
|
||||
|
||||
- **默认值：** `(el: HTMLElement) => Boolean(el.id)`
|
||||
|
||||
- **类型：** `(el: HTMLElement) => boolean | Promise<boolean>`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :can-select="canSelect"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 只有dom id为纯数字时才可以被选中
|
||||
const canSelect = (el) => /^\d+$/.test(el.id);
|
||||
</script>
|
||||
```
|
||||
|
||||
## isContainer
|
||||
|
||||
- **详情：**
|
||||
|
||||
当组件拖动过程中停留在画布上超过 [containerHighlightDuration](#containerHighlightDuration) 时长时，识别当前是否有容器
|
||||
|
||||
当停留超过[containerHighlightDuration](#containerHighlightDuration) 时长时，会通过停留的坐标获取当前坐标下所有dom节点，然后遍历这些节点并通过isContainer方法判断，第一个返回true的节点将视为容器
|
||||
|
||||
:::tip
|
||||
获取坐标下的节点是通过[document.elementsFromPoint](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/elementsFromPoint)方法
|
||||
:::
|
||||
|
||||
- **默认值：** `(el: HTMLElement) => el.classList.contains('magic-ui-container')`
|
||||
|
||||
- **类型：** `(el: HTMLDivElement) => boolean | Promise<boolean>;`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :is-container="isContainer"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const canSelect = (el) => /^\d+$/.test(el.id);
|
||||
|
||||
const isContainer = (el) =>
|
||||
canSelect(el) &&
|
||||
(el.classList.contains('magic-ui-container') ||
|
||||
el.classList.contains('magic-ui-pc-container') ||
|
||||
el.classList.contains('magic-ui-page') ||
|
||||
el.classList.contains('magic-ui-pop-content'));
|
||||
</script>
|
||||
```
|
||||
|
||||
## containerHighlightClassName
|
||||
|
||||
- **详情：**
|
||||
|
||||
识别到容器后，会给其dom上添加的class
|
||||
|
||||
- **默认值：** `'tmagic-stage-container-highlight'`
|
||||
|
||||
- **类型：** `string`
|
||||
|
||||
## containerHighlightDuration
|
||||
|
||||
- **详情：**
|
||||
|
||||
当组件拖动过程中停留在画布上超过 [containerHighlightDuration](#containerHighlightDuration) 时长时，识别当前是否有容器
|
||||
|
||||
- **默认值：** `800` （单位为ms）
|
||||
|
||||
- **类型：** `number`
|
||||
|
||||
|
||||
## containerHighlightType
|
||||
|
||||
- **详情：**
|
||||
|
||||
在画布中，将组件拖入其他容器的方式
|
||||
|
||||
启动方式
|
||||
|
||||
default: 停留在画布上启动识别
|
||||
|
||||
alt: 按住alt键启动识别
|
||||
|
||||
其他值：不启动
|
||||
|
||||
- **默认值：** `'default'`
|
||||
|
||||
|
||||
- **类型：** `'default' | 'alt' | ''`
|
||||
|
||||
## stageRect
|
||||
|
||||
- **详情：**
|
||||
|
||||
画布的大小
|
||||
|
||||
:::tip
|
||||
该属性最终会设置到[uiService](./uiServiceMethods.md)中，所以也可直接调用[uiService.set('stageRect', value)](./uiServiceMethods.md#set)方法来配置
|
||||
:::
|
||||
|
||||
- **默认值：**
|
||||
|
||||
```js
|
||||
{
|
||||
width: 375,
|
||||
height: 817,
|
||||
}
|
||||
```
|
||||
|
||||
- **类型：**
|
||||
|
||||
```ts
|
||||
interface StageRect {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
```
|
||||
|
||||
## codeOptions
|
||||
|
||||
- **详情：**
|
||||
|
||||
编辑器中的代码编辑器配置
|
||||
|
||||
:::tip
|
||||
tmagic-editor中的所有代码编辑器都使用[monaco-editor](https://microsoft.github.io/monaco-editor/)，详细配置请前往[monaco-editor](https://microsoft.github.io/monaco-editor/)官网查看
|
||||
:::
|
||||
|
||||
- **默认值：** ``{}
|
||||
|
||||
- **类型：** `Object`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :code-options="codeOptions"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const codeOptions = {
|
||||
tabSize: 2,
|
||||
fontSize: 16,
|
||||
formatOnPaste: true,
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## updateDragEl
|
||||
|
||||
- **详情：**
|
||||
|
||||
当选中框与组件不贴合时，可以通过此方法进行调整
|
||||
|
||||
:::tip
|
||||
由于画布中组件是渲染在iframe中，而选中框是渲染在编辑器中，所以会导致两者的坐标系有差异，为了解决这个问题，在[canSelect](#canselect)为true后会在编辑中创建一个位置大小与组件（target）一致的dom（el）
|
||||
:::
|
||||
|
||||
- **类型：** `(el: HTMLElement | SVGElement, target: HTMLElement | SVGElement) => void`
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :update-drag-el="updateDragEl"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const updateDragEl = (el, target) => {
|
||||
const node = editorStore.pop;
|
||||
if (!node || !isPop(node)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { top, left } = target.getBoundingClientRect();
|
||||
|
||||
el.style.transform = 'none';
|
||||
el.style.top = `${top}px`;
|
||||
el.style.left = `${left}px`;
|
||||
};
|
||||
```
|
||||
|
||||
7
docs/api/editor/propsServiceEvents.md
Normal file
7
docs/api/editor/propsServiceEvents.md
Normal file
@ -0,0 +1,7 @@
|
||||
# propsService事件
|
||||
|
||||
## props-configs-change
|
||||
|
||||
- **详情：** [propsService.setPropsConfigs()](./propsServiceMethods.md#setPropsConfigs)后触发
|
||||
|
||||
- **回调函数：** () => void
|
||||
166
docs/api/editor/propsServiceMethods.md
Normal file
166
docs/api/editor/propsServiceMethods.md
Normal file
@ -0,0 +1,166 @@
|
||||
# propsService方法
|
||||
|
||||
## fillConfig
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} config
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
扩展属性表单配置DSL，用于为所有表单配置添加公共配置
|
||||
|
||||
## setPropsConfigs
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {Record<string, [FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)>} configs
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置组件与属性表单配置DSL的对应关系
|
||||
|
||||
## setPropsConfig
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
- {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} config 属性表单配置DSL
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
为指定类型组件设置组件属性表单配置
|
||||
|
||||
## getPropsConfig
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指点类型的组件属性表单配置
|
||||
|
||||
## setPropsValues
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {Record<string, [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>} values
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置组件与属性表单默认值的对应关系
|
||||
|
||||
## setPropsValue
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} value 组件初始值
|
||||
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置组件与属性表单默认值的对应关系
|
||||
|
||||
|
||||
## getPropsValue
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} value 组件默认值，可选
|
||||
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指定类型的组件初始值
|
||||
|
||||
## createId
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {string} type 组件列席
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<string>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
生成组件id
|
||||
## setNewItemId
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
将组件与组件的子元素配置中的id都设置成一个新的ID
|
||||
|
||||
## getDefaultPropsValue
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取默认属性配置
|
||||
|
||||
## destroy
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁propsService
|
||||
121
docs/api/editor/slots.md
Normal file
121
docs/api/editor/slots.md
Normal file
@ -0,0 +1,121 @@
|
||||
# Editor组件 slots
|
||||
|
||||
## nav
|
||||
|
||||
- **详情：** 编辑器顶部菜单栏
|
||||
|
||||
- **默认：** [NavMenu.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/NavMenu.vue)
|
||||
|
||||
:::warning
|
||||
属性配置[menu](./props.md#menu)由默认组件接收，如设置该slot，[menu](./props.md#menu)配置将失效
|
||||
:::
|
||||
|
||||
## sidebar
|
||||
|
||||
- **详情：** 左边栏
|
||||
|
||||
- **默认：** [Sidebar.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/sidebar/Sidebar.vue)
|
||||
|
||||
:::warning
|
||||
属性配置[sidebar](./props.md#sidebar)由默认组件接收，如设置该slot，[sidebar](./props.md#sidebar)配置将失效
|
||||
:::
|
||||
|
||||
## component-list-panel-header
|
||||
|
||||
- **详情：** 左边栏中的组件列表内上方位置
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## component-list-item
|
||||
|
||||
- **详情：** 左边栏中的组件列表中组件item
|
||||
|
||||
- **默认：** 图片加文案
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## layer-panel-header
|
||||
|
||||
- **详情：** 左边栏中的已选组件（组件树）内顶部位置
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## layer-node-content
|
||||
|
||||
- **详情：** 左边栏中的已选组件（组件树）节点
|
||||
|
||||
- **默认：** 组件名称加id
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## code-block-panel-header
|
||||
|
||||
- **详情：** 左边栏中的代码块列表内顶部位置
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## code-block-panel-tool
|
||||
|
||||
- **详情：** 左边栏中的代码块列表中代码块右侧位置
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## code-block-edit-panel-header
|
||||
|
||||
- **详情：** 代码块弹窗编辑器中弹窗顶部区域
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## workspace
|
||||
|
||||
- **详情：** 编辑器中间区域
|
||||
|
||||
- **默认：** [Workspace.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/workspace/Workspace.vue)
|
||||
|
||||
## stage
|
||||
|
||||
- **详情：** 画布
|
||||
|
||||
- **默认：** [Stage.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/workspace/Stage.vue)
|
||||
|
||||
## workspace-content
|
||||
|
||||
- **详情：** 编辑器中间区域内
|
||||
|
||||
## page-bar-title
|
||||
|
||||
- **详情：** 编辑器中间区域底部页面标题
|
||||
|
||||
## page-bar-popover
|
||||
|
||||
- **详情：** 编辑器中间区域底部页面标题悬浮框
|
||||
|
||||
## props-panel
|
||||
|
||||
- **详情：** 编辑器右侧属性配置
|
||||
|
||||
- **默认：** [PropsPanel.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/PropsPanel.vue)
|
||||
|
||||
## props-panel-header
|
||||
|
||||
- **详情：** 编辑器右侧属性配置内顶部区域
|
||||
|
||||
## empty
|
||||
|
||||
- **详情：** 当前没有页面时，编辑器中间区域
|
||||
|
||||
- **默认：** [AddPageBox.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/AddPageBox.vue)
|
||||
109
docs/api/editor/storageServiceMethods.md
Normal file
109
docs/api/editor/storageServiceMethods.md
Normal file
@ -0,0 +1,109 @@
|
||||
# storageService方法
|
||||
|
||||
## getStorage
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getNamespace
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## clear
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getItem
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## key
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## removeItem
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setItem
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## destroy
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
29
docs/api/editor/uiServiceMethods.md
Normal file
29
docs/api/editor/uiServiceMethods.md
Normal file
@ -0,0 +1,29 @@
|
||||
# uiService方法
|
||||
|
||||
## zoom
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number}` zoom 缩放倍数
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置缩放倍数，最小为0.1
|
||||
|
||||
## calcZoom
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<number>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
计算出缩放以适应的倍数
|
||||
27
docs/api/form/form-dialog-events.md
Normal file
27
docs/api/form/form-dialog-events.md
Normal file
@ -0,0 +1,27 @@
|
||||
# FormDialog组件 events
|
||||
|
||||
## close
|
||||
|
||||
- **详情：** 弹出关闭
|
||||
|
||||
- **回调函数：** () => void
|
||||
|
||||
|
||||
## submit
|
||||
|
||||
- **详情：** 调用[save()](./form-dialog-methods.md#save)
|
||||
|
||||
- **回调函数：** (values: any) => void
|
||||
|
||||
## error
|
||||
|
||||
- **详情：** 表单校验不同
|
||||
|
||||
- **回调函数：** (error: any) => void
|
||||
|
||||
## change
|
||||
|
||||
- **详情：** 表单中任何值发生变化
|
||||
|
||||
- **回调函数：** (values: any) => void
|
||||
|
||||
13
docs/api/form/form-dialog-methods.md
Normal file
13
docs/api/form/form-dialog-methods.md
Normal file
@ -0,0 +1,13 @@
|
||||
# FormDialog组件 methods
|
||||
|
||||
## cancel
|
||||
|
||||
- **详情：** 关闭弹窗
|
||||
|
||||
## save
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<any>}`
|
||||
|
||||
- **详情：** 获取表单的值
|
||||
110
docs/api/form/form-dialog-props.md
Normal file
110
docs/api/form/form-dialog-props.md
Normal file
@ -0,0 +1,110 @@
|
||||
# FormDialog组件 props
|
||||
|
||||
## config
|
||||
|
||||
- **详情：** 表单配置
|
||||
|
||||
- **默认值：** `[]`
|
||||
|
||||
- **类型：** [FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-form-dialog :config="config"></m-form-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'Vue';
|
||||
|
||||
const config = ref([
|
||||
{
|
||||
name: 'text',
|
||||
text: '文本',
|
||||
},
|
||||
{
|
||||
name: 'multiple',
|
||||
text: '多行文本',
|
||||
type: 'switch',
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
```
|
||||
|
||||
## values
|
||||
|
||||
- **详情：** 表单初始化值
|
||||
|
||||
- **默认值：** `{}`
|
||||
|
||||
- **类型：** `Object`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-form-dialog :values="values"></m-form-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'Vue';
|
||||
|
||||
const values = ref([
|
||||
text: 'text',
|
||||
multiply: true,
|
||||
]);
|
||||
</script>
|
||||
```
|
||||
|
||||
## width
|
||||
|
||||
- **详情：** 弹窗宽度
|
||||
|
||||
- **类型：** `string | number`
|
||||
|
||||
## labelWidth
|
||||
|
||||
- **详情：**
|
||||
|
||||
表单域标签的宽度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 支持 auto
|
||||
|
||||
- **默认值：** `'200px'`
|
||||
|
||||
- **类型：** `string | number`
|
||||
|
||||
## fullscreen
|
||||
|
||||
- **详情：** 弹出是否全屏
|
||||
|
||||
- **默认值：** false
|
||||
|
||||
- **类型：** boolean
|
||||
|
||||
## disabled
|
||||
|
||||
- **详情：** 是否禁用该表单内的所有组件。 若设置为 true，则表单内组件上的 disabled 属性不再生效
|
||||
|
||||
- **默认值：** false
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
## title
|
||||
|
||||
- **详情：** 弹出标题
|
||||
|
||||
- **类型：** `string`
|
||||
|
||||
## size
|
||||
|
||||
- **详情：** 用于控制该表单内组件的尺寸
|
||||
|
||||
- **类型：** `'small' | 'default' | 'large'`
|
||||
|
||||
## confirmText
|
||||
|
||||
- **详情：** 提交按钮文案
|
||||
|
||||
- **默认值：** `'确定'`
|
||||
|
||||
- **类型：** `string`
|
||||
7
docs/api/form/form-events.md
Normal file
7
docs/api/form/form-events.md
Normal file
@ -0,0 +1,7 @@
|
||||
# Form组件 events
|
||||
|
||||
## change
|
||||
|
||||
- **详情：** 表单中任何值发生变化
|
||||
|
||||
- **回调函数：** (values: any) => void
|
||||
13
docs/api/form/form-methods.md
Normal file
13
docs/api/form/form-methods.md
Normal file
@ -0,0 +1,13 @@
|
||||
# Form组件 methods
|
||||
|
||||
## resetForm
|
||||
|
||||
- **详情：** 重置该表单项，将其值重置为初始值，并移除校验结果
|
||||
|
||||
## submitForm
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<any>}`
|
||||
|
||||
- **详情：** 提交表单，获取表单的值
|
||||
137
docs/api/form/form-props.md
Normal file
137
docs/api/form/form-props.md
Normal file
@ -0,0 +1,137 @@
|
||||
# Form组件属性 props
|
||||
|
||||
## config
|
||||
|
||||
- **详情：** 表单配置
|
||||
|
||||
- **默认值：** `[]`
|
||||
|
||||
- **类型：** [FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-form-dialog :config="config"></m-form-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'Vue';
|
||||
|
||||
const config = ref([
|
||||
{
|
||||
name: 'text',
|
||||
text: '文本',
|
||||
},
|
||||
{
|
||||
name: 'multiple',
|
||||
text: '多行文本',
|
||||
type: 'switch',
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
```
|
||||
|
||||
## initValues
|
||||
|
||||
- **详情：** 表单初始化值
|
||||
|
||||
- **默认值：** `{}`
|
||||
|
||||
- **类型：** `Object`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-form-dialog :init-values="initValues"></m-form-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'Vue';
|
||||
|
||||
const initValues = ref([
|
||||
text: 'text',
|
||||
multiply: true,
|
||||
]);
|
||||
</script>
|
||||
```
|
||||
|
||||
## labelWidth
|
||||
|
||||
- **详情：**
|
||||
|
||||
表单域标签的宽度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 支持 auto
|
||||
|
||||
- **默认值：** `'200px'`
|
||||
|
||||
- **类型：** `string | number`
|
||||
|
||||
## disabled
|
||||
|
||||
- **详情：** 是否禁用该表单内的所有组件。 若设置为 true，则表单内组件上的 disabled 属性不再生效
|
||||
|
||||
- **默认值：** false
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
## height
|
||||
|
||||
- **详情：**
|
||||
|
||||
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
## stepActive
|
||||
|
||||
- **详情：**
|
||||
|
||||
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
## size
|
||||
|
||||
- **详情：** 用于控制该表单内组件的尺寸
|
||||
|
||||
- **类型：** `'small' | 'default' | 'large'`
|
||||
|
||||
|
||||
## inline
|
||||
|
||||
- **详情：** 行内表单模式
|
||||
|
||||
- **默认值：** false
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
## labelPosition
|
||||
|
||||
- **详情：** 表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性
|
||||
|
||||
- **默认值：** ’right'
|
||||
|
||||
- **类型：** `'left' | 'right' | 'top`
|
||||
|
||||
## keyProp
|
||||
|
||||
- **详情：** 作为表单项的组件实例的key
|
||||
|
||||
- **默认值：** `'__key'`
|
||||
|
||||
- **类型：** `string`
|
||||
|
||||
## popperClass
|
||||
|
||||
- **详情：** tooltip弹出层的class
|
||||
|
||||
- **类型：** `string`
|
||||
21
docs/api/stage/coreEvents.md
Normal file
21
docs/api/stage/coreEvents.md
Normal file
@ -0,0 +1,21 @@
|
||||
# stage事件
|
||||
|
||||
## runtime-ready
|
||||
|
||||
## mounted
|
||||
|
||||
## highlight
|
||||
|
||||
## update
|
||||
|
||||
## select
|
||||
|
||||
## multi-select
|
||||
|
||||
## select-parent
|
||||
|
||||
## sort
|
||||
|
||||
## update
|
||||
|
||||
## change-guides
|
||||
58
docs/api/stage/coreMethods.md
Normal file
58
docs/api/stage/coreMethods.md
Normal file
@ -0,0 +1,58 @@
|
||||
# stage方法
|
||||
|
||||
## select
|
||||
|
||||
- **详情：** 单选选中元素
|
||||
|
||||
## multiSelect
|
||||
|
||||
- **详情：** 多选选中多个元素
|
||||
|
||||
## highlight
|
||||
|
||||
- **详情：** 高亮选中元素
|
||||
|
||||
## update
|
||||
|
||||
- **详情：** 更新组件
|
||||
|
||||
## add
|
||||
|
||||
- **详情：** 往画布增加一个组件
|
||||
|
||||
## remove
|
||||
|
||||
- **详情：** 从画布删除一个组件
|
||||
|
||||
## setZoom
|
||||
|
||||
- **详情：**
|
||||
|
||||
## mount
|
||||
|
||||
- **详情：** 挂载Dom节点
|
||||
|
||||
## clearGuides
|
||||
|
||||
- **详情：** 清空所有参考线
|
||||
|
||||
## clearGuides
|
||||
|
||||
- **详情：** 清空所有参考线
|
||||
|
||||
## delayedMarkContainer
|
||||
|
||||
- **详情：**
|
||||
|
||||
鼠标拖拽着元素，在容器上方悬停，延迟一段时间后，对容器进行标记，如果悬停时间够长将标记成功，悬停时间短，调用方通过返回的timeoutId取消标记
|
||||
|
||||
标记的作用：
|
||||
|
||||
1、高亮容器，给用户一个加入容器的交互感知；
|
||||
|
||||
2、释放鼠标后，通过标记的标志找到要加入的容器
|
||||
|
||||
## destroy
|
||||
|
||||
- **详情：** 销毁实例
|
||||
|
||||
15
docs/api/table/events.md
Normal file
15
docs/api/table/events.md
Normal file
@ -0,0 +1,15 @@
|
||||
# Table组件 events
|
||||
|
||||
## sort-change
|
||||
|
||||
## after-action
|
||||
|
||||
## select
|
||||
|
||||
## select-all
|
||||
|
||||
## selection-change
|
||||
|
||||
## expand-change
|
||||
|
||||
## cell-click
|
||||
7
docs/api/table/methods.md
Normal file
7
docs/api/table/methods.md
Normal file
@ -0,0 +1,7 @@
|
||||
# Table组件 methods
|
||||
|
||||
## toggleRowSelection
|
||||
|
||||
## toggleRowExpansion
|
||||
|
||||
## clearSelection
|
||||
124
docs/api/table/props.md
Normal file
124
docs/api/table/props.md
Normal file
@ -0,0 +1,124 @@
|
||||
# Table组件 props
|
||||
|
||||
## data
|
||||
|
||||
- **详情：**
|
||||
|
||||
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
|
||||
## columns
|
||||
|
||||
- **详情：**
|
||||
|
||||
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
|
||||
## spanMethod
|
||||
|
||||
- **详情：** 合并行或列的计算方法
|
||||
|
||||
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
## loading
|
||||
|
||||
- **详情：**
|
||||
|
||||
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
|
||||
## showHeader
|
||||
|
||||
- **详情：** 是否显示表头
|
||||
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
## bodyHeight
|
||||
|
||||
- **详情：** Table的最大高度。合法的值为数字或者单位为 px 的高度
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
## emptyText
|
||||
|
||||
- **详情：** 空数据时显示的文本内容
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
|
||||
|
||||
|
||||
## defaultExpandAll
|
||||
|
||||
- **详情：** 是否默认展开所有行，当Table包含展开行存在或者为树形表格时有效
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
|
||||
|
||||
|
||||
## rowkeyName
|
||||
|
||||
- **详情：**
|
||||
|
||||
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
|
||||
## border
|
||||
|
||||
- **详情：**
|
||||
|
||||
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
0
docs/guide/advanced/code-block.md
Normal file
0
docs/guide/advanced/code-block.md
Normal file
@ -4,7 +4,7 @@ tmagic-editor的联动，指这两种情况：
|
||||
- 页面中的组件之间，需要联动触发行为。
|
||||
|
||||
## 表单联动
|
||||
表单的详细内容，可以参考[@tmagic/form](../advanced/magic-form)。我们通过 [JS Schema](../advanced/js-schema) 描述的表单配置，实现联动的方式，就是写一个简单 js 函数。
|
||||
表单的详细内容，可以参考[@tmagic/form](./tmagic-form)。我们通过 [JS Schema](./js-schema) 描述的表单配置，实现联动的方式，就是写一个简单 js 函数。
|
||||
|
||||
比如下面的例子，我们希望改变选项时，同时改变文本框的内容。
|
||||
|
||||
@ -27,7 +27,7 @@ tmagic-editor的联动，指这两种情况：
|
||||
|
||||
在经过表单渲染器时，所有指出函数 API 都会传入当前渲染的**表单组件实例(vm)**，**当前项目(value)**，**当前表单model**，**表单值formValue**，model 即 vue 的[表单输入绑定](https://v3.cn.vuejs.org/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95)，可以通过修改他来实现值联动。
|
||||
|
||||
当然我们也可以通过上述的参数传入，以及其他函数 API 实现更多灵活的表单联动，具体参考[表单 API](../../api/base-config)。
|
||||
当然我们也可以通过上述的参数传入，以及其他函数 API 实现更多灵活的表单联动，具体参考[表单 API](../../form-config/relate)。
|
||||
|
||||
## 组件联动
|
||||
tmagic-editor在 @tmagic/core 中，实现了组件的事件绑定/分发机制。在组件渲染时，每个组件在 @tmagic/ui 中经过基础组件渲染时，会被基础组件注入公共方法的实现。如下对按钮配置了**点击使文本隐藏**的联动事件，那么在对应按钮被点击时，将会触发对应绑定文本的隐藏。
|
||||
@ -35,7 +35,7 @@ tmagic-editor在 @tmagic/core 中，实现了组件的事件绑定/分发机制
|
||||
<img src="https://image.video.qpic.cn/oa_88b7d-10_2117738923_1637238863127559">
|
||||
|
||||
### 添加组件自定义事件
|
||||
如何开发一个完整组件可以参考[组件开发](../../component/introduction)，这一节我们主要讲述如何配置定义事件。
|
||||
如何开发一个完整组件可以参考[组件开发](../component)，这一节我们主要讲述如何配置定义事件。
|
||||
|
||||
在组件开发过程中，我们可以通过声明组件中的 event 文件，在文件中描述当前组件可以配置的事件名，和可以被触发的动作。
|
||||
```javascript
|
||||
@ -1,7 +1,7 @@
|
||||
# JS Schema
|
||||
tmagic-editor的业务组件需要有表单配置能力，我们通过一份配置来描述表单，我们采用的描述方案是 JS schema。当我们在编辑器中配置一个页面时，页面的基本信息和页面包含的组件信息，也是采用 JS schema 描述的。JS schema 描述方案，也是我们提供[高级函数](../advanced/high-level-function)功能的基础。
|
||||
tmagic-editor的业务组件需要有表单配置能力，我们通过一份配置来描述表单，我们采用的描述方案是 JS schema。当我们在编辑器中配置一个页面时，页面的基本信息和页面包含的组件信息，也是采用 JS schema 描述的。JS schema 描述方案，也是我们提供[代码块](../advanced/code-block)功能的基础。
|
||||
|
||||
组件的**配置描述**，参考[示例](../advanced/magic-form.html#示例)，是由开发者在开发组件时，通过 [@tmagic/form](../advanced/magic-form) 支持的表单项来提供的。
|
||||
组件的**配置描述**，参考[示例](./tmagic-form.html#示例)，是由开发者在开发组件时，通过 [@tmagic/form](./tmagic-form) 支持的表单项来提供的。
|
||||
|
||||
在编辑器中对页面进行编辑，保存得到的是一份关于页面基本信息、页面所包含组件以及组件配置信息的配置，我们称为 **DSL**，这份配置是最终页面渲染需要的描述信息。
|
||||
|
||||
@ -2,17 +2,17 @@
|
||||
|
||||
tmagic-editor的表单配置，核心就是使用了 @tmagic/form 来作为渲染器。@tmagic/form 是一个 npm 包，可以安装它，在你想使用的地方单独使用。
|
||||
|
||||
@tmagic/form 接受一个表单配置，详细配置可参考[表单 api](../../api/form.md)。
|
||||
@tmagic/form 接受一个表单配置，详细配置可参考[表单 api](../../api/form/form-props.md)。
|
||||
|
||||
## 安装
|
||||
|
||||
```bash
|
||||
# 最新稳定版
|
||||
$ npm install @tmagic/form@latest
|
||||
$ npm install @tmagic/form@beta
|
||||
```
|
||||
|
||||
```bash
|
||||
$ npm install element-plus
|
||||
$ npm install @tmagic/element-plus-adapter@beta @tmagic/design@beta element-plus -S
|
||||
```
|
||||
|
||||
## 快速上手
|
||||
@ -26,20 +26,26 @@ MagicForm 使用了 element-ui 库
|
||||
在 main.js 中写入以下内容：
|
||||
|
||||
```javascript
|
||||
import { createApp } from "vue";
|
||||
import ElementPlus from "element-plus";
|
||||
import MagicForm from "@tmagic/form";
|
||||
import { createApp } from 'vue';
|
||||
import ElementPlus from 'element-plus';
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn';
|
||||
|
||||
import "element-plus/dist/index.css";
|
||||
import TMagicDesign from '@tmagic/design';
|
||||
import MagicElementPlusAdapter from '@tmagic/element-plus-adapter';
|
||||
import MagicForm from '@tmagic/form';
|
||||
|
||||
import App from "./App.vue";
|
||||
import App from './App.vue';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(ElementUI);
|
||||
app.use(ElementPlus, {
|
||||
locale: zhCn,
|
||||
});
|
||||
app.use(TMagicDesign, MagicElementPlusAdapter);
|
||||
app.use(MagicForm);
|
||||
app.mount("#app");
|
||||
```
|
||||
|
||||
|
||||
以上代码便完成了 @tmagic/form 的引入。需要注意的是，ElementUI 的样式文件需要单独引入。
|
||||
|
||||
在 App.Vue 中写入以下内容：
|
||||
@ -1,11 +1,11 @@
|
||||
# @tmagic/ui
|
||||
在前面[页面渲染](../advanced/page)中提到的 UI 渲染器，就是包含在 @tmagic/ui 中的渲染器组件。
|
||||
|
||||
tmagic-editor的设计是希望发布的页面支持多个前端框架，即各个业务方可以根据自己熟悉的语言来开发组件、发布页面。也可以通过 [实现一个 runtime](../../page/advanced.html#实现一个-runtime) 的方式，来实现一个自己的 @tmagic/ui。
|
||||
tmagic-editor的设计是希望发布的页面支持多个前端框架，即各个业务方可以根据自己熟悉的语言来开发组件、发布页面。也可以通过 [实现一个 runtime](../runtime.html) 的方式，来实现一个自己的 @tmagic/ui。
|
||||
|
||||
所以tmagic-editor的设计中，针对每个前端框架，都需要有一个对应的 @tmagic/ui 来承担渲染器职责。同时，也需要一个使用和 @tmagic/ui 相同前端框架的 runtime 来 @tmagic/ui 和业务组件的，具体 runtime 概念，可以参考[页面发布](../../page/introduction)。
|
||||
所以tmagic-editor的设计中，针对每个前端框架，都需要有一个对应的 @tmagic/ui 来承担渲染器职责。同时，也需要一个使用和 @tmagic/ui 相同前端框架的 runtime 来 @tmagic/ui 和业务组件的，具体 runtime 概念，可以参考[页面发布](../publish)。
|
||||
|
||||
@tmagic/ui 在tmagic-editor设计中，承担的是业务逻辑无关的，基础组件渲染的功能。一切和业务相关的逻辑，都应该在 [runtime](../../page/introduction.html#runtime) 中实现。这样 @tmagic/ui 就能保持其通用性。
|
||||
@tmagic/ui 在tmagic-editor设计中，承担的是业务逻辑无关的，基础组件渲染的功能。一切和业务相关的逻辑，都应该在 [runtime](../runtime.html) 中实现。这样 @tmagic/ui 就能保持其通用性。
|
||||
|
||||
我们以项目代码中提供的 vue3 版本的 @tmagic/ui 作为示例介绍其中包含的内容。
|
||||
|
||||
@ -22,7 +22,7 @@ tmagic-editor的设计是希望发布的页面支持多个前端框架，即各
|
||||
|
||||
其中 page/container/Component 是 UI 的基础，是每个框架的 UI 都应该实现的。
|
||||
|
||||
button/text 其实就是一个组件开发的示例，具体组件开发相关规范可以参考[组件开发](../../component/introduction)。
|
||||
button/text 其实就是一个组件开发的示例，具体组件开发相关规范可以参考[组件开发](../component)。
|
||||
|
||||
## @tmagic/ui 示例
|
||||
- [vue3 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui)
|
||||
@ -119,7 +119,7 @@ export default Test;
|
||||
```
|
||||
|
||||
### 2. 使用tmagic-cli
|
||||
在 runtime vue3 中，我们已经提供好一份示例。在 tmagic.config.ts 文件中。只需要在 packages 加入你创建的组件的路径（如果是个 npm 包，则将路径替换为包名即可），打包脚本就会自动识别到你的组件。[tmagic-cli](../page/introduction.md#tmagic-cli)
|
||||
在 runtime vue3 中，我们已经提供好一份示例。在 tmagic.config.ts 文件中。只需要在 packages 加入你创建的组件的路径（如果是个 npm 包，则将路径替换为包名即可），打包工具就会自动识别到你的组件。
|
||||
|
||||
### 3. 启动 playground
|
||||
在上面的步骤完成后，在 playground/src/page/Editor.vue 中。找到组件栏的基础组件列表，在其中加入你的开发组件
|
||||
@ -16,7 +16,7 @@
|
||||
- 拓展描述，这部分内容目前还未有严格定义，但是我们保留这个扩展能力。
|
||||
- 组件 `type`, 是组件的类型，这是用来告诉编辑器，我们要渲染的是什么组件。每个组件在开发时就应该确定这样一个唯一、不和其他组件冲突的组件 `type`。
|
||||
|
||||
```
|
||||
```js
|
||||
[
|
||||
{
|
||||
text: '文本',
|
||||
@ -56,7 +56,7 @@ DSL 是编辑器搭建页面的最终产物（描述文件），其中包含了
|
||||
页面是tmagic-editor作为一个可视化编辑器经过配置后，最终得到的呈现结果。搭建后的页面会被发布上线，供用户访问。
|
||||
|
||||
### runtime
|
||||
我们把页面统一称为 runtime，更具体的 runtime 概念可以查看[页面发布](../page/introduction.html#runtime)。**runtime 是承载tmagic-editor项目页面的运行环境**。编辑器的工作区是 runtime 的一个具体实例，另一个就是我们发布上线后，用户访问的真实项目页面。
|
||||
我们把页面统一称为 runtime，更具体的 runtime 概念可以查看[页面发布](./publish.html#runtime)。**runtime 是承载tmagic-editor项目页面的运行环境**。编辑器的工作区是 runtime 的一个具体实例，另一个就是我们发布上线后，用户访问的真实项目页面。
|
||||
|
||||
### @tmagic/ui
|
||||
@tmagic/ui 包含了tmagic-editor的基础组件库，提供了容器、文本、按钮这样的基础组件。我们提供了不同语言框架的 @tmagic/ui，如 vue2 和 vue3。
|
||||
@ -74,6 +74,3 @@ DSL 是编辑器搭建页面的最终产物（描述文件），其中包含了
|
||||
### 组件联动
|
||||
组件 A 在完成点击事件后，希望组件 B 可以展示一个弹窗，就是组件联动的一个示例。tmagic-editor通过事件绑定方式，可以为组件 A 和 B 配置事件关联，实现上述的组件联动。
|
||||
<img src="https://image.video.qpic.cn/oa_88b7d-37_723692309_1636032154483681" alt="组件联动">
|
||||
|
||||
|
||||
|
||||
5
docs/guide/editor-expand.md
Normal file
5
docs/guide/editor-expand.md
Normal file
@ -0,0 +1,5 @@
|
||||
# 编辑器扩展
|
||||
|
||||
## UI扩展
|
||||
|
||||
## 行为扩展
|
||||
@ -6,49 +6,53 @@ tmagic-editor的编辑器我们已经封装成一个 npm 包，可以直接安
|
||||
|
||||
node.js > 14
|
||||
|
||||
可以通过[Vite](https://github.com/vitejs/vite) 或 [Vue CLI](https://cli.vuejs.org/zh/)快速创建项目。
|
||||
|
||||
推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。
|
||||
可以通过[Vite](https://cn.vitejs.dev/) 或 [Vue CLI](https://cli.vuejs.org/zh/)快速创建项目。
|
||||
|
||||
> 使用Vue CLI生成的项目需要在vue.config.js中加上配置：transpileDependencies: [/@tmagic/]
|
||||
|
||||
```bash
|
||||
# 最新稳定版
|
||||
$ npm install @tmagic/editor@latest -S
|
||||
$ npm install @tmagic/editor@beta @tmagic/form@beta -S
|
||||
```
|
||||
|
||||
editor 中组件自定义属性配置由[@tmagic/form](./advanced/magic-form.md)提供，需要添加@tmagic/form 依赖；editor 与 form 中使用到的 UI 组件都由 [element-plus](https://element-plus.org/)提供，需要添加 element-plus 依赖。
|
||||
由于在实际应用中项目常常会用到例如[element-plus](https://element-plus.org/)、[tdesign-vue-next](https://tdesign.tencent.com/vue-next/overview)等UI组件库。为了能让使用者能够选择不同UI库，[@tmagic/editor](https://github.com/Tencent/tmagic-editor/tree/master/packages/editor)将其中使用到的UI组件封装到[@tmagic/design](https://github.com/Tencent/tmagic-editor/tree/master/packages/design)中，然后通过不同的adapter来指定使用具体的对应的UI库，我们提供了[@tmagic/element-plus-adapter](https://github.com/Tencent/tmagic-editor/tree/master/packages/element-plus-adapter)来支持[element-plus](https://element-plus.org/)，所以还需要安装相关的依赖。
|
||||
|
||||
```bash
|
||||
$ npm install @tmagic/form@latest element-plus -S
|
||||
$ npm install @tmagic/element-plus-adapter@beta @tmagic/design@beta element-plus -S
|
||||
```
|
||||
|
||||
editor 中还包含了[monaco-editor](https://github.com/microsoft/monaco-editor)，可以参考 monaco-editor 的[配置指引](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md)。
|
||||
editor 中还包含了[monaco-editor](https://microsoft.github.io/monaco-editor/)，所以还需安装monaco-editor，可以参考 monaco-editor 的[配置指引](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md)。
|
||||
|
||||
```bash
|
||||
$ npm install monaco-editor -S
|
||||
```
|
||||
|
||||
## 快速上手
|
||||
|
||||
### 引入 @tmagic/editor
|
||||
## 引入 @tmagic/editor
|
||||
|
||||
在 main.js 中写入以下内容：
|
||||
|
||||
```js
|
||||
import { createApp } from "vue";
|
||||
import ElementPlus from "element-plus";
|
||||
import zhCn from "element-plus/es/locale/lang/zh-cn";
|
||||
import { createApp } from 'vue';
|
||||
import ElementPlus from 'element-plus';
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn';
|
||||
|
||||
import MagicEditor from "@tmagic/editor";
|
||||
import MagicForm from "@tmagic/form";
|
||||
import TMagicDesign from '@tmagic/design';
|
||||
import MagicEditor from '@tmagic/editor';
|
||||
import MagicElementPlusAdapter from '@tmagic/element-plus-adapter';
|
||||
import MagicForm from '@tmagic/form';
|
||||
|
||||
import App from "./App.vue";
|
||||
import App from './App.vue';
|
||||
|
||||
import "element-plus/dist/index.css";
|
||||
import "@tmagic/editor/dist/style.css";
|
||||
import "@tmagic/form/dist/style.css";
|
||||
import 'element-plus/dist/index.css';
|
||||
import '@tmagic/editor/dist/style.css';
|
||||
import '@tmagic/form/dist/style.css';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(ElementPlus, {
|
||||
locale: zhCn,
|
||||
});
|
||||
app.use(TMagicDesign, MagicElementPlusAdapter);
|
||||
app.use(MagicEditor);
|
||||
app.use(MagicForm);
|
||||
app.mount("#app");
|
||||
@ -56,14 +60,16 @@ app.mount("#app");
|
||||
|
||||
以上代码便完成了 @tmagic/editor 的引入。需要注意的是，样式文件需要单独引入。
|
||||
|
||||
### 使用 m-editor 组件
|
||||
可以参考我们提供的[Playground](https://github.com/Tencent/tmagic-editor/blob/master/playground/src/main.ts)示例实现代码
|
||||
|
||||
## 使用 m-editor 组件
|
||||
|
||||
在 App.vue 中写入以下内容：
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor
|
||||
v-model="data"
|
||||
v-model="dsl"
|
||||
:menu="menu"
|
||||
:runtime-url="runtimeUrl"
|
||||
:props-configs="propsConfigs"
|
||||
@ -93,11 +99,12 @@ app.mount("#app");
|
||||
],
|
||||
}),
|
||||
|
||||
data: ref({
|
||||
dsl: ref({
|
||||
// 初始化页面数据
|
||||
}),
|
||||
|
||||
runtimeUrl: "/runtime/vue3/playground.html",
|
||||
runtimeUrl: "/runtime/vue3/playground/index.html",
|
||||
|
||||
propsConfigs: [
|
||||
// 组件属性列表
|
||||
],
|
||||
@ -127,25 +134,25 @@ app.mount("#app");
|
||||
</style>
|
||||
```
|
||||
|
||||
关于 [@tmagic/editor](https://www.npmjs.com/package/@tmagic/editor) 组件，更多的属性配置详情请参考[编辑器 API](../api/editor/editor.md)。
|
||||
关于 [@tmagic/editor](https://github.com/Tencent/tmagic-editor/tree/master/packages/editor) 组件，更多的属性配置详情请参考[编辑器 API](../api/editor/props.md)。
|
||||
|
||||
其中，**有四个需要注意的属性配置项**：`runtimeUrl` `values` `configs` `componentGroupList`。这是能让我们的编辑器正常运行的关键。
|
||||
|
||||
### runtimeUrl
|
||||
## runtimeUrl
|
||||
|
||||
该配置涉及到 [runtime 概念](conception.html#runtime)，tmagic-editor编辑器中心的模拟器画布，是一个 iframe（这里的 `runtimeUrl` 配置的，就是你提供的 iframe 的 url），其中渲染了一个 runtime，用来响应编辑器中的组件增删改等操作。
|
||||
该配置涉及到 [runtime 概念](runtime.md)，tmagic-editor编辑器中心的模拟器画布，是一个 iframe（这里的 `runtimeUrl` 配置的，就是你提供的 iframe 的 url），其中渲染了一个 runtime，用来响应编辑器中的组件增删改等操作。
|
||||
|
||||
::: tip 如何快速得到一个 runtime
|
||||
如果要快速启动，可以使用[tmagic-editor项目源码](https://github.com/Tencent/tmagic-editor)中的 runtime，在提供的三个框架 vue2/vue3/react runtime 目录中选择一个，执行 `npm run build` 得到产物，并将产物放到你的项目中，此处的 runtimeUrl 指向你放置 playground.html 的路径。
|
||||
如果要快速启动，可以使用[tmagic-editor项目源码](https://github.com/Tencent/tmagic-editor)中的 runtime，在提供的三个框架 vue2/vue3/react runtime 目录中选择一个，执行 `npm run build:admin` 得到产物，并将产物放到你的项目中，此处的 runtimeUrl 指向你放置 runtime/playground/index.html 的路径。
|
||||
:::
|
||||
|
||||
### componentGroupList
|
||||
## componentGroupList
|
||||
|
||||
`componentGroupList` 是指定左侧组件库内容的配置。此处定义了在编辑器组件库中有什么组件。在添加的时候通过组件 `type` 来确定 runtime 中要渲染什么组件。可以参考 [componentGroupList 配置](../api/editor/editor.html#componentgrouplist)。
|
||||
`componentGroupList` 是指定左侧组件库内容的配置。此处定义了在编辑器组件库中有什么组件。在添加的时候通过组件 `type` 来确定 runtime 中要渲染什么组件。可以参考 [componentGroupList 配置](../api/editor/props.html#componentgrouplist)。
|
||||
|
||||
### propsConfigs/propsValues
|
||||
## propsConfigs/propsValues
|
||||
|
||||
`propsConfigs` `propsValues` 和 `componentGroupList` 中声明的组件是一一对应的，通过 `type` 来识别属于哪个组件，该配置涉及的内容，就是组件的表单配置描述，在[组件开发中](../component/introduction.html#组件开发)会通过 formConfig 配置来声明这份内容。
|
||||
`propsConfigs` `propsValues` 和 `componentGroupList` 中声明的组件是一一对应的，通过 `type` 来识别属于哪个组件，该配置涉及的内容，就是组件的表单配置描述，在[组件开发中](./component.md)会通过 formConfig 配置来声明这份内容。
|
||||
|
||||
`configs` 既可以通过 hardcode 方式写上每个组件的表单配置，也可以通过组件打包方式得到对应内容，然后通过异步加载来载入。比如：
|
||||
|
||||
@ -161,16 +168,11 @@ setup() {
|
||||
```
|
||||
|
||||
::: tip 如何快速得到一个 configs/values
|
||||
上述的 runtime 产物中，assets 目录中即包含一个 configs 文件，在你的项目组件初始化之后，异步加载它。并如上面代码中，赋值给 configs/values 即可。
|
||||
上述的 runtime 产物中，dist 目录中即包含一个 entry 文件夹，在你的项目组件初始化之后，分别异步加载里面的config/index.umd.js、value/index.umd.js。并如上面代码中，赋值给 configs/values 即可。
|
||||
:::
|
||||
|
||||
### 更多
|
||||
## 更多
|
||||
|
||||
通过上述步骤，可以快速得到一个初始化的简单编辑器。在编辑器中，对于使用者来说，需要了解的核心内容：
|
||||
|
||||
- [tmagic-editor编辑器的基础概念](conception)
|
||||
- [编辑器的产物 DSL](../page/introduction.html#编辑器产物-dsl)
|
||||
- [runtime 的概念](../page/introduction.html)
|
||||
- [如何实现一个 runtime](../page/advanced.html)
|
||||
通过上述步骤，可以快速得到一个初始化的简单编辑器。
|
||||
|
||||
除了上述内容外，文档的其他章节中，也会更深入的描述整个tmagic-editor的设计理念和实现细节。同时你也可以查看我们的[项目源码](https://github.com/Tencent/tmagic-editor)，从源码提供的 playground 和 runtime 示例来开发和理解tmagic-editor。
|
||||
@ -37,7 +37,6 @@ tmagic-editor可视化开源项目是从魔方平台演化而来的开源项目
|
||||
- **@tmagic/ui-vue2** 提供一些vue2基础组件。
|
||||
- **@tmagic/ui-react** 提供一些react基础组件。
|
||||
- **runtime** 实现在编辑器中对使用不同框架的组件的渲染。
|
||||
- **page** 项目提供最终页面发布的执行环境与组件构建。
|
||||
|
||||
可以查阅 tmagic 的[源代码](https://github.com/Tencent/tmagic-editor)，与文档描述内容可以逐一对应上，希望文档内容可以为开发者带来比较好的开发体验。
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
本章主要介绍tmagic-editor页面打包、发布相关的基础概念，打包原理，打包方案实现。使用了tmagic-editor开源代码的业务方可以自由定制页面的打包构建方案。
|
||||
|
||||
## 编辑器产物 DSL
|
||||
编辑器中最终保存得到的配置结果，同时也是tmagic-editor页面最终渲染的描述文件，就是一份 JS schema 形式的 DSL。其具体形式就是在 [JS Schema](/docs/guide/advanced/js-schema.html#DSL) 我们示例中提到的内容。
|
||||
编辑器中最终保存得到的配置结果，同时也是tmagic-editor页面最终渲染的描述文件，就是一份 JS schema 形式的 DSL。其具体形式就是在 [JS Schema](./advanced/js-schema.html#DSL) 我们示例中提到的内容。
|
||||
|
||||
在tmagic-editor编辑器中，所有的操作和配置信息，最终都保存成这一份 DSL。这份配置在tmagic-editor runtime 中被加载和渲染，最终呈现出tmagic-editor项目页。
|
||||
|
||||
@ -39,7 +39,7 @@ tmagic-editor提供了三个版本的 runtime 示例，可以参考：
|
||||
|
||||
## @tmagic/cli
|
||||
|
||||
在[组件开发](../component/introduction.md)中可以知道，一个组件是由组件(component)、表单配置(formConfig)、初始值(initValue)三个部分组成，其中表单配置跟初始值是提供给@tmagic/editor使用的，组件则是提供给runtime使用的。所以提供了@tmagic/cli来生成这几个部分的入口文件，处理以上提到的三个部分，还有组件的事件配置列表(@tmagic/editor中使用)，插件列表(runtime中使用)，总共5个入口文件。
|
||||
在[组件开发](./component.md)中可以知道，一个组件是由组件(component)、表单配置(formConfig)、初始值(initValue)三个部分组成，其中表单配置跟初始值是提供给@tmagic/editor使用的，组件则是提供给runtime使用的。所以提供了@tmagic/cli来生成这几个部分的入口文件，处理以上提到的三个部分，还有组件的事件配置列表(@tmagic/editor中使用)，插件列表(runtime中使用)，总共5个入口文件。
|
||||
|
||||
### 使用方法
|
||||
|
||||
72
docs/guide/runtime.md
Normal file
72
docs/guide/runtime.md
Normal file
@ -0,0 +1,72 @@
|
||||
# RUNTIME
|
||||
本章详细介绍如何深入理解tmagic-editor的打包，以及如何根据需求定制，修改tmagic-editor的页面打包发布方案。页面发布、打包相关的定制化开发，需要使用tmagic-editor的业务方，搭建好基于开源tmagic-editor的管理平台、存储服务等配套设施。
|
||||
|
||||
## 实现一个 runtime
|
||||
在 [@tmagic/ui](./advanced/tmagic-ui.html) 部分，我们已经说过，runtime 和 UI 是配套实现的。每个版本的 runtime 都需要一个对应的 UI 来作为渲染器，实现渲染 DSL 呈现页面的功能。
|
||||
|
||||
### UI
|
||||
一个 UI 应该至少包含一个渲染器，来实现[页面渲染](./advanced/page.html)。同时可以提供一些基础组件。具体实现可以参考[@tmagic/ui](./advanced/tmagic-ui.html)。
|
||||
|
||||
### page
|
||||
runtime 的 `page` 部分，就是真实项目页面的渲染环境。发布出去的项目页都需要基于该部分来实现渲染功能。而 `page` 的主要逻辑，就是需要加载 UI，同时实现业务方需要的业务逻辑，比如：
|
||||
- 提供页面需要的全局 api
|
||||
- 业务需要的特殊实现逻辑
|
||||
- 加载第三方全局组件/插件等
|
||||
|
||||
具体的 page 实现示例，可以参考
|
||||
- [vue3 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue3/page)
|
||||
- [vue2 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue2/page)
|
||||
- [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react/page)
|
||||
|
||||
### playground
|
||||
runtime 的 `playground` 部分，和 `page` 做的事情几乎一致，业务方可以包含上述 `page` 所拥有的全部能力。但是，因为 playground 需要被编辑器加载，作为编辑器中页面模拟器的渲染容器，和编辑器通信，接受编辑器中组件的增删改查。所以，除了保持和 `page` 一样的渲染逻辑之外，`playground` 还要额外实现一套既定通信内容和 api，才能实现和编辑器的通信功能。
|
||||
|
||||
#### onRuntimeReady
|
||||
**在 playground 页面渲染后**，需要调用接口通知编辑器完成加载。该调用需要传入一个参数 API，即挂载了增删改查功能的对象示例，提供给编辑器。
|
||||
```javascript
|
||||
window.magic?.onRuntimeReady(API)
|
||||
```
|
||||
|
||||
#### onPageElUpdate
|
||||
**playground 在每次更新了页面配置后**，调用一次 onPageElUpdate 并传入一个 DOM 节点，该方法作用是传入一个页面渲染组件的根节点，用来告知编辑器的模拟器遮罩如何作出反应。
|
||||
```javascript
|
||||
window.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
|
||||
```
|
||||
|
||||
#### 提供 API
|
||||
| API | 说明 | 参数 |
|
||||
|---------- |-------- |---------- |
|
||||
|updateRootConfig| 根节点更新 | `root: MApp` |
|
||||
|updatePageId| 更新当前页面 id | `id: string` |
|
||||
|select| 选中组件 | `id: string`|
|
||||
|add| 增加组件 | { `config` , `root` }: `UpdateData` |
|
||||
|update| 更新组件 | { `config` , `root` }: `UpdateData` |
|
||||
|remove| 删除组件 | { `config` , `root` }: `UpdateData` |
|
||||
|sortNode| 组件在容器间排序 |{ `src` , `dist`, `root` }: `SortEventData` |
|
||||
|
||||
runtime 的实现示例，可以参考tmagic-editor提供的：
|
||||
- [vue3 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue3)
|
||||
- [vue2 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue2)
|
||||
- [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react)
|
||||
|
||||
### 页面发布
|
||||
如介绍中提到的，tmagic-editor页面发布方案，是对构建产物 `page/index.html` 进行项目信息注入。项目信息就是搭建平台存储的页面配置。发布时，将注入项目信息的 `page/index.html` 发布出去即可。
|
||||
|
||||
## 版本管理
|
||||
基于上一步提到的打包原理，每次构建后，得到的产物都可以进行归档编号，存为版本。涉及到的组件改动和新增修改，体现在各个版本中。
|
||||
|
||||
<img src="https://image.video.qpic.cn/oa_88b7d-32_1233288257_1633783105283986" width="40%" alt="版本选择">
|
||||
|
||||
版本管理具体如何实现，这取决于使用tmagic-editor的业务方。版本管理具有如下优点：
|
||||
1. 对于已经配置好发布的项目，使用固定版本，不会被新版本的特性影响，保证项目线上稳定运行
|
||||
2. 发布的新版本如果出现问题，可以及时回退选择使用旧版本
|
||||
|
||||
## 结合业务定制
|
||||
tmagic-editor的静态资源构建，项目配置保存，页面发布，在tmagic-editor的提供的示例方案中，流程是：
|
||||
1. 触发构建，执行流水线，基于 runtime 执行 build
|
||||
2. 将构建产物归档推送至 cdn，存为一个ui版本
|
||||
3. 项目配保存后，项目发布时，将项目配置发布至 CDN 存储为 DSL.js，同时根据当前项目使用的ui版本，获取到 page/index.html，将 DSL.js 引用方式以 script 标签形式写入。
|
||||
4. 将注入信息的 page/index.html 发布为项目静态资源 act.html
|
||||
5. 线上可加载 act.html 访问项目
|
||||
|
||||
其中各个步骤的定制，可以交由业务方根据tmagic-editor提供的示例进行自定义修改。
|
||||
@ -123,13 +123,13 @@ body {
|
||||
npm run serve
|
||||
```
|
||||
|
||||
到这里一个空白的编辑器就运行起来了。不出意外，通过浏览器访问http://localhost:8081/，将看到
|
||||
到这里一个空白的编辑器就运行起来了。不出意外，通过浏览器访问 **http:\/\/localhost:8081/** ，将看到
|
||||
|
||||
<img src="/tutorial/one/init.png" />
|
||||
|
||||
## 添加组件列表
|
||||
|
||||
api详情：[componentGroupList](../api/editor/editor.md#componentGroupList)
|
||||
api详情：[componentGroupList](../../api/editor/props.md#componentgrouplist)
|
||||
|
||||
```ts
|
||||
const componentGroupList = ref([
|
||||
@ -152,7 +152,7 @@ const componentGroupList = ref([
|
||||
|
||||
## 设置编辑器初始值
|
||||
|
||||
api详情：[modelValue](../api/editor/editor.md#modelValue)
|
||||
api详情：[modelValue](../../api/editor/props.md#modelvalue-v-model)
|
||||
|
||||
```ts
|
||||
const value = ref({
|
||||
@ -163,11 +163,11 @@ const value = ref({
|
||||
|
||||
加上初始值后，点击新增页面就可以渲染出一个画布了，但是点击添加HelloWorld组件依然没有反应
|
||||
|
||||
这是因为这时的编辑器并能理解HelloWorld是什么，需要在[render](../api/editor/editor.html#render)函数中处理
|
||||
这是因为这时的编辑器并能理解HelloWorld是什么，需要在[render](../../api/editor/props.html#render)函数中处理
|
||||
|
||||
## 渲染
|
||||
|
||||
api详情：[render](../api/editor/editor.md#render)
|
||||
api详情：[render](../../api/editor/props.md#render)
|
||||
|
||||
```ts
|
||||
const render = () => {
|
||||
@ -205,7 +205,7 @@ configureWebpack: {
|
||||
```
|
||||
|
||||
> render函数中获取page是通过value.value.items[0]，这样只是表示第一个页面，如果页面有多个页面就会有问题
|
||||
> 可以通过[editorService.get('page')](../api/editor/services.md#get)获取到当前选中的页面
|
||||
> 可以通过[editorService.get('page')](../../api/editor/editorServiceMethods.md#get)获取到当前选中的页面
|
||||
|
||||
```ts
|
||||
import { editorService } from '@tmagic/editor';
|
||||
@ -222,7 +222,7 @@ const page = computed(() => editorService.get<MPage>('page'))
|
||||
renderer.iframe.contentWindow.magic?.onRuntimeReady({});
|
||||
renderer.iframe.contentWindow.magic?.onPageElUpdate(root);
|
||||
```
|
||||
> render函数接收一个stageCore参数 [StageCore](../api/stage/core.md)
|
||||
> render函数接收一个stageCore参数 [StageCore](../../api/stage/coreMethods.md)
|
||||
|
||||
最终完整的render函数实现
|
||||
|
||||
@ -280,7 +280,7 @@ const render = async ({ renderer }: StageCore) => {
|
||||
};
|
||||
```
|
||||
|
||||
以上就是一个简单的搭建编辑器的示例，安装上面的步骤完成后会发现，可以添加组件，也可选中组件，但是无法拖动，配置属性中的样式也无法生效，这是因为上述的render函数并不完整，没有处理dsl中style，下一节将详细介绍runtime的搭建，将不再使用render函数的方式而是使用[runtimeUrl](../api/editor/editor.md#runtimeurl)。
|
||||
以上就是一个简单的搭建编辑器的示例，安装上面的步骤完成后会发现，可以添加组件，也可选中组件，但是无法拖动，配置属性中的样式也无法生效，这是因为上述的render函数并不完整，没有处理dsl中style，下一节将详细介绍runtime的搭建，将不再使用render函数的方式而是使用[runtimeUrl](../../api/editor/props.md#runtimeurl)。
|
||||
|
||||
::: tip
|
||||
并不是render函数不好，但是从设计上将，render函数还是让渲染逻辑落到了编辑器中，@tmagic/editor的设计是希望做到渲染跟编辑器解耦
|
||||
15
docs/guide/tutorial/index.md
Normal file
15
docs/guide/tutorial/index.md
Normal file
@ -0,0 +1,15 @@
|
||||
# 写在前面
|
||||
|
||||
本教程将一步一步引导大家实现一个完整的可视化编辑器，每个章节都是在前一章节的基础上进行，后一章节会比前一章节的功能更加完善，旨在绑架大家理解编辑器的各个组成部分的实现思路
|
||||
|
||||
[第一章 Hello World](./hello-world.md)
|
||||
|
||||
通过搭建一个最简单的编辑器，让大家对编辑器有一个最基本的认识。
|
||||
|
||||
[第二章 Runtime](./runtime.md)
|
||||
|
||||
通过将组件渲染从编辑器中解耦分离出来，实现编辑器对不同技术栈实现的组件的支持
|
||||
|
||||
[第三章 DSL解析渲染](./render.md)
|
||||
|
||||
理解DSL，并将DSL渲染成对应的组件
|
||||
@ -1,4 +1,4 @@
|
||||
# 3.[DSL](../guide/conception.md#dsl) 解析渲染
|
||||
# 3.[DSL](../conception.md#dsl) 解析渲染
|
||||
|
||||
tmagic 提供了 vue3/vue2/react 三个版本的解析渲染组件，可以直接使用
|
||||
|
||||
@ -55,9 +55,9 @@ items: 容器下包含的节点组成的数组，items中不能有page,app
|
||||
|
||||
在hello-ui下创建 Component.vue 文件
|
||||
|
||||
由于节点的type是由业务自行定义的，所以需要使用动态组件渲染，在vue下可以使用[component](https://cn.vuejs.org/v2/api/#component)组件来实现
|
||||
由于节点的type是由业务自行定义的，所以需要使用动态组件渲染，在vue下可以使用[component](https://cn.vuejs.org/api/built-in-special-elements.html#component)组件来实现
|
||||
|
||||
[component](https://cn.vuejs.org/v2/api/#component) 是通过is参数来决定哪个组件被渲染，所以将type与组件做绑定
|
||||
[component](https://cn.vuejs.org/api/built-in-special-elements.html#component) 是通过is参数来决定哪个组件被渲染，所以将type与组件做绑定
|
||||
|
||||
例如有组件 HelloWorld，可以将组件全局注册
|
||||
|
||||
@ -1,8 +1,24 @@
|
||||
---
|
||||
home: true
|
||||
heroImage: ./favicon.png
|
||||
heroText: tmagic-editor页面可视化平台
|
||||
tagline: null
|
||||
layout: home
|
||||
|
||||
title: tmagic-editor
|
||||
titleTemplate: tmagic-editor
|
||||
|
||||
hero:
|
||||
name: tmagic-editor
|
||||
text: 页面可视化平台
|
||||
image:
|
||||
src: ./favicon.png
|
||||
alt: TMagicEditor
|
||||
|
||||
actions:
|
||||
- theme: brand
|
||||
text: 开始
|
||||
link: /guide/
|
||||
- theme: alt
|
||||
text: GitHub
|
||||
link: https://github.com/Tencent/tmagic-editor
|
||||
|
||||
|
||||
features:
|
||||
- title: 所见即所得
|
||||
@ -1,33 +0,0 @@
|
||||
{
|
||||
"name": "docs",
|
||||
"private": true,
|
||||
"version": "1.2.0-beta.18",
|
||||
"scripts": {
|
||||
"clean:top": "rimraf dist",
|
||||
"dev": "vuepress dev src",
|
||||
"build": "npm run clean:top && vuepress build src -d dist"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.0.9",
|
||||
"@tmagic/design": "1.2.0-beta.18",
|
||||
"@tmagic/element-plus-adapter": "1.2.0-beta.18",
|
||||
"@tmagic/form": "1.2.0-beta.18",
|
||||
"@tmagic/schema": "1.2.0-beta.18",
|
||||
"@tmagic/utils": "1.2.0-beta.18",
|
||||
"element-plus": "^2.2.19",
|
||||
"highlight.js": "^11.2.0",
|
||||
"lodash": "^4.17.21",
|
||||
"lodash-es": "^4.17.21",
|
||||
"serialize-javascript": "^6.0.0",
|
||||
"vue": "^3.2.37"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vuepress/bundler-vite": "^2.0.0-beta.51",
|
||||
"@vuepress/cli": "^2.0.0-beta.51",
|
||||
"@vuepress/client": "^2.0.0-beta.51",
|
||||
"@vuepress/plugin-search": "^2.0.0-beta.51",
|
||||
"@vuepress/theme-default": "^2.0.0-beta.51",
|
||||
"vite": "~3.1.3",
|
||||
"vuepress": "^2.0.0-beta.51"
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
@ -1,241 +0,0 @@
|
||||
import { viteBundler } from '@vuepress/bundler-vite';
|
||||
import { defineUserConfig } from '@vuepress/cli';
|
||||
import { defaultTheme } from '@vuepress/theme-default';
|
||||
import { searchPlugin } from '@vuepress/plugin-search'
|
||||
|
||||
import path from 'path';
|
||||
|
||||
const sidebar = {
|
||||
guide: [
|
||||
{
|
||||
text: '使用指南',
|
||||
children: [
|
||||
'/guide/introduction',
|
||||
'/guide/installation',
|
||||
'/guide/conception',
|
||||
]
|
||||
}, {
|
||||
text: '进阶指南',
|
||||
children: [
|
||||
'/guide/advanced/js-schema.md',
|
||||
'/guide/advanced/layout.md',
|
||||
'/guide/advanced/page.md',
|
||||
'/guide/advanced/high-level-function.md',
|
||||
'/guide/advanced/magic-ui.md',
|
||||
'/guide/advanced/magic-form.md',
|
||||
'/guide/advanced/coupling.md',
|
||||
]
|
||||
}
|
||||
],
|
||||
page: [
|
||||
{
|
||||
text: '页面发布',
|
||||
sidebarDepth: 2,
|
||||
children: [
|
||||
'/page/introduction',
|
||||
'/page/advanced',
|
||||
]
|
||||
}
|
||||
],
|
||||
admin: [
|
||||
{
|
||||
text: '管理端Demo',
|
||||
children: [
|
||||
'/admin/introduction',
|
||||
]
|
||||
}
|
||||
],
|
||||
component: [
|
||||
{
|
||||
text: '组件开发',
|
||||
children: [
|
||||
'/component/introduction',
|
||||
]
|
||||
}
|
||||
],
|
||||
editorApi: [
|
||||
{
|
||||
text: '编辑器(@tmagic/editor)',
|
||||
children: [
|
||||
'/api/editor/editor',
|
||||
'/api/editor/services',
|
||||
]
|
||||
},
|
||||
],
|
||||
formApi: [
|
||||
{
|
||||
text: '表单(@tmagic/form)',
|
||||
children: [
|
||||
'/api/form/form',
|
||||
]
|
||||
},
|
||||
],
|
||||
formConfig: [
|
||||
{
|
||||
text: '表单配置',
|
||||
children: [
|
||||
'/api/form-config/layout',
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'field配置',
|
||||
children: [
|
||||
'/api/form-config/fields/cascader',
|
||||
'/api/form-config/fields/checkbox',
|
||||
'/api/form-config/fields/color-picker',
|
||||
'/api/form-config/fields/date-picker',
|
||||
'/api/form-config/fields/datetime-picker',
|
||||
'/api/form-config/fields/display',
|
||||
'/api/form-config/fields/hidden',
|
||||
'/api/form-config/fields/number',
|
||||
'/api/form-config/fields/input',
|
||||
'/api/form-config/fields/link',
|
||||
'/api/form-config/fields/redio',
|
||||
'/api/form-config/fields/select',
|
||||
'/api/form-config/fields/switch',
|
||||
'/api/form-config/fields/textarea',
|
||||
'/api/form-config/fields/time-picker',
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '联动配置',
|
||||
children: [
|
||||
'/api/form-config/relate',
|
||||
]
|
||||
},
|
||||
],
|
||||
stageApi: [
|
||||
{
|
||||
text: '画布(@tmagic/stage)',
|
||||
children: [
|
||||
'/api/stage/core',
|
||||
'/api/stage/mask',
|
||||
'/api/stage/render',
|
||||
'/api/stage/drag-resize',
|
||||
]
|
||||
},
|
||||
],
|
||||
tutorial: [
|
||||
{
|
||||
text: '教程',
|
||||
children: [
|
||||
'/tutorial/hello-world',
|
||||
'/tutorial/runtime',
|
||||
'/tutorial/render',
|
||||
]
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
export default defineUserConfig({
|
||||
title: 'tmagic-editor',
|
||||
description: 'tmagic',
|
||||
lang: 'zh-CN',
|
||||
base: '/tmagic-editor/docs/',
|
||||
theme: defaultTheme({
|
||||
logo: './favicon.png',
|
||||
navbar: [
|
||||
{
|
||||
text: '文档',
|
||||
children: [
|
||||
{
|
||||
text: '使用指南',
|
||||
link: '/guide/introduction'
|
||||
},
|
||||
{
|
||||
text: '组件开发',
|
||||
link: '/component/introduction'
|
||||
},
|
||||
{
|
||||
text: '页面发布',
|
||||
link: '/page/introduction'
|
||||
},
|
||||
{
|
||||
text: '管理端Demo',
|
||||
link: '/admin/introduction'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'API参考',
|
||||
children: [
|
||||
{
|
||||
text: '编辑器',
|
||||
link: '/api/editor/editor'
|
||||
},
|
||||
{
|
||||
text: '表单',
|
||||
link: '/api/form/form'
|
||||
},
|
||||
{
|
||||
text: '表单配置',
|
||||
link: '/api/form-config/layout'
|
||||
},
|
||||
{
|
||||
text: '画布(Stage)',
|
||||
link: '/api/stage/core'
|
||||
},
|
||||
],
|
||||
}, {
|
||||
text: '教程',
|
||||
link: '/tutorial/hello-world',
|
||||
}, {
|
||||
text: '查看源码',
|
||||
link: 'https://github.com/Tencent/tmagic-editor'
|
||||
}, {
|
||||
text: 'Playground',
|
||||
link: 'https://tencent.github.io/tmagic-editor/playground/index.html'
|
||||
}
|
||||
],
|
||||
docsDir: 'src',
|
||||
sidebarDepth: 2,
|
||||
sidebar: {
|
||||
'/guide/': sidebar.guide,
|
||||
'/page/': sidebar.page,
|
||||
'/component/': sidebar.component,
|
||||
'/api/editor': sidebar.editorApi,
|
||||
'/api/form': sidebar.formApi,
|
||||
'/api/form-config': sidebar.formConfig,
|
||||
'/api/stage': sidebar.stageApi,
|
||||
'/tutorial': sidebar.tutorial,
|
||||
},
|
||||
lastUpdated: false,
|
||||
contributors: false,
|
||||
|
||||
}),
|
||||
plugins: [
|
||||
searchPlugin(),
|
||||
],
|
||||
bundler: viteBundler({
|
||||
vuePluginOptions: {
|
||||
template: {
|
||||
ssr: true,
|
||||
compilerOptions: {
|
||||
directiveTransforms: {
|
||||
loading: () => {
|
||||
return {
|
||||
props: [],
|
||||
needRuntime: true,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
viteOptions: {
|
||||
resolve: {
|
||||
alias:[
|
||||
{ find: /^@tmagic\/form/, replacement: path.join(__dirname, '../../../packages/form/src/index.ts') },
|
||||
{ find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../../packages/utils/src/index.ts') },
|
||||
{ find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../../packages/schema/src/index.ts') },
|
||||
{ find: /^@tmagic\/design/, replacement: path.join(__dirname, '../../../packages/design/src/index.ts') },
|
||||
{ find: /^@tmagic\/element-plus-adapter/, replacement: path.join(__dirname, '../../../packages/element-plus-adapter/src/index.ts') },
|
||||
]
|
||||
},
|
||||
// @ts-expect-error: vite 还没有给 ssr 配置项提供类型
|
||||
ssr: {
|
||||
noExternal: ['lodash-es'],
|
||||
}
|
||||
},
|
||||
}),
|
||||
});
|
||||
@ -1,8 +0,0 @@
|
||||
// serialize-javascript 依赖的 randombytes 依赖全局的 global 对象，因此此处需添加 global polyfill
|
||||
if (typeof global === 'undefined') {
|
||||
(window as any).global = window;
|
||||
}
|
||||
|
||||
if (typeof globalThis === 'undefined') {
|
||||
(window as any).globalThis = window;
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
:root {
|
||||
--c-brand: #2882e0;
|
||||
}
|
||||
@ -1,218 +0,0 @@
|
||||
# 介绍
|
||||
|
||||
我们提供了可视化搭建平台管理端（magic-admin）供开发者直接使用，与可视化编辑器（@tmagic/editor）、自定义表单（@tmagic/form）配套。管理端代码存放于[开源仓库](https://github.com/Tencent/tmagic-editor)"magic-admin"目录下，可作为一个独立项目运行。我们期望，一方面开发者可以更清晰的了解一个项目从编辑到生成的整个流程；另一方面，开发者也可以在 magic-admin 的基础上快速搭建适合自己业务的管理平台，构建一个完整的页面可视化搭建系统。
|
||||
|
||||
管理端提供了如下能力：
|
||||
|
||||
- 项目列表展示，查询
|
||||
- 项目创建，复制
|
||||
- 项目编辑以及 AB TEST 配置能力
|
||||
- 项目发布以及发布状态查看和管理
|
||||
|
||||
<img src="https://vfiles.gtimg.cn/vupload/20211129/81d34a1638168945248.png">
|
||||
|
||||
## 开发调试
|
||||
|
||||
magic-admin 管理端分为 web 端和 server 端，目录结构如下：
|
||||
|
||||
**web 目录结构**
|
||||
|
||||
```
|
||||
.
|
||||
├── babel.config.js
|
||||
├── jest.config.js
|
||||
├── package.json
|
||||
├── package-lock.json
|
||||
├── public
|
||||
│ ├── favicon.ico
|
||||
│ └── index.html
|
||||
├── README.md
|
||||
├── src
|
||||
│ ├── api（web 端接口文件）
|
||||
│ ├── App.vue
|
||||
│ ├── assets
|
||||
│ ├── components（组件文件）
|
||||
│ ├── config（表单和状态配置文件）
|
||||
│ ├── main.ts（入口文件）
|
||||
│ ├── plugins（插件）
|
||||
│ ├── router（路由）
|
||||
│ ├── shims-vue.d.ts
|
||||
│ ├── store（全局变量的封装）
|
||||
│ ├── typings
|
||||
│ ├── use（核心逻辑）
|
||||
│ ├── util（公共方法）
|
||||
│ └── views
|
||||
├── tests
|
||||
│ ├── unit（测试用例文件）
|
||||
│ └── utils.ts
|
||||
├── tsconfig.json
|
||||
├── types（声明文件）
|
||||
│ ├── axios-jsonp
|
||||
│ ├── index.d.ts
|
||||
│ └── shims-vue.d.ts
|
||||
└── vue.config.js
|
||||
```
|
||||
|
||||
**server 目录结构**
|
||||
|
||||
```
|
||||
.
|
||||
├── jest.config.ts
|
||||
├── package.json
|
||||
├── package-lock.json
|
||||
├── pm2.config.js
|
||||
├── src
|
||||
│ ├── config（配置文件）
|
||||
│ ├── controller（控制器）
|
||||
│ ├── database（数据库初始化 sql 文件）
|
||||
│ ├── index.ts（入口文件）
|
||||
│ ├── models（数据库模型定义，使用`sequelize`）
|
||||
│ ├── routers（路由文件）
|
||||
│ ├── sequelize（数据库实例初始化文件）
|
||||
│ ├── service（service 文件）
|
||||
│ ├── template（发布所需模板文件）
|
||||
│ ├── typings（声明文件）
|
||||
│ └── utils（公共方法文件）
|
||||
├── tests
|
||||
│ └── unit（测试用例）
|
||||
└── tsconfig.json
|
||||
```
|
||||
|
||||
**开发者本地调试 magic-admin 请按照如下步骤：**
|
||||
|
||||
- 数据库：
|
||||
我们在 magic-admin/server/src/database/init.sql 中准备了库表初始化文件，开发者首先需要创建所需数据表
|
||||
|
||||
- 表名：magic_act_info
|
||||
项目基础信息表，包含项目 ID，项目名称，项目负责人，项目时间等项目基础信息。
|
||||
- 表名：magic_ui_config
|
||||
页面配置表，magic-admin 支持了一个项目中包含多个项目页面的能力，因此每个页面的组件配置信息将分别存储。
|
||||
|
||||
- 启动 web 端：
|
||||
|
||||
```bash
|
||||
$ cd magic-admin/web
|
||||
$ npm i
|
||||
$ npm run serve
|
||||
```
|
||||
|
||||
- 启动 server 端
|
||||
|
||||
```bash
|
||||
$ cd magic-admin/server
|
||||
$ npm i
|
||||
$ npm run dev
|
||||
```
|
||||
|
||||
server 文件夹下面这些敏感文件，需要开发者参考示例进行替换：
|
||||
|
||||
```
|
||||
.
|
||||
├── src
|
||||
│ ├── config
|
||||
│ │ ├── databaseExample.ts（数据库配置文件）
|
||||
│ │ ├── keyExample.ts（加密秘钥配置）
|
||||
```
|
||||
|
||||
- 关于登录态：
|
||||
magic-admin 在库表中为开发者预留了用户信息字段（项目负责人），开发者可以根据自身业务需要，实现用户登录态
|
||||
|
||||
```js
|
||||
// web/src/App.vue
|
||||
watchEffect(async () => {
|
||||
// 登录态获取交由开发者实现
|
||||
const userName = process.env.VUE_APP_USER_NAME || "defaultName";
|
||||
Cookies.set("userName", userName);
|
||||
});
|
||||
```
|
||||
|
||||
## 管理端能力
|
||||
|
||||
- **项目状态**
|
||||
|
||||
我们将项目的状态分为三种：修改中，部分页面已发布，全部页面已发布。在项目列表页面，可以展开查看每个项目页面的状态。
|
||||
|
||||
修改中：项目所有页面均在编辑状态
|
||||
|
||||
部分已发布：项目的一些页面在编辑状态，一些页面已发布
|
||||
|
||||
已发布：项目所有页面均已发布
|
||||
|
||||
- **在管理端引入 runtime**
|
||||
|
||||
在管理端中我们提供了一个可视化的模拟画布，他需要依赖 runtime 核心库，我们已经在 magic-admin/server/static 中内置了一个 vue3 版本的 runtime，开发者可以直接使用
|
||||
如果需要使用或调试最新版本的 runtime，那么需要在 magic 根目录下运行以下命令进行 runtime 打包构建
|
||||
|
||||
```js
|
||||
cd tmatic-editor
|
||||
npm run build:runtime:admin
|
||||
```
|
||||
|
||||
将/runtime/{vue3 | vue2 | react}/dist 中所有文件以及文件夹复制到 /magic-admin/server/static 目录下
|
||||
|
||||
上面的操作我们提供了/magic-admin/setup.sh 脚本文件来实现，开发者可以参考该脚本文件来搭建流水线。
|
||||
|
||||
[runtime 详细介绍](https://tencent.github.io/tmagic-editor/docs/page/introduction.html#runtime)
|
||||
|
||||
- **AB TEST**
|
||||
|
||||
当项目开发者需要对页面进行 AB TEST 测试时，可以在项目中创建多个项目页面，并且在项目配置中进行配置
|
||||
<img src="https://vfiles.gtimg.cn/vupload/20211129/c11fa81638173475771.png">
|
||||
这里仅为管理端的配置，通过这里我们将在项目配置文件中得到类似如下结构的 abtest 信息，开发者可以在页面加载时根据 DSL 的 abtest 字段进行判断。
|
||||
|
||||
```js
|
||||
abTest: [
|
||||
{
|
||||
name: "abtest1",
|
||||
type: ["pgv_pvid"],
|
||||
pageList: [
|
||||
{
|
||||
pageName: "page_1",
|
||||
proportion: "50",
|
||||
},
|
||||
{
|
||||
pageName: "page_2",
|
||||
proportion: "50",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
- **项目保存**
|
||||
|
||||
项目创建之后的配置信息分为两部份：项目基础信息，页面组件配置信息。
|
||||
项目基础信息是整个项目共用的配置项，对应 magic_act_info 数据表
|
||||
页面组件配置信息是一个项目中单个页面的配置项，对应 magic_ui_config 数据表
|
||||
|
||||
项目基础信息不在 magic-editor 支持范围以内，需要开发者自行结合 @tmagic/form 按需开发。管理端示例中这部分内容在页面右上角【项目配置】抽屉页
|
||||
|
||||
页面组件配置信息是指 magic-editor 中的 modelValue，他是一份 js schema 包含了页面内组件的配置内容，也是页面渲染的关键依赖文件。[DSL 概念参考](https://tencent.github.io/tmagic-editor/docs/page/introduction.html#%E7%BC%96%E8%BE%91%E5%99%A8%E4%BA%A7%E7%89%A9-DSL)
|
||||
|
||||
magic-admin 支持一个项目中创建多个项目页面的能力，因此，在项目保存的时候，我们的做法是将每个页面单独作为一条记录保存，比如项目 A 中包含页面 1 和页面 2
|
||||
保存之后我们将得到
|
||||
|
||||
magic_act_info 表
|
||||
| act_id | act_name | operator | act_status | abtest_raw | ... |
|
||||
| --- | --- | --- | --- |--- |--- |
|
||||
| 123 |项目 A | username | 修改中| []|... |
|
||||
|
||||
magic_ui_config 表
|
||||
| id | act_id | c_dist_code | page_title | page_publish_status |... |
|
||||
| --- | --- | --- | --- |--- | --- |
|
||||
| 1 |123 | 页面 1 的 DSL 配置 |页面 1 |修改中|...|
|
||||
| 2 |123 | 页面 2 的 DSL 配置 |页面 2|修改中|...|
|
||||
|
||||
- **项目发布**
|
||||
|
||||
管理端的项目发布是对[页面发布](https://tencent.github.io/tmagic-editor/docs/page/introduction.html#%E9%A1%B5%E9%9D%A2%E5%8F%91%E5%B8%83) 的实践。
|
||||
原始的页面框架 page.html 需要通过 runtime 打包生成，注入的 DSL 保存在 magic_ui_config 表 c_dist_code 字段中。
|
||||
发布时将 DSL 文件注入到 page.html 中，写入 server/assets/publish 目录下，访问路径： http://localhost/publish/${page_name}.html
|
||||
|
||||
## 部署
|
||||
|
||||
::: tip
|
||||
前提条件：node 环境>=14.15
|
||||
:::
|
||||
|
||||
如需使用流水线部署，请参考 /magic-admin/setup.sh
|
||||
@ -1,404 +0,0 @@
|
||||
# m-editor
|
||||
|
||||
## props
|
||||
|
||||
### modelValue
|
||||
|
||||
- **类型：** [MApp](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)[]
|
||||
|
||||
- **默认值：** {}
|
||||
|
||||
- **详情：**
|
||||
|
||||
页面初始值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'app',
|
||||
id: 'app_1',
|
||||
items: [
|
||||
{
|
||||
type: 'page',
|
||||
id: 'page_1',
|
||||
items: [
|
||||
{
|
||||
type: 'text',
|
||||
id: 'text_1',
|
||||
text: '文本'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### componentGroupList
|
||||
|
||||
- **类型：** [ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/type.ts)[]
|
||||
|
||||
- **默认值：** []
|
||||
|
||||
- **详情：**
|
||||
|
||||
左侧面板中的组件列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { FolderOpened, SwitchButton, Tickets } from '@element-plus/icons-vue';
|
||||
|
||||
[
|
||||
{
|
||||
title: '容器',
|
||||
items: [
|
||||
{
|
||||
icon: FolderOpened,
|
||||
text: '组',
|
||||
type: 'container',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '基础组件',
|
||||
items: [
|
||||
{
|
||||
icon: Tickets,
|
||||
text: '文本',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
icon: SwitchButton,
|
||||
text: '按钮',
|
||||
type: 'button',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
```
|
||||
|
||||
::: tip
|
||||
icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/icon.html)
|
||||
|
||||
也可直接使用url，例如
|
||||
```js
|
||||
{
|
||||
icon: 'https://vfiles.gtimg.cn/vupload/20220614/9cc3091655207317835.png'
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
::: warning
|
||||
此配置仅在[sidebar](#sidebar)中配置了'component-list'时有效
|
||||
:::
|
||||
|
||||
### sidebar
|
||||
|
||||
- **类型：** [SideBarData](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/type.ts)
|
||||
|
||||
- **默认值：** { type: 'tabs', status: '组件', items: ['component-list', 'layer'] }
|
||||
|
||||
- **详情：**
|
||||
|
||||
左侧面板，目前只支持type: 'tabs';
|
||||
|
||||
component-list的text为'组件'
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { List } from '@element-plus/icons-vue';
|
||||
import ModListPanel from '../components/sidebars/ModListPanel.vue';
|
||||
|
||||
{
|
||||
type: 'tabs',
|
||||
status: '组件',
|
||||
items: [
|
||||
'component-list',
|
||||
'layer',
|
||||
{
|
||||
type: 'component',
|
||||
icon: List,
|
||||
component: ModListPanel,
|
||||
text: '模块',
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
::: tip
|
||||
icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/icon.html)
|
||||
|
||||
也可直接使用url，例如
|
||||
```js
|
||||
{
|
||||
icon: 'https://vfiles.gtimg.cn/vupload/20220614/9cc3091655207317835.png'
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### menu
|
||||
|
||||
- **类型：** [MenuBarData](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/type.ts)
|
||||
|
||||
- **默认值：** { left: [], center: [], right: [] }
|
||||
|
||||
- **详情：**
|
||||
|
||||
顶部工具栏
|
||||
|
||||
系统提供了几个常用功能： '/' | 'delete' | 'undo' | 'redo' | 'zoom-in' | 'zoom-out' | 'zoom'
|
||||
|
||||
'/': 分隔符
|
||||
|
||||
'delete': 删除按钮
|
||||
|
||||
'undo': 撤销按钮
|
||||
|
||||
'redo': 恢复按钮
|
||||
|
||||
'zoom-in': 放大按钮
|
||||
|
||||
'zoom-out': 缩小按钮
|
||||
|
||||
'zoom': 缩放
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { toRaw } from 'vue';
|
||||
import { ArrowLeft, Coin } from '@element-plus/icons-vue';
|
||||
|
||||
{
|
||||
left: [
|
||||
{
|
||||
type: 'button',
|
||||
icon: ArrowLeft,
|
||||
tooltip: '返回',
|
||||
},
|
||||
'/',
|
||||
{
|
||||
type: 'text',
|
||||
text: '.temp',
|
||||
},
|
||||
],
|
||||
center: ['delete', 'undo', 'redo', 'zoom'],
|
||||
right: [
|
||||
{
|
||||
type: 'button',
|
||||
text: '保存',
|
||||
icon: Coin,
|
||||
disabled: true,
|
||||
handler: ({ editorService }) => console.log(toRaw(editorService.get('root'))),
|
||||
},
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
::: tip
|
||||
icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/icon.html)
|
||||
|
||||
也可直接使用url，例如
|
||||
```js
|
||||
{
|
||||
icon: 'https://vfiles.gtimg.cn/vupload/20220614/9cc3091655207317835.png'
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### render
|
||||
|
||||
- **类型：** Function
|
||||
|
||||
- **默认值：** undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
中间工作区域中画布渲染的内容，通常是通过解析[modelValue](#modelValue)来渲染出DOM，return的DOM结构需要有一个根节点。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
(renderer) => renderer.contentWindow.document.createElement('div')
|
||||
```
|
||||
|
||||
### runtimeUrl
|
||||
|
||||
- **类型：** string
|
||||
|
||||
- **默认值：** undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径
|
||||
|
||||
### propsConfigs
|
||||
|
||||
- **类型：** { [type: string]: [FormConfig](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) }
|
||||
|
||||
- **默认值：** {}
|
||||
|
||||
- **详情：**
|
||||
|
||||
组件的属性配置表单的dsl
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
{
|
||||
text: [
|
||||
{
|
||||
name: 'text',
|
||||
text: '文本',
|
||||
},
|
||||
{
|
||||
name: 'multiple',
|
||||
text: '多行文本',
|
||||
type: 'switch',
|
||||
},
|
||||
],
|
||||
button: [
|
||||
{
|
||||
name: 'text',
|
||||
text: '文本',
|
||||
},
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### propsValues
|
||||
|
||||
- **类型：** { [type: string]: Object }
|
||||
|
||||
- **默认值：** {}
|
||||
|
||||
- **详情：**
|
||||
|
||||
添加组件时的默认值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
{
|
||||
text: {
|
||||
text: '文本',
|
||||
multiple: true,
|
||||
},
|
||||
button: {
|
||||
text: '按钮',
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### moveableOptions
|
||||
|
||||
- **类型：** ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions) | [MoveableOptions](https://daybrush.com/moveable/release/latest/doc/)
|
||||
|
||||
- **默认值：** {}
|
||||
|
||||
- **详情：**
|
||||
|
||||
画布中的选中框配置选项，使用的是[moveable](https://github.com/daybrush/moveable)第三方库
|
||||
|
||||
### stageRect
|
||||
|
||||
- **类型：** { width: number; height: number }
|
||||
|
||||
- **默认值：** { width: 375, height: 817 }
|
||||
|
||||
- **详情：**
|
||||
|
||||
画布的大小配置
|
||||
|
||||
### autoScrollIntoView
|
||||
|
||||
- **类型：** boolean
|
||||
|
||||
- **默认值：** undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
选中组件时，是否自动滚动该组件到可视区域
|
||||
|
||||
### updateDragEl
|
||||
|
||||
- **类型：** (el: HTMLDivElement, target: HTMLElement) => void;
|
||||
|
||||
- **默认值：** undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
当选中框与组件不贴合时，可以通过此方法进行调整
|
||||
|
||||
### isContainer
|
||||
|
||||
- **类型：** (el: HTMLDivElement) => boolean | Promise\<boolean\>;
|
||||
|
||||
- **默认值：** (el: HTMLElement) => el.classList.contains('magic-ui-container')
|
||||
|
||||
- **详情：**
|
||||
|
||||
当组件拖动过程中停留在画布上超过 [containerHighlightDuration](#containerHighlightDuration) 时长时，识别当前是否有容器
|
||||
|
||||
### containerHighlightDuration
|
||||
|
||||
- **类型：** number;
|
||||
|
||||
- **默认值：** 800（单位为ms）
|
||||
|
||||
- **详情：**
|
||||
|
||||
当组件拖动过程中停留在画布上超过 [containerHighlightDuration](#containerHighlightDuration) 时长时，识别当前是否有容器
|
||||
|
||||
### containerHighlightClassName
|
||||
|
||||
- **类型：** string;
|
||||
|
||||
- **默认值：** 'tmagic-stage-container-highlight'
|
||||
|
||||
- **详情：**
|
||||
|
||||
识别到容器后，会给其dom上添加的class
|
||||
|
||||
### containerHighlightType
|
||||
|
||||
- **类型：** 'default' | 'alt' | '';
|
||||
|
||||
- **默认值：** 'default'
|
||||
|
||||
- **详情：**
|
||||
|
||||
启动方式
|
||||
|
||||
default: 停留在画布上启动识别
|
||||
|
||||
alt: 按住alt键启动识别
|
||||
|
||||
其他值：不启动
|
||||
|
||||
|
||||
## slots
|
||||
|
||||
### nav
|
||||
|
||||
- **详情：** 工具栏
|
||||
|
||||
### sidebar
|
||||
|
||||
- **详情：** 左侧栏
|
||||
|
||||
### workspace
|
||||
|
||||
- **详情：** 中间工作区域
|
||||
|
||||
### workspace-content
|
||||
|
||||
- **详情：** 中间工作区域内部
|
||||
|
||||
:::tip
|
||||
在没有 workspace slots 的时候才可以用
|
||||
:::
|
||||
|
||||
### propsPanel
|
||||
|
||||
- **详情：** 属性面板
|
||||
@ -1,618 +0,0 @@
|
||||
# Services
|
||||
|
||||
## editorService
|
||||
|
||||
### set
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{'root' | 'page' | 'parent' | 'node'} name`
|
||||
- `{MNode} value`
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)}
|
||||
|
||||
- **用法：**
|
||||
|
||||
设置当前指点节点配置
|
||||
|
||||
'root': 当前整个配置，也就是当前编辑器的值
|
||||
|
||||
'page': 当前正在编辑的页面配置
|
||||
|
||||
'parent': 当前选中的节点的父节点
|
||||
|
||||
'node': 当前选中的节点
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const node = editorService.get('node');
|
||||
|
||||
node.name = 'new name';
|
||||
|
||||
editorService.set('node', node);
|
||||
|
||||
```
|
||||
|
||||
### get
|
||||
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{'root' | 'page' | 'parent' | 'node' | 'stage' | 'highlightNode' | 'pageLength'} name`
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)}
|
||||
|
||||
- **用法：**
|
||||
|
||||
获取当前指点节点配置
|
||||
|
||||
'root': 当前整个配置，也就是当前编辑器的值
|
||||
|
||||
'page': 当前正在编辑的页面配置
|
||||
|
||||
'parent': 当前选中的节点的父节点
|
||||
|
||||
'node': 当前选中的节点
|
||||
|
||||
'stage': [StageCore](../../api/stage/core.md)实例
|
||||
|
||||
'highlightNode': 当前高亮的Dom
|
||||
|
||||
'modifiedNodeIds': 当前已修改未保存的组件id
|
||||
|
||||
'pageLength': 当前的页面数量
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { toRaw } from 'vue';
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const node = editorService.get('node');
|
||||
|
||||
console.log(toRaw(node));
|
||||
```
|
||||
|
||||
### getNodeInfo
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number | string}` id
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[EditorNodeInfo](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/type.ts)}
|
||||
|
||||
- **用法：**
|
||||
|
||||
根据id获取组件、组件的父组件以及组件所属的页面节点
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { toRaw } from 'vue';
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const info = editorService.getNodeInfo('text_123');
|
||||
|
||||
console.log(toRaw(info.node));
|
||||
console.log(toRaw(info.parent));
|
||||
console.log(toRaw(info.page));
|
||||
```
|
||||
|
||||
### getNodeById
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number | string}` id
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)} 组件节点配置
|
||||
|
||||
- **用法：**
|
||||
|
||||
根据id获取组件的信息
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { toRaw } from 'vue';
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const node = editorService.getNodeById('text_123');
|
||||
|
||||
console.log(toRaw(node));
|
||||
```
|
||||
|
||||
### getParentById
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number | string}` id
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)} 指点组件的父节点配置
|
||||
|
||||
- **用法：**
|
||||
|
||||
根据ID获取指点节点的父节点配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { toRaw } from 'vue';
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const parent = editorService.getParentById('text_123');
|
||||
|
||||
console.log(toRaw(parent));
|
||||
```
|
||||
|
||||
|
||||
### select
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number | string | MNode}` config
|
||||
|
||||
- **返回：**
|
||||
|
||||
当前选中的节点配置
|
||||
|
||||
- **用法：**
|
||||
|
||||
选中指点节点（将指点节点设置成当前选中状态）
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
editorService.select('text_123');
|
||||
```
|
||||
|
||||
### add
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[AddMNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/type.ts)} param0 将要添加的组件节点配置
|
||||
- {[MContainer](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts) | null} parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
|
||||
|
||||
- **返回：**
|
||||
|
||||
添加后的节点
|
||||
|
||||
- **用法：**
|
||||
|
||||
向指点容器添加组件节点
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
editorService.add({
|
||||
type: 'text',
|
||||
// ...
|
||||
});
|
||||
|
||||
const parent = editorService.getParentById('text_123');
|
||||
|
||||
editorService.add({
|
||||
type: 'text',
|
||||
// ...
|
||||
}, parent);
|
||||
```
|
||||
|
||||
### remove
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)} node
|
||||
|
||||
- **返回：**
|
||||
|
||||
删除的组件配置
|
||||
|
||||
- **用法：**
|
||||
|
||||
删除组件
|
||||
|
||||
- **示例：**
|
||||
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const node = editorService.get('node');
|
||||
editorService.remove(node);
|
||||
```
|
||||
|
||||
- ### update
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)} config
|
||||
|
||||
- **返回：**
|
||||
|
||||
更新后的节点配置
|
||||
|
||||
- **用法：**
|
||||
|
||||
更新节点
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const node = editorService.get('node');
|
||||
node.name = 'new name';
|
||||
editorService.update(node);
|
||||
```
|
||||
|
||||
- ### sort
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number | string}` id1
|
||||
- `{number | string}` id2
|
||||
|
||||
- **用法：**
|
||||
|
||||
将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -> sort(1,3) -> [2,1,3,4]
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const parent = editorService.get('parent');
|
||||
editorService.update(parent[0].id, parent[3].id);
|
||||
```
|
||||
|
||||
- ### copy
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)} config
|
||||
|
||||
- **用法：**
|
||||
|
||||
将组将节点配置转化成string，然后存储到localStorage中
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const node = editorService.get('node');
|
||||
editorService.copy(node);
|
||||
```
|
||||
|
||||
- ### paste
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{Position}` position 可选，如果设置，指定组件位置
|
||||
|
||||
- **返回：**
|
||||
|
||||
添加后的组件节点配置
|
||||
|
||||
- **用法：**
|
||||
|
||||
从localStorage中获取节点，然后添加到当前容器中
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
editorService.paste({ left: 0, top: 0 });`
|
||||
```
|
||||
|
||||
- ### alignCenter
|
||||
|
||||
- **参数：**
|
||||
|
||||
{[MNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)} config
|
||||
|
||||
- **返回：**
|
||||
|
||||
当前组件节点配置
|
||||
|
||||
- **用法：**
|
||||
|
||||
将指点节点设置居中
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const node = editorService.get('node');
|
||||
editorService.alignCenter(node);
|
||||
```
|
||||
|
||||
- ### moveLayer
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number | 'top' | 'bottom'` offset
|
||||
|
||||
- **用法：**
|
||||
|
||||
移动当前选中节点位置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
editorService.moveLayer('top'); // 置底
|
||||
editorService.moveLayer('bottom'); // 置顶
|
||||
editorService.moveLayer(1); // 上移一层
|
||||
editorService.moveLayer(-1); // 下移一层
|
||||
```
|
||||
|
||||
- ### undo
|
||||
|
||||
- **返回：**
|
||||
|
||||
上一次数据
|
||||
|
||||
- **用法：**
|
||||
|
||||
撤销当前操作
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
editorService.undo();
|
||||
```
|
||||
|
||||
- ### redo
|
||||
|
||||
- **返回：**
|
||||
|
||||
下一步数据
|
||||
|
||||
- **用法：**
|
||||
|
||||
恢复到下一步
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
editorService.redo();
|
||||
```
|
||||
|
||||
- ### move
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number}` left
|
||||
- `{number}` top
|
||||
|
||||
|
||||
- **用法：**
|
||||
|
||||
绝对定位布局下，移动组件位置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
editorService.move(1, 1);
|
||||
```
|
||||
|
||||
### usePlugin
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{Record<string, Function>` options
|
||||
|
||||
|
||||
- **用法：**
|
||||
扩展editorService中的方法（'select', 'add', 'remove', 'update', 'sort', 'copy', 'paste', 'center', 'moveLayer', 'undo', 'redo'）
|
||||
|
||||
对于每一个方法，都可以为其添加before/after两个扩展方法，分别在该方法运行前与运行后调用
|
||||
|
||||
调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after最后一个个参数则是原方法的return值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
editorService.usePlugin({
|
||||
beforeAdd(value) {
|
||||
console.log(value); // { type: 'text' }
|
||||
console.log('before add');
|
||||
return [{
|
||||
type: 'button',
|
||||
}];
|
||||
},
|
||||
afterAdd(value, result) {
|
||||
console.log(value) // { type: 'button' }
|
||||
console.log('after add');
|
||||
},
|
||||
});
|
||||
|
||||
const node = await editorService.add({
|
||||
type: 'text';
|
||||
});
|
||||
|
||||
console.log(node); // { type: 'button' }
|
||||
|
||||
// console 输出如下：
|
||||
// { type: 'text' }
|
||||
// before add
|
||||
// add
|
||||
// { type: 'button' }
|
||||
// after add
|
||||
// { type: 'button' }
|
||||
```
|
||||
|
||||
### use
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{Record<string, Function>` options
|
||||
|
||||
|
||||
- **用法：**
|
||||
使用中间的方式扩展editorService中的方法（'select', 'add', 'remove', 'update', 'sort', 'copy', 'paste', 'center', 'moveLayer', 'undo', 'redo'）
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
editorService.use({
|
||||
add(value, next) {
|
||||
console.log('before');
|
||||
next();
|
||||
console.log('after')
|
||||
},
|
||||
});
|
||||
|
||||
editorService.add({
|
||||
type: 'text';
|
||||
});
|
||||
|
||||
// console 输出如下：
|
||||
// before
|
||||
// add
|
||||
// after
|
||||
```
|
||||
|
||||
|
||||
:::tip
|
||||
可以多次为同一个方法添加扩展，运行时会根据添加的顺序依次调用
|
||||
:::
|
||||
|
||||
## propsService
|
||||
|
||||
### setPropsConfig
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
- [FormConfig](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) config 组件属性表单配置
|
||||
|
||||
- **用法：**
|
||||
|
||||
为指定类型组件设置组件属性表单配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { propsService } from '@tmagic/editor';
|
||||
|
||||
propsService.setPropsConfig('text', [
|
||||
{
|
||||
name: 'text',
|
||||
text: '文本',
|
||||
},
|
||||
{
|
||||
name: 'multiple',
|
||||
text: '多行文本',
|
||||
type: 'switch',
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
### getPropsConfig
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
组件属性表单配置
|
||||
|
||||
- **用法：**
|
||||
|
||||
获取指点类型的组件属性表单配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { propsService } from '@tmagic/editor';
|
||||
|
||||
propsService.getPropsConfig('text');
|
||||
```
|
||||
|
||||
### setPropsValue
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
- `{Object}` value 组件初始值
|
||||
|
||||
- **用法：**
|
||||
|
||||
为指点类型组件设置组件初始值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { propsService } from '@tmagic/editor';
|
||||
|
||||
propsService.setPropsValue('text', {
|
||||
text: '文本',
|
||||
multiple: true,
|
||||
});
|
||||
```
|
||||
|
||||
### getPropsValue
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
组件初始值
|
||||
|
||||
- **用法：**
|
||||
|
||||
获取指定类型的组件初始值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { propsService } from '@tmagic/editor';
|
||||
|
||||
propsService.getPropsValue('text');
|
||||
```
|
||||
|
||||
### usePlugin
|
||||
|
||||
扩展propsService中的方法（'setConfig', 'getConfig', 'setValue', 'getValue'）
|
||||
|
||||
参照[editorService.usePlugin](#useplugin)
|
||||
|
||||
### use
|
||||
|
||||
扩展propsService中的方法（'setConfig', 'getConfig', 'setValue', 'getValue'）
|
||||
|
||||
参照[editorService.use](#use)
|
||||
@ -1,200 +0,0 @@
|
||||
# Select 选择器
|
||||
|
||||
当选项过多时，使用下拉菜单展示并选择内容。
|
||||
|
||||
## 基础用法
|
||||
|
||||
适用广泛的基础单选
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'select',
|
||||
name: 'select',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 }
|
||||
]
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
type为'select'
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 有禁用选项
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'select',
|
||||
name: 'select',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2, disabled: true }
|
||||
]
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
在 opitons 选项配置中，设定 disabled 值为 true，即可禁用该选项
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 禁用状态
|
||||
|
||||
选择器不可用状态
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'select',
|
||||
name: 'select',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
disabled: true,
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 }
|
||||
]
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
为 el-select 设置 disabled 属性，则整个选择器不可用
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 基础多选
|
||||
|
||||
适用性较广的基础多选，用 Tag 展示已选项
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'select',
|
||||
name: 'select',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
multiple: true,
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 },
|
||||
{ text: '选项3', value: 3 }
|
||||
]
|
||||
}]"></demo-block>
|
||||
|
||||
## 分组
|
||||
|
||||
备选项进行分组展示
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'select',
|
||||
name: 'select',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
group: true,
|
||||
options: [
|
||||
{
|
||||
label: 'group1',
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 },
|
||||
{ text: '选项3', value: 3 }
|
||||
],
|
||||
disabled: true
|
||||
}, {
|
||||
label: 'group2',
|
||||
options: [
|
||||
{ text: '选项4', value: 4 },
|
||||
{ text: '选项5', value: 5 },
|
||||
{ text: '选项6', value: 6 }
|
||||
]
|
||||
}
|
||||
]
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
配置group为true
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 创建条目
|
||||
|
||||
可以创建并选中选项中不存在的条目
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'select',
|
||||
name: 'select',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
allowCreate: true,
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 }
|
||||
]
|
||||
}]"></demo-block>
|
||||
|
||||
## 远程选项
|
||||
|
||||
通过接口请求获取选项列表
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'select',
|
||||
name: 'select',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
remote: true,
|
||||
option: {
|
||||
url: 'select/remote',
|
||||
root: 'data',
|
||||
method: 'post',
|
||||
mode: 'cors',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: { query: '' },
|
||||
json: true,
|
||||
text: option => `${option.name}`,
|
||||
value: option => `${option.id}`,
|
||||
}
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
配置remote为true，然后配置option，而不是options
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
:::tip
|
||||
如果 Select 的绑定值为对象类型，请务必指定 valueKey 作为它的唯一性标识。
|
||||
:::
|
||||
|
||||
## Select Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| multiple | 是否多选 | boolean | — | false |
|
||||
| valueKey | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |
|
||||
| allowCreate | 是否允许用户创建新条目 | boolean | — | false |
|
||||
| remote | 是否为远程搜索 | boolean | — | false |
|
||||
| group | 是否选择分组 | boolean | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler ](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
| options | 选项 | Array | — | - |
|
||||
| option | 选项 | Object | — | - |
|
||||
|
||||
## options item
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| text | | 选项的标签 | string/number/object | — | — |
|
||||
| value | 选项的值 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| label | string | — | — | — |
|
||||
| options | Array | — | — | — |
|
||||
|
||||
## option
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| url | string | — | — | — |
|
||||
| root | string | — | — | — |
|
||||
| text | string / Function | — | — | — |
|
||||
| value | string / Function | — | — | — |
|
||||
@ -1,163 +0,0 @@
|
||||
# m-form
|
||||
|
||||
## props
|
||||
|
||||
### initValues
|
||||
|
||||
- **类型：** Object
|
||||
|
||||
- **默认值：** {}
|
||||
|
||||
- **详情：**
|
||||
|
||||
表单初始化值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
{
|
||||
text: 'text',
|
||||
multiple: true,
|
||||
}
|
||||
```
|
||||
|
||||
:::tip
|
||||
initValues应该是与config一一对应的，如果initValues中的key没有出现在config的name中，那么这个值将被丢掉
|
||||
:::
|
||||
|
||||
### config
|
||||
|
||||
- **类型：** [FormConfig](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)
|
||||
|
||||
- **默认值：** []
|
||||
|
||||
- **详情：**
|
||||
|
||||
表单配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
name: 'text',
|
||||
text: '文本',
|
||||
},
|
||||
{
|
||||
name: 'multiple',
|
||||
text: '多行文本',
|
||||
type: 'switch',
|
||||
},
|
||||
]
|
||||
```
|
||||
|
||||
### labelWidth
|
||||
|
||||
- **类型：** string | number
|
||||
|
||||
- **默认值：** '200px'
|
||||
|
||||
- **详情：**
|
||||
|
||||
表单域标签的宽度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 支持 auto
|
||||
|
||||
### disabled
|
||||
|
||||
- **类型：** boolean
|
||||
|
||||
- **默认值：** false
|
||||
|
||||
- **详情：**
|
||||
|
||||
是否禁用该表单内的所有组件。 若设置为 true，则表单内组件上的 disabled 属性不再生效
|
||||
|
||||
- **示例：**
|
||||
|
||||
### height
|
||||
|
||||
- **类型：** string
|
||||
|
||||
- **默认值：** 'auto'
|
||||
|
||||
- **详情：**
|
||||
|
||||
表单高度
|
||||
|
||||
### stepActive
|
||||
|
||||
- **类型：** string | number
|
||||
|
||||
- **默认值：** 1
|
||||
|
||||
- **详情：**
|
||||
|
||||
使用了 step 组件时，默认的选中的步骤数
|
||||
|
||||
### size
|
||||
|
||||
- **类型：** 'medium' | 'small' | 'mini'
|
||||
|
||||
- **默认值：** 'small'
|
||||
|
||||
- **详情：**
|
||||
|
||||
用于控制该表单内组件的尺寸
|
||||
|
||||
### inline
|
||||
|
||||
- **类型：** boolean
|
||||
|
||||
- **默认值：** false
|
||||
|
||||
- **详情：**
|
||||
|
||||
行内表单模式
|
||||
|
||||
### labelPosition
|
||||
|
||||
- **类型：** 'right' | 'left' | 'top'
|
||||
|
||||
- **默认值：** 'right'
|
||||
|
||||
- **详情：**
|
||||
|
||||
表单域标签的位置， 如果值为 left 或者 right 时，则需要设置 label-width
|
||||
|
||||
### keyProp
|
||||
|
||||
- **类型：** string
|
||||
|
||||
- **默认值：** '__key'
|
||||
|
||||
- **详情：**
|
||||
|
||||
作为表单项的组件实例的key
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
name: 'text',
|
||||
type: 'text',
|
||||
text: '文本',
|
||||
__key: 123,
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## instance methods
|
||||
|
||||
### submitForm
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{boolean}` native
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Object}` 整个表单的值
|
||||
|
||||
- **用法：**
|
||||
|
||||
提交表单，获取表单的值
|
||||
@ -1,286 +0,0 @@
|
||||
# StageCore
|
||||
|
||||
## 配置
|
||||
|
||||
### canSelect
|
||||
|
||||
- **类型：** Function
|
||||
|
||||
- **默认值：** (el: HTMLElement) => !!el.id
|
||||
|
||||
- **详情：**
|
||||
|
||||
判断Dom节点是否能被选中
|
||||
|
||||
### moveableOptions
|
||||
|
||||
- **类型：** (el: HTMLElement) => boolean
|
||||
|
||||
- **默认值：** (el: HTMLElement) => !!el.id
|
||||
|
||||
- **详情：**
|
||||
|
||||
选中框配置选项，使用的是[moveable](https://github.com/daybrush/moveable)第三方库
|
||||
|
||||
### runtimeUrl
|
||||
|
||||
- **类型：** string
|
||||
|
||||
- **默认值：** undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径
|
||||
|
||||
### render
|
||||
|
||||
- **类型：** (renderer: StageCore) => Promise\<HTMLElement\> | HTMLElement
|
||||
|
||||
- **默认值：** undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
画布渲染的内容，通常是通过解析[modelValue](#modelValue)来渲染出DOM，return的DOM结构需要有一个根节点。
|
||||
|
||||
### autoScrollIntoView
|
||||
|
||||
- **类型：** boolean
|
||||
|
||||
- **默认值：** undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
选中组件时，是否自动滚动该组件到可视区域
|
||||
|
||||
|
||||
### updateDragEl
|
||||
|
||||
- **类型：** (el: HTMLDivElement, target: HTMLElement) => void;
|
||||
|
||||
- **默认值：** undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
当选中框与组件不贴合时，可以通过此方法进行调整
|
||||
|
||||
|
||||
## 属性
|
||||
|
||||
### selectedDom
|
||||
|
||||
- **类型：** Element | undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
当前选中的Dom
|
||||
|
||||
### highlightedDom
|
||||
|
||||
- **类型：** Element | undefined
|
||||
|
||||
- **详情：**
|
||||
|
||||
当前高亮的Dom
|
||||
|
||||
### renderer
|
||||
|
||||
- **类型：** [StageRender](./render.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
StageRender实例
|
||||
|
||||
### mask
|
||||
|
||||
- **类型：** [StageMask](./mask.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
StageMask实例
|
||||
|
||||
|
||||
### dr
|
||||
|
||||
- **类型：** [StageDragResize](./drag-resize.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
StageDragResize实例
|
||||
|
||||
### config
|
||||
|
||||
- **类型：** Object
|
||||
|
||||
- **详情：**
|
||||
|
||||
初始化配置
|
||||
|
||||
### container
|
||||
|
||||
- **类型：** HTMLDivElement
|
||||
|
||||
- **详情：**
|
||||
|
||||
画布根节点
|
||||
|
||||
## 方法
|
||||
|
||||
### mount
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{HTMLDivElement} el` 将stage挂载到该Dom节点上
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
挂载Dom节点
|
||||
|
||||
### clearGuides
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
清空所有参考线
|
||||
|
||||
### destroy
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
销毁实例
|
||||
|
||||
|
||||
### getElementFromPoint
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{MouseEvent} event`
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
|
||||
### select
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{Id | HTMLElement} idOrEl` 组件Dom节点的id属性，或者Dom节点
|
||||
- `{MouseEvent} MouseEvent`
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
选中组件
|
||||
|
||||
### update
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{UpdateData} data` 更新的数据
|
||||
|
||||
```ts
|
||||
interface UpdateData {
|
||||
config: MNode;
|
||||
root: MApp;
|
||||
}
|
||||
```
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
更新选中的节点
|
||||
|
||||
### highlight
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{HTMLElement | Id} idOrEl` 组件Dom节点的id属性，或者Dom节点
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
高亮选中组件
|
||||
|
||||
### sortNode
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{SortEventData} data`
|
||||
|
||||
```ts
|
||||
interface SortEventData {
|
||||
src: Id;
|
||||
dist: Id;
|
||||
root?: MApp;
|
||||
}
|
||||
```
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
### add
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{UpdateData} data`
|
||||
|
||||
|
||||
```ts
|
||||
interface UpdateData {
|
||||
config: MNode;
|
||||
root: MApp;
|
||||
}
|
||||
```
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
### remove
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{UpdateData} data`
|
||||
|
||||
|
||||
```ts
|
||||
interface UpdateData {
|
||||
config: MNode;
|
||||
root: MApp;
|
||||
}
|
||||
```
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
### setZoom
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number} zoom`
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
@ -1,182 +0,0 @@
|
||||
# StageDragResize
|
||||
|
||||
## 配置
|
||||
|
||||
### core
|
||||
|
||||
- **类型：** [StageCore](./core.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
StageCore实例
|
||||
|
||||
### container
|
||||
|
||||
- **类型：** HTMLElement
|
||||
|
||||
- **详情：**
|
||||
|
||||
选中框容器
|
||||
|
||||
## 属性
|
||||
|
||||
### core
|
||||
|
||||
- **类型：** [StageCore](./core.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
### container
|
||||
|
||||
- **类型：** HTMLElement
|
||||
|
||||
- **详情：**
|
||||
|
||||
选中框容器
|
||||
|
||||
### target
|
||||
|
||||
- **类型：** HTMLElement
|
||||
|
||||
- **详情：**
|
||||
|
||||
目标节点
|
||||
|
||||
### dragEl
|
||||
|
||||
- **类型：** HTMLElement
|
||||
|
||||
- **详情：**
|
||||
|
||||
目标节点在蒙层中的占位节点
|
||||
|
||||
### moveable
|
||||
|
||||
- **类型：** [moveable](https://github.com/daybrush/moveable)
|
||||
|
||||
- **详情：**
|
||||
|
||||
moveable实例
|
||||
|
||||
### horizontalGuidelines
|
||||
|
||||
- **类型：** number[]
|
||||
|
||||
- **详情：**
|
||||
|
||||
水平参考线
|
||||
|
||||
### verticalGuidelines
|
||||
|
||||
- **类型：** number[]
|
||||
|
||||
- **详情：**
|
||||
|
||||
垂直参考线
|
||||
|
||||
### elementGuidelines
|
||||
|
||||
- **类型：** HTMLElement[]
|
||||
|
||||
- **详情：**
|
||||
|
||||
对齐元素集合
|
||||
|
||||
### mode
|
||||
|
||||
- **类型：** Mode
|
||||
|
||||
```ts
|
||||
enum Mode {
|
||||
/** 绝对定位布局 */
|
||||
ABSOLUTE = 'absolute',
|
||||
/** 固定定位布局 */
|
||||
FIXED = 'fixed',
|
||||
/** 流式布局 */
|
||||
SORTABLE = 'sortable',
|
||||
}
|
||||
```
|
||||
|
||||
- **详情：**
|
||||
|
||||
布局方式：流式布局、绝对定位、固定定位
|
||||
|
||||
## 方法
|
||||
|
||||
|
||||
### select
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{HTMLElement} el` 组件Dom节点
|
||||
- `{MouseEvent} MouseEvent`
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
将选中框渲染并覆盖到选中的组件Dom节点上方
|
||||
|
||||
当选中的节点是不是absolute时，会创建一个新的节点出来作为拖拽目标
|
||||
|
||||
### updateMoveable
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{HTMLElement} el` 组件Dom节点
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
初始化选中框并渲染出来
|
||||
|
||||
### setGuidelines
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{GuidesType} type` 参考线类型
|
||||
- `{number[]} guidelines` 参考线偏移值
|
||||
|
||||
```ts
|
||||
/** 参考线类型 */
|
||||
export enum GuidesType {
|
||||
/** 水平 */
|
||||
HORIZONTAL = 'horizontal',
|
||||
/** 垂直 */
|
||||
VERTICAL = 'vertical',
|
||||
}
|
||||
```
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
设置参考线
|
||||
|
||||
### clearGuides
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
情况参考线
|
||||
|
||||
### destroy
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
销毁实例
|
||||
|
||||
@ -1,173 +0,0 @@
|
||||
# StageMask
|
||||
|
||||
## 配置
|
||||
|
||||
### core
|
||||
|
||||
- **类型：** [StageCore](./core.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
StageCore实例
|
||||
|
||||
## 属性
|
||||
|
||||
### content
|
||||
|
||||
- **类型：** HTMLDivElement
|
||||
|
||||
- **详情：**
|
||||
|
||||
蒙层的Dom节点
|
||||
|
||||
### wrapper
|
||||
|
||||
- **类型：** HTMLDivElement
|
||||
|
||||
- **详情：**
|
||||
|
||||
蒙层的容器Dom节点，用于实现滚动
|
||||
|
||||
### core
|
||||
|
||||
- **类型：** [StageCore](./core.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
StageCore实例
|
||||
|
||||
### page
|
||||
|
||||
- **类型：** HTMLElement | null
|
||||
|
||||
- **详情：**
|
||||
|
||||
当前页面组件Dom节点
|
||||
|
||||
### pageScrollParent
|
||||
|
||||
- **类型：** HTMLElement | null
|
||||
|
||||
- **详情：**
|
||||
|
||||
页面组件的滚动父节点
|
||||
|
||||
### scrollTop
|
||||
|
||||
- **类型：** number
|
||||
|
||||
- **详情：**
|
||||
|
||||
垂直滚动位移
|
||||
|
||||
### scrollLeft
|
||||
|
||||
- **类型：** number
|
||||
|
||||
- **详情：**
|
||||
|
||||
水平滚动位移
|
||||
|
||||
### width
|
||||
|
||||
- **类型：** number
|
||||
|
||||
- **详情：**
|
||||
|
||||
蒙层宽度，不应该手动设置，会自动同步[page](#page)
|
||||
|
||||
### height
|
||||
|
||||
- **类型：** number
|
||||
|
||||
- **详情：**
|
||||
|
||||
蒙层高度，不应该手动设置，会自动同步[page](#page)
|
||||
|
||||
### wrapperHeight
|
||||
|
||||
- **类型：** number
|
||||
|
||||
- **详情：**
|
||||
|
||||
蒙层容器高度
|
||||
|
||||
### wrapperWidth
|
||||
|
||||
- **类型：** number
|
||||
|
||||
- **详情：**
|
||||
|
||||
蒙层容器宽度
|
||||
|
||||
### maxScrollTop
|
||||
|
||||
- **类型：** number
|
||||
|
||||
- **详情：**
|
||||
|
||||
最大垂直滚动位移
|
||||
|
||||
### maxScrollLeft
|
||||
|
||||
- **类型：** number
|
||||
|
||||
- **详情：**
|
||||
|
||||
最大水平滚动位移
|
||||
|
||||
## 方法
|
||||
|
||||
### mount
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{HTMLDivElement} el` 将蒙层挂载到该Dom节点上
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
挂载Dom节点
|
||||
|
||||
### scrollIntoView
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{Element} el` 需要滚动的节点
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
将指定节点滚动到可视区域
|
||||
|
||||
### destroy
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
销毁实例
|
||||
|
||||
### setLayout
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{Element} el`
|
||||
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
根据节点设置模式，固定模式wrap与content宽高保持一直
|
||||
|
||||
@ -1,110 +0,0 @@
|
||||
# StageRender
|
||||
|
||||
## 配置
|
||||
|
||||
### core
|
||||
|
||||
- **类型：** [StageCore](./core.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
StageCore实例
|
||||
|
||||
## 属性
|
||||
|
||||
### core
|
||||
|
||||
- **类型：** [StageCore](./core.md)
|
||||
|
||||
- **详情：**
|
||||
|
||||
StageCore实例
|
||||
|
||||
### contentWindow
|
||||
|
||||
- **类型：** RuntimeWindow | null
|
||||
|
||||
```ts
|
||||
interface RuntimeWindow extends Window {
|
||||
magic: Magic;
|
||||
}
|
||||
|
||||
interface Magic {
|
||||
/** 当前页面的根节点变化时调用该方法，编辑器会同步该el和stage的大小，该方法由stage注入到iframe.contentWindow中 */
|
||||
onPageElUpdate: (el: HTMLElement) => void;
|
||||
|
||||
onRuntimeReady: (runtime: Runtime) => void;
|
||||
}
|
||||
```
|
||||
|
||||
- **详情：**
|
||||
|
||||
组件的js、css执行的环境，直接渲染为当前window，iframe渲染则为iframe.contentWindow
|
||||
|
||||
### runtime
|
||||
|
||||
- **类型：** Runtime | null
|
||||
|
||||
```ts
|
||||
interface Runtime {
|
||||
getApp?: () => Core;
|
||||
beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
|
||||
// 编辑器Dsl整个改变时调用
|
||||
updateRootConfig?: (config: MApp) => void;
|
||||
// 选择页面时调用
|
||||
updatePageId?: (id: Id) => void;
|
||||
// 选中组件时调用
|
||||
select?: (id: Id) => Promise<HTMLElement> | HTMLElement;
|
||||
// 添加组件时调用
|
||||
add?: (data: UpdateData) => void;
|
||||
// 更新组件时调用
|
||||
update?: (data: UpdateData) => void;
|
||||
// 流式布局下拖动组件后调用
|
||||
sortNode?: (data: SortEventData) => void;
|
||||
// 删除组件时调用
|
||||
remove?: (data: RemoveData) => void;
|
||||
}
|
||||
```
|
||||
|
||||
- **详情：**
|
||||
|
||||
用于编辑器与画布的交互
|
||||
|
||||
### iframe
|
||||
|
||||
- **类型：** HTMLIFrameElement
|
||||
|
||||
- **详情：**
|
||||
|
||||
### runtimeUrl
|
||||
|
||||
- **类型：** string
|
||||
|
||||
- **详情：**
|
||||
|
||||
## 方法
|
||||
|
||||
### destroy
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
销毁实例
|
||||
|
||||
### mount
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{HTMLDivElement} el` 将页面挂载到该Dom节点上
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **用法：**
|
||||
|
||||
挂载Dom节点
|
||||
|
||||
@ -1,45 +0,0 @@
|
||||
# 高级函数
|
||||
tmagic-editor的一个高级特性，就是支持开发者在不修改组件代码的情况下，对项目页面进行特定的修改，方式即支持开发者在线编码，让这份代码特定时机执行。
|
||||
|
||||
<img src="https://image.video.qpic.cn/oa_88b7d-37_1895524853_1636348113209218">
|
||||
|
||||
## @tmagic/core
|
||||
我们在 @tmagic/core 这个包中，实现了tmagic-editor组件节点的 Node 类，每个组件在tmagic-editor的运行环境被渲染前，都会对应初始化一个 Node 类实例。而这些 Node 实例上包含了一些基础功能，包括触发指定钩子函数。这是一个框架无关的核心库，所以支持在各个语言框架中使用。但是具体触发时机需要由各个框架的渲染器实现。
|
||||
|
||||
在 react 和 vue 两种框架下的执行时机，可以参考我们的 runtime 实现:
|
||||
|
||||
- [react runtime 执行钩子时机](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-react/src/useApp.ts)
|
||||
- [vue runtime 执行钩子时机](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui/src/useApp.ts)
|
||||
|
||||
## 函数编写
|
||||
在编辑中，即写入一个执行函数，tmagic-editor会在对应组件的指定声明周期中执行该函数。同时**传入当前组件的 Node 实例对象**，作为执行参数。
|
||||
|
||||
传入的实例对象，可以根据各语言框架实现的 ui 提供的特性能力，来支持业务组件的能力实现。这个功能提供给开发者自由实现黑科技的机会。
|
||||
|
||||
<img src="https://image.video.qpic.cn/oa_2a552e-0_934618672_1636348294258073">
|
||||
|
||||
### 函数参数
|
||||
在 Magic-Core 中，我们对执行钩子函数传入了对应的 [Node](https://github.com/Tencent/tmagic-editor/blob/master/packages/core/src/Node.ts) 实例对象。在 react 和 vue 中会稍有差异。差异在于 [Node](https://github.com/Tencent/tmagic-editor/blob/master/packages/core/src/Node.ts) 实例的 instance 属性。
|
||||
|
||||
- [Node 实例描述](https://github.com/Tencent/tmagic-editor/blob/master/packages/core/src/Node.ts)
|
||||
|
||||
### instance
|
||||
Magic-Core 会在监听到对应事件时，将 payload 赋值给 Node 实例的 instace 属性。
|
||||
|
||||
其中 instance 属性的值，即我们在上面描述的，各个框架的钩子执行时机时发送的 payload 数据，各个框架发送的 instance 数据依据框架而定。instance 上会挂载一个 $el 对象，是各个框架 runtime 实现后，在组件 mounted 时候会得到的 dom 引用实例。
|
||||
|
||||
在示例中可以找到对应的触发事件和监听事件的形式如下：
|
||||
|
||||
```javascript
|
||||
// runtime 中发送数据
|
||||
app.emit('created', instance)
|
||||
|
||||
// class Node
|
||||
this.once('created', (instance: any) => {
|
||||
this.instance = instance;
|
||||
});
|
||||
```
|
||||
|
||||
- [Node 类监听声明周期](https://github.com/Tencent/tmagic-editor/blob/master/packages/core/src/Node.ts)
|
||||
- [react runtime 执行钩子时机](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-react/src/useApp.ts)
|
||||
- [vue runtime 执行钩子时机](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui/src/useApp.ts)
|
||||
@ -1,142 +0,0 @@
|
||||
# 深入
|
||||
本章详细介绍如何深入理解tmagic-editor的打包，以及如何根据需求定制，修改tmagic-editor的页面打包发布方案。页面发布、打包相关的定制化开发，需要使用tmagic-editor的业务方，搭建好基于开源tmagic-editor的管理平台、存储服务等配套设施。
|
||||
|
||||
## 实现一个 runtime
|
||||
在 [@tmagic/ui](../guide/advanced/magic-ui.html) 部分，我们已经说过，runtime 和 UI 是配套实现的。每个版本的 runtime 都需要一个对应的 UI 来作为渲染器，实现渲染 DSL 呈现页面的功能。
|
||||
|
||||
### UI
|
||||
一个 UI 应该至少包含一个渲染器，来实现[页面渲染](../guide/advanced/page.html)。同时可以提供一些基础组件。具体实现可以参考[@tmagic/ui](../guide/advanced/magic-ui.html)。
|
||||
|
||||
### page
|
||||
runtime 的 `page` 部分，就是真实项目页面的渲染环境。发布出去的项目页都需要基于该部分来实现渲染功能。而 `page` 的主要逻辑，就是需要加载 UI，同时实现业务方需要的业务逻辑，比如：
|
||||
- 提供页面需要的全局 api
|
||||
- 业务需要的特殊实现逻辑
|
||||
- 加载第三方全局组件/插件等
|
||||
|
||||
具体的 page 实现示例，可以参考
|
||||
- [vue3 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue3/src/page)
|
||||
- [vue2 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue2/src/page)
|
||||
- [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react/src/page)
|
||||
|
||||
### playground
|
||||
runtime 的 `playground` 部分，和 `page` 做的事情几乎一致，业务方可以包含上述 `page` 所拥有的全部能力。但是，因为 playground 需要被编辑器加载，作为编辑器中页面模拟器的渲染容器，和编辑器通信，接受编辑器中组件的增删改查。所以，除了保持和 `page` 一样的渲染逻辑之外，`playground` 还要额外实现一套既定通信内容和 api，才能实现和编辑器的通信功能。
|
||||
|
||||
#### onRuntimeReady
|
||||
**在 playground 页面渲染后**，需要调用接口通知编辑器完成加载。该调用需要传入一个参数 API，即挂载了增删改查功能的对象示例，提供给编辑器。
|
||||
```javascript
|
||||
window.magic?.onRuntimeReady(API)
|
||||
```
|
||||
|
||||
#### onPageElUpdate
|
||||
**playground 在每次更新了页面配置后**，调用一次 onPageElUpdate 并传入一个 DOM 节点，该方法作用是传入一个页面渲染组件的根节点，用来告知编辑器的模拟器遮罩如何作出反应。
|
||||
```javascript
|
||||
window.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
|
||||
```
|
||||
|
||||
#### 提供 API
|
||||
| API | 说明 | 参数 |
|
||||
|---------- |-------- |---------- |
|
||||
|updateRootConfig| 根节点更新 | `root: MApp` |
|
||||
|updatePageId| 更新当前页面 id | `id: string` |
|
||||
|select| 选中组件 | `id: string`|
|
||||
|add| 增加组件 | { `config` , `root` }: `UpdateData` |
|
||||
|update| 更新组件 | { `config` , `root` }: `UpdateData` |
|
||||
|remove| 删除组件 | { `config` , `root` }: `UpdateData` |
|
||||
|sortNode| 组件在容器间排序 |{ `src` , `dist`, `root` }: `SortEventData` |
|
||||
|
||||
runtime 的实现示例，可以参考tmagic-editor提供的：
|
||||
- [vue3 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue3)
|
||||
- [vue2 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue2)
|
||||
- [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react)
|
||||
|
||||
## 打包原理
|
||||
在tmagic-editor的示例打包方案中，是基于 runtime 代码，以及 runtime 的打包配置进行的打包构建，将构建得到的产物发布，在tmagic-editor页面最终发布时，通过加载构建产物和 DSL 来实现页面渲染。
|
||||
|
||||
### 打包配置
|
||||
在 vite.config.ts 中有如下配置：
|
||||
```javascript
|
||||
export default {
|
||||
build: {
|
||||
sourcemap: true,
|
||||
minify: false,
|
||||
|
||||
rollupOptions: {
|
||||
input: {
|
||||
page: './page.html',
|
||||
playground: './playground.html',
|
||||
components: './src/comp-entry.ts',
|
||||
config: './src/config-entry.ts',
|
||||
value: './src/value-entry.ts',
|
||||
},
|
||||
output: {
|
||||
entryFileNames: 'assets/[name].js',
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
```
|
||||
打包时，即会生成对应的静态资源，我们在对应地方使用时，加载对应入口文件的打包产物即可。其中 page.html 和 playground.html 在示例项目中，而另外三个入口是在打包过程中动态生成的。
|
||||
|
||||
### 打包产物
|
||||
执行打包命令`npm run build`后，会在 runtime/src 中生成三个入口文件
|
||||
```
|
||||
comp-entry.ts
|
||||
config-entry.ts
|
||||
value-entry.ts
|
||||
```
|
||||
|
||||
这三个入口文件是基于 scripts/units.js 中描述的组件信息生成的，units.js 中的组件信息如何获取和生成，需要由使用tmagic-editor代码的业务方自行处理。更多关于tmagic-editor组件规范相关可以查阅[组件开发文档](../component/introduction.html)。示例的 units.js 文件中，组件描述是以组件在tmagic-editor中定义的 type 为 key，包名（或本地路径）为 value 的对象。
|
||||
|
||||
tmagic-editor的[打包脚本](../page/introduction.html#打包脚本)会根据这个组件声明，进行分析，生成上述三个入口文件：
|
||||
::: tip 生成步骤为
|
||||
1. 分析包结构，是否符合tmagic-editor组件规范
|
||||
2. 分析每个组件包内的 config value 和组件逻辑代码的入口
|
||||
3. 生成包含所有组件信息的三个入口文件
|
||||
:::
|
||||
|
||||
同时得到打包产物 dist 目录。包含了如下的主要文件:
|
||||
```
|
||||
|----dist
|
||||
|----assets
|
||||
| |----components.js
|
||||
| |----config.js
|
||||
| |----value.js
|
||||
|----page.html
|
||||
|----playground.html
|
||||
```
|
||||
|
||||
::: tip 各个文件作用说明
|
||||
- page.html 即真实项目页渲染时，用户加载的页面框架，tmagic-editor在发布时，会将项目页面所需的信息注入到 page.html 中，让用户加载了页面后，能拉取到对应的项目信息。
|
||||
- playground.html 是编辑器中模拟器使用的静态资源。tmagic-editor的模拟器使用 iframe 渲染，即加载了 playground.html，并注入编辑器中的配置信息，实现页面渲染。
|
||||
- component.js 是所有自定义组件的入口，在 runtime 中需要加载组件，交由渲染器渲染页面。
|
||||
- config.js 和 value.js 是编辑器中的各个组件的表单配置信息和表单初始值的入口，仅在编辑器中会被使用到。
|
||||
:::
|
||||
|
||||
|
||||
打开项目页面加载的产物资源：
|
||||
<img src="https://image.video.qpic.cn/oa_88b7d-36_1166112390_1633782654899174" width="100%" alt="tmagic-editor runtime page 示意图">
|
||||
|
||||
在编辑器中加载的产物资源：
|
||||
<img src="https://image.video.qpic.cn/oa_fd3c9c-2_217204702_1633782657315434" width="100%" alt="tmagic-editor runtime playground 示意图">
|
||||
|
||||
### 页面发布
|
||||
如介绍中提到的，tmagic-editor页面发布方案，是对构建产物 page.html 进行项目信息注入。项目信息就是搭建平台存储的页面配置。发布时，将注入项目信息的 page.html 发布出去即可。
|
||||
|
||||
## 版本管理
|
||||
基于上一步提到的打包原理，每次执行`npm run build`后，得到的产物都可以进行归档编号，存为版本。涉及到的组件改动和新增修改，体现在各个版本中。
|
||||
|
||||
<img src="https://image.video.qpic.cn/oa_88b7d-32_1233288257_1633783105283986" width="40%" alt="版本选择">
|
||||
|
||||
版本管理具体如何实现，这取决于使用tmagic-editor的业务方。版本管理具有如下优点：
|
||||
1. 对于已经配置好发布的项目，使用固定版本，不会被新版本的特性影响，保证项目线上稳定运行
|
||||
2. 发布的新版本如果出现问题，可以及时回退选择使用旧版本
|
||||
|
||||
## 结合业务定制
|
||||
tmagic-editor的静态资源构建，项目配置保存，页面发布，在tmagic-editor的提供的示例方案中，流程是：
|
||||
1. 触发构建，执行流水线，基于 runtime 执行 build
|
||||
2. 将构建产物归档推送至 cdn，存为一个ui版本
|
||||
3. 项目配保存后，项目发布时，将项目配置发布至 CDN 存储为 DSL.js，同时根据当前项目使用的ui版本，获取到 page.html，将 DSL.js 引用方式以 script 标签形式写入。
|
||||
4. 将注入信息的 page.html 发布为项目静态资源 act.html
|
||||
5. 线上可加载 act.html 访问项目
|
||||
|
||||
其中各个步骤的定制，可以交由业务方根据tmagic-editor提供的示例进行自定义修改。
|
||||
10
package.json
10
package.json
@ -19,8 +19,9 @@
|
||||
"build": "pnpm --filter \"@tmagic/*\" build",
|
||||
"build:runtime:admin": "pnpm --filter \"runtime-*\" build:admin",
|
||||
"build:playground": "pnpm --filter \"runtime-vue3\" build && pnpm --filter \"tmagic-playground\" build",
|
||||
"docs": "pnpm --filter \"docs\" dev",
|
||||
"build:docs": "pnpm --filter \"docs\" build",
|
||||
"docs:dev": "vitepress dev docs",
|
||||
"docs:serve": "vitepress serve docs",
|
||||
"docs:build": "vitepress build docs",
|
||||
"reinstall": "pnpm clean:all && pnpm bootstrap",
|
||||
"test": "vitest run",
|
||||
"coverage": "vitest run --coverage",
|
||||
@ -44,6 +45,7 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@algolia/client-search": ">= 4.9.1 < 6",
|
||||
"@babel/core": "^7.18.0",
|
||||
"@commitlint/cli": "^16.2.3",
|
||||
"@commitlint/config-conventional": "^16.2.1",
|
||||
@ -57,6 +59,7 @@
|
||||
"commitizen": "^4.2.4",
|
||||
"conventional-changelog-cli": "^2.2.2",
|
||||
"cz-conventional-changelog": "^3.3.0",
|
||||
"element-plus": "^2.2.19",
|
||||
"enquirer": "^2.3.6",
|
||||
"eslint": "^7.29.0",
|
||||
"eslint-config-tencent": "^1.0.1",
|
||||
@ -65,6 +68,7 @@
|
||||
"eslint-plugin-simple-import-sort": "^7.0.0",
|
||||
"eslint-plugin-vue": "^7.11.1",
|
||||
"execa": "^4.0.2",
|
||||
"highlight.js": "^11.7.0",
|
||||
"husky": "^7.0.0",
|
||||
"jsdom": "^19.0.0",
|
||||
"lint-staged": "^11.0.1",
|
||||
@ -73,9 +77,11 @@
|
||||
"recast": "^0.20.4",
|
||||
"rimraf": "^3.0.2",
|
||||
"semver": "^7.3.7",
|
||||
"serialize-javascript": "^6.0.0",
|
||||
"shx": "^0.3.4",
|
||||
"typescript": "^4.7.4",
|
||||
"vite": "^3.1.3",
|
||||
"vitepress": "1.0.0-alpha.29",
|
||||
"vitest": "^0.23.4",
|
||||
"vue": "^3.2.37"
|
||||
},
|
||||
|
||||
@ -69,7 +69,7 @@ import { defineComponent, onUnmounted, PropType, provide, reactive, toRaw, watch
|
||||
import { EventOption } from '@tmagic/core';
|
||||
import type { FormConfig } from '@tmagic/form';
|
||||
import type { MApp, MNode } from '@tmagic/schema';
|
||||
import {
|
||||
import StageCore, {
|
||||
CONTAINER_HIGHLIGHT_CLASS_NAME,
|
||||
ContainerHighlightType,
|
||||
CustomizeMoveableOptionsCallbackConfig,
|
||||
@ -122,25 +122,27 @@ export default defineComponent({
|
||||
type: Object as PropType<SideBarData>,
|
||||
},
|
||||
|
||||
layerContentMenu: {
|
||||
type: Array as PropType<(MenuButton | MenuComponent)[]>,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
stageContentMenu: {
|
||||
type: Array as PropType<(MenuButton | MenuComponent)[]>,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
/** 顶部工具栏配置 */
|
||||
menu: {
|
||||
type: Object as PropType<MenuBarData>,
|
||||
default: () => ({ left: [], right: [] }),
|
||||
},
|
||||
|
||||
/** 组件树右键菜单 */
|
||||
layerContentMenu: {
|
||||
type: Array as PropType<(MenuButton | MenuComponent)[]>,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
/** 画布右键菜单 */
|
||||
stageContentMenu: {
|
||||
type: Array as PropType<(MenuButton | MenuComponent)[]>,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
/** 中间工作区域中画布渲染的内容 */
|
||||
render: {
|
||||
type: Function as PropType<() => HTMLDivElement>,
|
||||
type: Function as PropType<(stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>>,
|
||||
},
|
||||
|
||||
/** 中间工作区域中画布通过iframe渲染时的页面url */
|
||||
@ -163,7 +165,7 @@ export default defineComponent({
|
||||
|
||||
/** 组件联动事件选项列表 */
|
||||
eventMethodList: {
|
||||
type: Object,
|
||||
type: Object as PropType<Record<string, { events: EventOption[]; methods: EventOption[] }>>,
|
||||
default: () => ({}),
|
||||
},
|
||||
|
||||
|
||||
@ -91,9 +91,8 @@ class Editor extends BaseService {
|
||||
|
||||
/**
|
||||
* 设置当前指点节点配置
|
||||
* @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes'
|
||||
* @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength'
|
||||
* @param value MNode
|
||||
* @returns MNode
|
||||
*/
|
||||
public set<T = MNode>(name: keyof StoreState, value: T) {
|
||||
this.state[name] = value as any;
|
||||
@ -109,7 +108,7 @@ class Editor extends BaseService {
|
||||
|
||||
/**
|
||||
* 获取当前指点节点配置
|
||||
* @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes'
|
||||
* @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength'
|
||||
* @returns MNode
|
||||
*/
|
||||
public get<T = MNode>(name: keyof StoreState): T {
|
||||
@ -432,7 +431,6 @@ class Editor extends BaseService {
|
||||
/**
|
||||
* 删除组件
|
||||
* @param {Object} node
|
||||
* @return {Object} 删除的组件配置
|
||||
*/
|
||||
public async remove(nodeOrNodeList: MNode | MNode[]): Promise<void> {
|
||||
const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
|
||||
|
||||
@ -91,7 +91,7 @@ class Props extends BaseService {
|
||||
* @param type 组件类型
|
||||
* @param value 组件初始值
|
||||
*/
|
||||
public setPropsValue(type: string, value: MNode) {
|
||||
public async setPropsValue(type: string, value: MNode) {
|
||||
this.state.propsValueMap[type] = value;
|
||||
}
|
||||
|
||||
|
||||
@ -62,7 +62,7 @@ export interface StageOptions {
|
||||
containerHighlightClassName: string;
|
||||
containerHighlightDuration: number;
|
||||
containerHighlightType: ContainerHighlightType;
|
||||
render: () => HTMLDivElement;
|
||||
render: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
|
||||
moveableOptions: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
|
||||
canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
|
||||
isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
|
||||
@ -170,18 +170,17 @@ export interface MenuButton {
|
||||
* 按钮类型
|
||||
* button: 只有文字不带边框的按钮
|
||||
* text: 纯文本
|
||||
* divider: 分割线
|
||||
* dropdown: 下拉菜单
|
||||
* divider: 分隔线
|
||||
* zoom: 放大缩小
|
||||
*/
|
||||
type: 'button' | 'dropdown' | 'text' | 'divider' | 'zoom';
|
||||
type: 'button' | 'text' | 'divider' | 'dropdown';
|
||||
/** 当type为divider时有效，分割线方向, 默认vertical */
|
||||
direction?: 'horizontal' | 'vertical';
|
||||
/** 展示的文案 */
|
||||
text?: string;
|
||||
/** 鼠标悬浮是显示的气泡中的文案 */
|
||||
tooltip?: string;
|
||||
/** element-plus icon class */
|
||||
/** Vue组件或url */
|
||||
icon?: string | Component<{}, {}, any>;
|
||||
/** 是否置灰，默认为false */
|
||||
disabled?: boolean | ((data?: Services) => boolean);
|
||||
@ -189,8 +188,8 @@ export interface MenuButton {
|
||||
display?: boolean | ((data?: Services) => boolean);
|
||||
/** type为button/dropdown时点击运行的方法 */
|
||||
handler?: (data: Services, event: MouseEvent) => Promise<any> | any;
|
||||
/** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
|
||||
className?: string;
|
||||
/** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
|
||||
items?: MenuButton[];
|
||||
}
|
||||
|
||||
@ -214,8 +213,13 @@ export interface MenuComponent {
|
||||
* 'delete': 删除按钮
|
||||
* 'undo': 撤销按钮
|
||||
* 'redo': 恢复按钮
|
||||
* 'zoom': 'zoom-in', 'zoom-out', 'scale-to-original', 'scale-to-fit' 的集合
|
||||
* 'zoom-in': 放大按钮
|
||||
* 'zoom-out': 缩小按钮
|
||||
* 'guides': 显示隐藏参考线
|
||||
* 'rule': 显示隐藏标尺
|
||||
* 'scale-to-original': 缩放到实际大小
|
||||
* 'scale-to-fit': 缩放以适应
|
||||
*/
|
||||
export type MenuItem =
|
||||
| '/'
|
||||
@ -227,6 +231,8 @@ export type MenuItem =
|
||||
| 'zoom-out'
|
||||
| 'guides'
|
||||
| 'rule'
|
||||
| 'scale-to-original'
|
||||
| 'scale-to-fit'
|
||||
| MenuButton
|
||||
| MenuComponent
|
||||
| string;
|
||||
@ -244,13 +250,14 @@ export interface MenuBarData {
|
||||
export interface SideComponent extends MenuComponent {
|
||||
/** 显示文案 */
|
||||
text: string;
|
||||
/** element-plus icon class */
|
||||
/** vue组件或url */
|
||||
icon: Component<{}, {}, any>;
|
||||
}
|
||||
|
||||
/**
|
||||
* component-list: 组件列表
|
||||
* layer: 已选组件树
|
||||
* code-block: 代码块
|
||||
*/
|
||||
export type SideItem = 'component-list' | 'layer' | 'code-block' | SideComponent;
|
||||
|
||||
@ -269,8 +276,9 @@ export interface ComponentItem {
|
||||
text: string;
|
||||
/** 组件类型 */
|
||||
type: string;
|
||||
/** element-plus icon class */
|
||||
icon?: string | Component;
|
||||
/** Vue组件或url */
|
||||
icon?: string | Component<{}, {}, any>;
|
||||
/** 新增组件时需要透传到组价节点上的数据 */
|
||||
data?: {
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
@ -55,7 +55,7 @@ const props = withDefaults(
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits(['afterAction']);
|
||||
const emit = defineEmits(['after-action']);
|
||||
|
||||
const display = (fuc: boolean | Function | undefined, row: any) => {
|
||||
if (typeof fuc === 'function') {
|
||||
@ -101,13 +101,13 @@ const save = async (index: number, config: ColumnConfig) => {
|
||||
if (res.ret === 0) {
|
||||
tMagicMessage.success('保存成功');
|
||||
props.editState[index] = undefined;
|
||||
emit('afterAction');
|
||||
emit('after-action');
|
||||
} else {
|
||||
tMagicMessage.error(res.msg || '保存失败');
|
||||
}
|
||||
} else {
|
||||
props.editState[index] = undefined;
|
||||
emit('afterAction');
|
||||
emit('after-action');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
:rowkey-name="rowkeyName"
|
||||
:edit-state="editState"
|
||||
:key="columnIndex"
|
||||
@afterAction="$emit('afterAction')"
|
||||
@after-action="$emit('after-action')"
|
||||
></ActionsColumn>
|
||||
</template>
|
||||
|
||||
@ -98,7 +98,7 @@ const props = withDefaults(
|
||||
|
||||
const emit = defineEmits([
|
||||
'sort-change',
|
||||
'afterAction',
|
||||
'after-action',
|
||||
'select',
|
||||
'select-all',
|
||||
'selection-change',
|
||||
|
||||
1471
pnpm-lock.yaml
generated
1471
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user