JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-05 19:41:40 +08:00
Code Issues Projects Releases Wiki Activity

Fixed a description error of hello-world.md

Browse Source
This commit is contained in:
Xavier Zhao 2025-02-18 16:28:56 +08:00 committed by GitHub
parent 6e2b5aea47
commit bc9f35ad80
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/guide/tutorial/hello-world.md
View File

@ -51,7 +51,7 @@ cd hello-world
## 添加依赖 ## 添加依赖
```bash ```bash
npm install --save @tmagic/editor @tmagic/element-plus-adapter element-plus npm install --save @tmagic/editor @tmagic/stage @tmagic/element-plus-adapter element-plus
``` ```
## 注册组件 ## 注册组件
@ -169,6 +169,8 @@ const value = ref({
api详情：[render](../../api/editor/props.md#render) api详情：[render](../../api/editor/props.md#render)
```ts ```ts
import { createApp } from 'vue';
const render = () => { const render = () => {
const root = window.document.createElement('div'); const root = window.document.createElement('div');
const page = value.value.items[0]; const page = value.value.items[0];
@ -208,9 +210,9 @@ configureWebpack: {
```ts ```ts
import { editorService } from '@tmagic/editor'; import { editorService } from '@tmagic/editor';
import type { MPage } from '@tmagic/schema'; import { computed } from 'vue';
const page = computed(() => editorService.get<MPage>('page')) const page = computed(() => editorService.get('page'));
``` ```
到这已经能渲染出HelloWorld组件了，但是会发现无法选中，因为这时并不知道画布中的Dom已经发生变化，所以需要通知编辑器 到这已经能渲染出HelloWorld组件了，但是会发现无法选中，因为这时并不知道画布中的Dom已经发生变化，所以需要通知编辑器
@ -226,6 +228,8 @@ renderer.iframe.contentWindow.magic?.onPageElUpdate(root);
最终完整的render函数实现 最终完整的render函数实现
```ts ```ts
import { createApp } from 'vue';
import { editorService } from '@tmagic/editor';
import type StageCore from '@tmagic/stage'; import type StageCore from '@tmagic/stage';
const render = async ({ renderer }: StageCore) => { const render = async ({ renderer }: StageCore) => {