mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-04-05 19:41:40 +08:00
refactor: 文档更新
This commit is contained in:
parisma
jia000
parent
6df8ce82a5
commit
c0803242c7
@ -132,13 +132,13 @@ server 文件夹下面这些敏感文件，需要开发者参考示例进行替
|
||||
│ │ ├── keyExample.ts（加密秘钥配置）
|
||||
```
|
||||
|
||||
- 关于登陆态：
|
||||
magic-admin 在库表中为开发者预留了用户信息字段（活动负责人），开发者可以根据自身业务需要，实现用户登陆态
|
||||
- 关于登录态：
|
||||
magic-admin 在库表中为开发者预留了用户信息字段（活动负责人），开发者可以根据自身业务需要，实现用户登录态
|
||||
|
||||
```js
|
||||
// web/src/App.vue
|
||||
watchEffect(async () => {
|
||||
// 登陆态获取交由开发者实现
|
||||
// 登录态获取交由开发者实现
|
||||
const userName = process.env.VUE_APP_USER_NAME || "defaultName";
|
||||
Cookies.set("userName", userName);
|
||||
});
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
# Magic-Form
|
||||
|
||||
魔方的表单配置，核心就是使用了 magic-form 来作为渲染器。magic-form 是一个 npm 包，可以安装它，在你想使用的地方单独使用。
|
||||
|
||||
Magic-Form 接受一个表单配置，详细配置可参考[表单api](/docs/api/form.md)。
|
||||
Magic-Form 接受一个表单配置，详细配置可参考[表单 api](/docs/api/form.md)。
|
||||
|
||||
## 安装
|
||||
|
||||
```bash
|
||||
# 最新稳定版
|
||||
$ npm install @tmagic/form@next
|
||||
$ npm install @tmagic/form@latest
|
||||
```
|
||||
|
||||
```bash
|
||||
@ -20,21 +21,21 @@ $ npm install element-plus
|
||||
|
||||
### 引入 Magic-Form
|
||||
|
||||
MagicForm使用了element-ui库
|
||||
MagicForm 使用了 element-ui 库
|
||||
|
||||
在 main.js 中写入以下内容：
|
||||
|
||||
```javascript
|
||||
import { createApp } from 'vue';
|
||||
import ElementPlus from 'element-plus';
|
||||
import MagicForm from '@tmagic/form';
|
||||
import 'element-plus/lib/theme-chalk/index.css';
|
||||
import App from './App.vue';
|
||||
import { createApp } from "vue";
|
||||
import ElementPlus from "element-plus";
|
||||
import MagicForm from "@tmagic/form";
|
||||
import "element-plus/lib/theme-chalk/index.css";
|
||||
import App from "./App.vue";
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(ElementUI);
|
||||
app.use(MagicForm);
|
||||
app.mount('#app');
|
||||
app.mount("#app");
|
||||
```
|
||||
|
||||
在 App.Vue 中写入以下内容：
|
||||
@ -43,61 +44,70 @@ app.mount('#app');
|
||||
<m-form :config="config" :init-values="initValue"></m-form>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
config: [{
|
||||
text: '文本',
|
||||
name: 'text'
|
||||
}, {
|
||||
type: 'number',
|
||||
text: '计数器',
|
||||
name: 'number'
|
||||
}, {
|
||||
type: 'row',
|
||||
items: [{
|
||||
type: 'date',
|
||||
text: '日期',
|
||||
name: 'date'
|
||||
}, {
|
||||
type: 'checkbox',
|
||||
text: '多选框',
|
||||
name: 'checkbox'
|
||||
}]
|
||||
}, {
|
||||
type: 'fieldset',
|
||||
name: 'fieldset',
|
||||
legend: '分组',
|
||||
items: [{
|
||||
type: 'select',
|
||||
text: '下拉选项',
|
||||
name: 'select',
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 }
|
||||
]
|
||||
}]
|
||||
}],
|
||||
initValue: {
|
||||
text: '文本',
|
||||
number: 10,
|
||||
fieldset: {
|
||||
select: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
config: [
|
||||
{
|
||||
text: "文本",
|
||||
name: "text",
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
text: "计数器",
|
||||
name: "number",
|
||||
},
|
||||
{
|
||||
type: "row",
|
||||
items: [
|
||||
{
|
||||
type: "date",
|
||||
text: "日期",
|
||||
name: "date",
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
text: "多选框",
|
||||
name: "checkbox",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "fieldset",
|
||||
name: "fieldset",
|
||||
legend: "分组",
|
||||
items: [
|
||||
{
|
||||
type: "select",
|
||||
text: "下拉选项",
|
||||
name: "select",
|
||||
options: [
|
||||
{ text: "选项1", value: 1 },
|
||||
{ text: "选项2", value: 2 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
initValue: {
|
||||
text: "文本",
|
||||
number: 10,
|
||||
fieldset: {
|
||||
select: 1,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
以上代码便完成了 MagicForm 的引入。需要注意的是，ElementUI的样式文件需要单独引入。
|
||||
以上代码便完成了 MagicForm 的引入。需要注意的是，ElementUI 的样式文件需要单独引入。
|
||||
|
||||
### 开始使用
|
||||
|
||||
至此，一个基于 Vue 和 MagicForm 的开发环境已经搭建完毕，现在就可以编写代码了。
|
||||
|
||||
|
||||
### 示例
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
# 快速开始
|
||||
魔方的编辑器我们已经封装成一个 npm 包，可以直接安装使用。编辑器是使用 vue3 开发的，但使用编辑器的业务可以不限框架，可以用vue2、react等开发业务组件。
|
||||
|
||||
魔方的编辑器我们已经封装成一个 npm 包，可以直接安装使用。编辑器是使用 vue3 开发的，但使用编辑器的业务可以不限框架，可以用 vue2、react 等开发业务组件。
|
||||
|
||||
## 安装
|
||||
|
||||
@ -11,35 +12,36 @@ node.js > 14
|
||||
|
||||
```bash
|
||||
# 最新稳定版
|
||||
$ npm install @tmagic/editor@next -S
|
||||
$ npm install @tmagic/editor@latest -S
|
||||
```
|
||||
|
||||
editor中组件自定义属性配置由[magic-form](../form/introduction.md)提供，需要添加@tmagic/form依赖；editor 与 form 中使用到的UI组件都由 [element-plus](https://element-plus.org/)提供，需要添加element-plus依赖。
|
||||
editor 中组件自定义属性配置由[magic-form](../form/introduction.md)提供，需要添加@tmagic/form 依赖；editor 与 form 中使用到的 UI 组件都由 [element-plus](https://element-plus.org/)提供，需要添加 element-plus 依赖。
|
||||
|
||||
```bash
|
||||
$ npm install @tmagic/form@next element-plus -S
|
||||
$ npm install @tmagic/form@latest 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://github.com/microsoft/monaco-editor)，可以参考 monaco-editor 的[配置指引](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md)。
|
||||
|
||||
## 快速上手
|
||||
|
||||
### 引入 @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 MagicEditor from "@tmagic/editor";
|
||||
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, {
|
||||
@ -47,14 +49,15 @@ app.use(ElementPlus, {
|
||||
});
|
||||
app.use(MagicEditor);
|
||||
app.use(MagicForm);
|
||||
app.mount('#app');
|
||||
|
||||
app.mount("#app");
|
||||
```
|
||||
|
||||
以上代码便完成了 @tmagic/editor 的引入。需要注意的是，样式文件需要单独引入。
|
||||
|
||||
### 使用 m-editor 组件
|
||||
|
||||
在 App.vue 中写入以下内容：
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor
|
||||
@ -69,60 +72,61 @@ app.mount('#app');
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { defineComponent, ref } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: 'App',
|
||||
export default defineComponent({
|
||||
name: "App",
|
||||
|
||||
setup() {
|
||||
return {
|
||||
menu: ref({
|
||||
left: [
|
||||
// 顶部左侧菜单按钮
|
||||
],
|
||||
center: [
|
||||
// 顶部中间菜单按钮
|
||||
],
|
||||
right: [
|
||||
// 顶部右侧菜单按钮
|
||||
],
|
||||
}),
|
||||
setup() {
|
||||
return {
|
||||
menu: ref({
|
||||
left: [
|
||||
// 顶部左侧菜单按钮
|
||||
],
|
||||
center: [
|
||||
// 顶部中间菜单按钮
|
||||
],
|
||||
right: [
|
||||
// 顶部右侧菜单按钮
|
||||
],
|
||||
}),
|
||||
|
||||
data: ref({
|
||||
// 初始化页面数据
|
||||
}),
|
||||
data: ref({
|
||||
// 初始化页面数据
|
||||
}),
|
||||
|
||||
runtimeUrl: '/runtime/vue3/playground.html',
|
||||
propsConfigs: [],
|
||||
propsValues: [],
|
||||
runtimeUrl: "/runtime/vue3/playground.html",
|
||||
propsConfigs: [],
|
||||
propsValues: [],
|
||||
|
||||
componentGroupList: ref([
|
||||
// 组件列表
|
||||
]),
|
||||
};
|
||||
},
|
||||
});
|
||||
componentGroupList: ref([
|
||||
// 组件列表
|
||||
]),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.m-editor {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.m-editor {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
关于 Magic-Editor 组件，更多的属性配置详情请参考[编辑器API](/docs/api/editor.md)。
|
||||
关于 Magic-Editor 组件，更多的属性配置详情请参考[编辑器 API](/docs/api/editor.md)。
|
||||
|
||||
其中，**有四个需要注意的属性配置项**：`runtimeUrl` `values` `configs` `componentGroupList`。这是能让我们的编辑器正常运行的关键。
|
||||
|
||||
### runtimeUrl
|
||||
|
||||
该配置涉及到 [runtime 概念](/docs/guide/conception.html#runtime)，魔方编辑器中心的模拟器画布，是一个 iframe（这里的 `runtimeUrl` 配置的，就是你提供的 iframe 的 url），其中渲染了一个 runtime，用来响应编辑器中的组件增删改等操作。
|
||||
|
||||
::: tip 如何快速得到一个 runtime
|
||||
@ -130,12 +134,15 @@ export default defineComponent({
|
||||
:::
|
||||
|
||||
### componentGroupList
|
||||
|
||||
`componentGroupList` 是指定左侧组件库内容的配置。此处定义了在编辑器组件库中有什么组件。在添加的时候通过组件 `type` 来确定 runtime 中要渲染什么组件。可以参考 [componentGroupList 配置](/docs/api/editor.html#componentgrouplist)。
|
||||
|
||||
### propsConfigs/propsValues
|
||||
|
||||
`propsConfigs` `propsValues` 和 `componentGroupList` 中声明的组件是一一对应的，通过 `type` 来识别属于哪个组件，该配置涉及的内容，就是组件的表单配置描述，在[组件开发中](/docs/component/introduction.html#组件开发)会通过 formConfig 配置来声明这份内容。
|
||||
|
||||
`configs` 既可以通过 hardcode 方式写上每个组件的表单配置，也可以通过组件打包方式得到对应内容，然后通过异步加载来载入。比如：
|
||||
|
||||
```javascript
|
||||
setup() {
|
||||
asyncLoadJs(`/runtime/vue3/assets/config.js`).then(() => {
|
||||
@ -152,10 +159,12 @@ setup() {
|
||||
:::
|
||||
|
||||
### 更多
|
||||
|
||||
通过上述步骤，可以快速得到一个初始化的简单编辑器。在编辑器中，对于使用者来说，需要了解的核心内容：
|
||||
|
||||
- [魔方编辑器的基础概念](/docs/guide/conception)
|
||||
- [编辑器的产物 uiconfig]()
|
||||
- [runtime 的概念](/docs/page/introduction.html)
|
||||
- [如何实现一个 runtime](/docs/page/advanced.html)
|
||||
|
||||
除了上述内容外，文档的其他章节中，也会更深入的描述整个魔方的设计理念和实现细节。同时你也可以查看我们的[项目源码](https://github.com/Tencent/tmagic-editor)，从源码提供的 playground 和 runtime 示例来开发和理解魔方。
|
||||
除了上述内容外，文档的其他章节中，也会更深入的描述整个魔方的设计理念和实现细节。同时你也可以查看我们的[项目源码](https://github.com/Tencent/tmagic-editor)，从源码提供的 playground 和 runtime 示例来开发和理解魔方。
|
||||
|
||||
@ -132,13 +132,13 @@ server 文件夹下面这些敏感文件，需要开发者参考示例进行替
|
||||
│ │ ├── keyExample.ts（加密秘钥配置）
|
||||
```
|
||||
|
||||
- 关于登陆态：
|
||||
magic-admin 在库表中为开发者预留了用户信息字段（活动负责人），开发者可以根据自身业务需要，实现用户登陆态
|
||||
- 关于登录态：
|
||||
magic-admin 在库表中为开发者预留了用户信息字段（活动负责人），开发者可以根据自身业务需要，实现用户登录态
|
||||
|
||||
```js
|
||||
// web/src/App.vue
|
||||
watchEffect(async () => {
|
||||
// 登陆态获取交由开发者实现
|
||||
// 登录态获取交由开发者实现
|
||||
const userName = process.env.VUE_APP_USER_NAME || "defaultName";
|
||||
Cookies.set("userName", userName);
|
||||
});
|
||||
@ -158,7 +158,7 @@ watchEffect(async () => {
|
||||
|
||||
- **在管理端引入 runtime**
|
||||
|
||||
在管理端中我们提供了一个可视化的模拟画布，他需要依赖 runtime 核心库，因此我们需要先在 magic 根目录下运行
|
||||
在管理端中我们提供了一个可视化的模拟器，他需要依赖 runtime 核心库，因此我们需要先在 magic 根目录下运行
|
||||
|
||||
```js
|
||||
cd magic
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user