docs: 修改onRuntimeReady描述

docs/src/tutorial/runtime.md

@@ -149,12 +149,23 @@ devServer: {
 
 这是因为在runtime中无法直接获取到editor中的dsl，所以需要通过editor注入到window的magic api来交互
 
-在App.vue中通过监听message，来准备获取magic注入时机，然后调用magic.onRuntimeReady，示例代码如下
+> 如出现在runtime中出现magic为undefined， 可以尝试在App.vue中通过监听message，来准备获取magic注入时机，然后调用magic.onRuntimeReady，示例代码如下
+```js
+window.addEventListener('message', ({ data }) => {
+  if (!data.tmagicRuntimeReady) {
+    return;
+  }
 
+  window.magic?.onRuntimeReady({
+    // ...
+  });
+});
+```
 > 这里可能会出现editor抛出message的时候，runtime还没有执行到监听message的情况
 > 编辑器只在iframe onload事件中抛出message
 > 如果出现runtime中接收不到message的情况，可以尝试在onMounted的时候调用magic.onRuntimeReady
 
+
 ```ts
 import type { Magic } from '@tmagic/stage';
 
@@ -165,19 +176,13 @@ declare global {
 }
 ```
 
-
 ```ts
 import type { RemoveData, UpdateData } from '@tmagic/stage';
 import type { Id, MApp, MNode } from '@tmagic/schema';
 
 const root = ref<MApp>();
 
-window.addEventListener('message', ({ data }) => {
-  if (!data.tmagicRuntimeReady) {
-    return;
-  }
-
-  window.magic?.onRuntimeReady({
+window.magic?.onRuntimeReady({
   /** 当编辑器的dsl对象变化时会调用 */
   updateRootConfig(config: MApp) {
     root.value = config;
@@ -205,7 +210,6 @@ window.addEventListener('message', ({ data }) => {
     const index = page.value.items?.findIndex((child: MNode) => child.id === id);
     page.value.items.splice(index, 1);
   },
-  });
 });
 
 ```