github/tmagic-editor
1
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2026-07-27 16:37:43 +00:00
Code Issues Packages Projects Releases Wiki Activity
tmagic-editor/docs/guide/tutorial/runtime.html
github-actions[bot] b62566deb6 Deploy to GitHub pages
2026-07-24 09:39:36 +00:00

153 lines
76 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>2.Runtime | tmagic-editor</title>
<meta name="description" content="页面可视化平台">
<meta name="generator" content="VitePress v2.0.0-alpha.18">
<link rel="preload stylesheet" href="/tmagic-editor/docs/assets/style.Ch7UhAWw.css" as="style">
<link rel="preload stylesheet" href="/tmagic-editor/docs/vp-icons.css" as="style">
<script type="module" src="/tmagic-editor/docs/assets/app.C4PDWoQ9.js"></script>
<link rel="preload" href="/tmagic-editor/docs/assets/inter-roman-latin.Cy4MYw_J.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/theme.DjefmpVa.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/framework.ECw2lWOt.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/guide_tutorial_runtime.md.B7CmcXE9.lean.js">
<meta name="theme-color" content="#646cff">
<script id="check-dark-mode">(()=>{let e=localStorage.getItem(`vitepress-theme-appearance`)||`auto`,t=window.matchMedia(`(prefers-color-scheme: dark)`).matches;(!e||e===`auto`?t:e===`dark`)&&document.documentElement.classList.add(`dark`)})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle(`mac`,/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-2932c6cf><!--[--><!--]--><!--[--><span tabindex="-1" data-v-f9a479f9></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-f9a479f9>Skip to content</a><!--]--><!----><header class="VPNav" data-v-2932c6cf data-v-5ec118a8><div class="VPNavBar has-sidebar top" data-v-5ec118a8 data-v-cd6df6d0><div class="wrapper" data-v-cd6df6d0><div class="container" data-v-cd6df6d0><div class="title" data-v-cd6df6d0><div class="VPNavBarTitle has-sidebar" data-v-cd6df6d0 data-v-22741a41><a class="title" href="/tmagic-editor/docs/" data-v-22741a41><!--[--><!--]--><!--[--><img class="VPImage logo" src="./favicon.png" alt data-v-4582fcab><!--]--><span data-v-22741a41>tmagic-editor</span><!--[--><!--]--></a></div></div><div class="content" data-v-cd6df6d0><div class="content-body" data-v-cd6df6d0><!--[--><!--]--><div class="VPNavBarSearch search" data-v-cd6df6d0 data-v-8cc82bae><!--[--><button type="button" class="VPNavBarSearchButton" aria-label="Search" aria-keyshortcuts="/ control+k meta+k" data-v-8cc82bae data-v-e341e05d><span class="vpi-search" aria-hidden="true" data-v-e341e05d></span><span class="text" data-v-e341e05d>Search</span><span class="keys" aria-hidden="true" data-v-e341e05d><kbd class="key-cmd" data-v-e341e05d>⌘</kbd><kbd class="key-ctrl" data-v-e341e05d>Ctrl</kbd><kbd data-v-e341e05d>K</kbd></span></button><!----><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-cd6df6d0 data-v-2cceaaa0><span id="main-nav-aria-label" class="visually-hidden" data-v-2cceaaa0> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/tmagic-editor/docs/guide/" tabindex="0" data-v-2cceaaa0 data-v-1f52e8ac><!--[--><span data-v-1f52e8ac>文档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/api/editor/props.html" tabindex="0" data-v-2cceaaa0 data-v-1f52e8ac><!--[--><span data-v-1f52e8ac>Editor API</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/runtime-api/core/app.html" tabindex="0" data-v-2cceaaa0 data-v-1f52e8ac><!--[--><span data-v-1f52e8ac>Runtime API</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/form-config/fields/text.html" tabindex="0" data-v-2cceaaa0 data-v-1f52e8ac><!--[--><span data-v-1f52e8ac>表单配置</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://github.com/Tencent/tmagic-editor/releases" tabindex="0" data-v-2cceaaa0 data-v-1f52e8ac><!--[--><span data-v-1f52e8ac>更新日志</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://tencent.github.io/tmagic-editor/playground/index.html" tabindex="0" data-v-2cceaaa0 data-v-1f52e8ac><!--[--><span data-v-1f52e8ac>Playground</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-cd6df6d0 data-v-11250d7e><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-11250d7e data-v-a274f63d data-v-091ddd52><span class="check" data-v-091ddd52><span class="icon" data-v-091ddd52><!--[--><span class="vpi-sun sun" data-v-a274f63d></span><span class="vpi-moon moon" data-v-a274f63d></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-cd6df6d0 data-v-67340789 data-v-882b9947><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="me noopener" data-v-882b9947 data-v-3899771d><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-cd6df6d0 data-v-ec4151bd data-v-8c70178b><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-8c70178b><span class="vpi-more-horizontal icon" data-v-8c70178b></span></button><div class="menu" data-v-8c70178b><div class="VPMenu" data-v-8c70178b data-v-d3c72699><!----><!--[--><!--[--><!----><div class="group" data-v-ec4151bd><div class="item appearance" data-v-ec4151bd><p class="label" data-v-ec4151bd>Appearance</p><div class="appearance-action" data-v-ec4151bd><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-ec4151bd data-v-a274f63d data-v-091ddd52><span class="check" data-v-091ddd52><span class="icon" data-v-091ddd52><!--[--><span class="vpi-sun sun" data-v-a274f63d></span><span class="vpi-moon moon" data-v-a274f63d></span><!--]--></span></span></button></div></div></div><div class="group" data-v-ec4151bd><div class="item social-links" data-v-ec4151bd><div class="VPSocialLinks social-links-list" data-v-ec4151bd data-v-882b9947><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="me noopener" data-v-882b9947 data-v-3899771d><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-cd6df6d0 data-v-baa7e450><span class="container" data-v-baa7e450><span class="top" data-v-baa7e450></span><span class="middle" data-v-baa7e450></span><span class="bottom" data-v-baa7e450></span></span></button></div></div></div></div><div class="divider" data-v-cd6df6d0><div class="divider-line" data-v-cd6df6d0></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-2932c6cf data-v-1c5126ae><div class="container" data-v-1c5126ae><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-1c5126ae><span class="vpi-align-left menu-icon" data-v-1c5126ae></span><span class="menu-text" data-v-1c5126ae>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-1c5126ae data-v-dd68c105><button data-v-dd68c105>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-2932c6cf data-v-42fb1f13><div class="curtain" data-v-42fb1f13></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-42fb1f13><span class="visually-hidden" id="sidebar-aria-label" data-v-42fb1f13> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-debffcca><section class="VPSidebarItem level-0" data-v-debffcca data-v-0f69b1fe><div class="item" role="button" tabindex="0" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><h2 class="text" data-v-0f69b1fe>文档</h2><!----></div><div class="items" data-v-0f69b1fe><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/introduction.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>介绍</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>快速开始</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/runtime.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>RUNTIME</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/component.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>组件开发</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/conception.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>基础概念</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/publish.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>页面发布</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/editor-expand.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>编辑器扩展</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/migration.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>升级到1.5.x</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-debffcca><section class="VPSidebarItem level-0" data-v-debffcca data-v-0f69b1fe><div class="item" role="button" tabindex="0" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><h2 class="text" data-v-0f69b1fe>进阶指南</h2><!----></div><div class="items" data-v-0f69b1fe><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/js-schema.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>JS Schema</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/layout.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>布局原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/page.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>页面渲染</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/coupling.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>联动原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/code-block.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>代码块</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/data-source.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>数据源</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/history-list.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>历史记录面板</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/tmagic-form.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>@tmagic/form</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/prop-form-validate.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>属性配置表单校验联动</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-debffcca><section class="VPSidebarItem level-0 has-active" data-v-debffcca data-v-0f69b1fe><div class="item" role="button" tabindex="0" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><h2 class="text" data-v-0f69b1fe>教程</h2><!----></div><div class="items" data-v-0f69b1fe><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>写在前面</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/hello-world.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>1.Hello World</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/runtime.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>2.Runtime</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/render.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>3.DSL解析渲染</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-2932c6cf data-v-58117d44><div class="VPDoc has-sidebar has-aside" data-v-58117d44 data-v-6fc6448d><!--[--><!--]--><div class="container" data-v-6fc6448d><div class="aside" data-v-6fc6448d><div class="aside-curtain" data-v-6fc6448d></div><div class="aside-container" data-v-6fc6448d><div class="aside-content" data-v-6fc6448d><div class="VPDocAside" data-v-6fc6448d data-v-9ea761ae><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-9ea761ae data-v-d5e90846><div class="content" data-v-d5e90846><div class="outline-marker" data-v-d5e90846></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-d5e90846>On this page</div><ul class="VPDocOutlineItem root" data-v-d5e90846 data-v-c55a35f3><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-9ea761ae></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6fc6448d><div class="content-container" data-v-6fc6448d><!--[--><!--]--><main class="main" data-v-6fc6448d><div style="position:relative;" class="vp-doc _tmagic-editor_docs_guide_tutorial_runtime" data-v-6fc6448d><div><h1 id="_2-runtime" tabindex="-1">2.Runtime <a class="header-anchor" href="#_2-runtime" aria-label="Permalink to “2.Runtime”">​</a></h1><h2 id="创建项目" tabindex="-1">创建项目 <a class="header-anchor" href="#创建项目" aria-label="Permalink to “创建项目”">​</a></h2><p><a href="https://cli.vuejs.org/zh/guide/installation.html" target="_blank" rel="noreferrer">关于@vue/cli的详细教程可以查看官方文档</a></p><h3 id="创建editor项目" tabindex="-1">创建editor项目 <a class="header-anchor" href="#创建editor项目" aria-label="Permalink to “创建editor项目”">​</a></h3><p>将<a href="./hello-world.html">上一教程</a>中的<a href="https://github.com/jia000/tmagic-tutorial/tree/master/course1/hello-world" target="_blank" rel="noreferrer">hello-world</a>复制过来，改名hello-editor</p><h3 id="创建runtime项目" tabindex="-1">创建runtime项目 <a class="header-anchor" href="#创建runtime项目" aria-label="Permalink to “创建runtime项目”">​</a></h3><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">vue</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> create</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> editor-runtime</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">cd</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> editor-runtime</span></span></code></pre></div><p>删除src/components/HelloWorld.vue</p><p>按钮需要用的ts types依赖</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --save</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @tmagic/core</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @tmagic/stage</span></span></code></pre></div><h2 id="实现runtime" tabindex="-1">实现runtime <a class="header-anchor" href="#实现runtime" aria-label="Permalink to “实现runtime”">​</a></h2><p>将hello-editor中的render函数实现移植到runtime项目中</p><p>新建ui-page.vue文件</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;config&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :data-tmagic-id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;config.id&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;style&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;node in config.items&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;node.id&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :data-tmagic-id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;node.id&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;hello world&lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { computed } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> props</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> defineProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;{</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> config</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}&gt;();</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> style</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> computed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 375</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1700</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> props.config.style </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">||</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {};</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}px`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">height</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}px`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>将以下代码覆盖到src/App.vue中</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">uiPage</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;page&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">uiPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> uiPage </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./ui-page.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> page</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="启动runtime" tabindex="-1">启动runtime <a class="header-anchor" href="#启动runtime" aria-label="Permalink to “启动runtime”">​</a></h2><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> serve</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --port=8078</span></span></code></pre></div><h2 id="修改editor" tabindex="-1">修改editor <a class="header-anchor" href="#修改editor" aria-label="Permalink to “修改editor”">​</a></h2><p>删除render props，添加runtimeUrl</p><p>修改样式</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">m-editor</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;value&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :runtime-url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;runtimeUrl&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :component-group-list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;componentGroupList&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;&lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// imports</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> value</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // 必须加上ID，这个id可能是数据库生成的key，也可以是生成的uuid</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> items: [],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> componentGroupList</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> runtimeUrl</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;http://localhost:8078/&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">#app</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">#app</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">#app::-webkit-scrollbar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> !important</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="启动editor" tabindex="-1">启动editor <a class="header-anchor" href="#启动editor" aria-label="Permalink to “启动editor”">​</a></h2><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">cd</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hello-editor</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> serve</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --port=8080</span></span></code></pre></div><h2 id="跨域问题" tabindex="-1">跨域问题 <a class="header-anchor" href="#跨域问题" aria-label="Permalink to “跨域问题”">​</a></h2><p>在editor-runtime项目下的vue.config.js中添加如下配置</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">devServer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> headers</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;Access-Control-Allow-Origin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;*&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span></code></pre></div><h2 id="runtime与editor通信" tabindex="-1">runtime与editor通信 <a class="header-anchor" href="#runtime与editor通信" aria-label="Permalink to “runtime与editor通信”">​</a></h2><p>到这里项目就可以正常访问了，但是会发现添加组件没有反应。</p><p>这是因为在runtime中无法直接获取到editor中的dsl，所以需要通过editor注入到window的magic api来交互</p><blockquote><p>如出现在runtime中出现magic为undefined， 可以尝试在App.vue中通过监听message，来准备获取magic注入时机，然后调用magic.onRuntimeReady，示例代码如下</p></blockquote><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">window.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addEventListener</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;message&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, ({ </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">data.tmagicRuntimeReady) {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> window.magic?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onRuntimeReady</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><blockquote><p>这里可能会出现editor抛出message的时候，runtime还没有执行到监听message的情况 编辑器只在iframe onload事件中抛出message 如果出现runtime中接收不到message的情况，可以尝试在onMounted的时候调用magic.onRuntimeReady</p></blockquote><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Magic } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/stage&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">declare</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> global {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Window</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> magic</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Magic</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><blockquote><p>以下片段中 <code>page</code> 来自前文中 App.vue 内的 <code>const page = ref&lt;any&gt;();</code>，此处省略其重复声明。</p></blockquote><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Id, MApp, MNode } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/core&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { RemoveData, UpdateData } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/stage&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> root</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">MApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;();</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">window.magic?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onRuntimeReady</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 当编辑器的dsl对象变化时会调用 */</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> updateRootConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">config</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> root.value </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 当编辑器的切换页面时会调用 */</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> updatePageId</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">id</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> page.value </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> root.value?.items?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">find</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item.id </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 新增组件时调用 */</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> UpdateData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> parent</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config.type </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;page&#39;</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> root.value </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> page.value;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> parent.items?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(config);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 更新组件时调用 */</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> update</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> UpdateData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> index</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> page.value.items?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">findIndex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">child</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MNode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> child.id </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config.id);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> page.value.items.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">splice</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(index, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">reactive</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(config));</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 删除组件时调用 */</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> remove</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> RemoveData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> index</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> page.value.items?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">findIndex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">child</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MNode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> child.id </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> page.value.items.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">splice</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(index, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h2 id="同步页面dom给编辑器" tabindex="-1">同步页面dom给编辑器 <a class="header-anchor" href="#同步页面dom给编辑器" aria-label="Permalink to “同步页面dom给编辑器”">​</a></h2><p>由于组件渲染在runtime中，对于编辑器来说是个黑盒，并不知道哪个dom节点才是页面（对于dsl的解析渲染可能是千奇百怪的），所以需要将页面的dom节点同步给编辑器</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(page, </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">async</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // page配置变化后，需要等dom更新</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> nextTick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> window?.magic.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onPageElUpdate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(pageComp.value?.$el);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><p>以上就是一个简单runtime实现，以及与编辑的交互，这是一个不完善的实现(会发现组件在画布中无法自由拖动，是因为没有完整的解析style)，但是其中已经几乎覆盖所有需要关心的内容</p><p>当前教程中实现了一个简单的page，tmagic提供了一个比较完善的实现，将在下一节介绍</p><p><a href="https://github.com/vft-magic/tmagic-tutorial/tree/master/course2" target="_blank" rel="noreferrer">源码</a></p></div></div></main><footer class="VPDocFooter" data-v-6fc6448d data-v-caf0f700><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-caf0f700><span class="visually-hidden" id="doc-footer-aria-label" data-v-caf0f700>Pager</span><div class="pager" data-v-caf0f700><a class="VPLink link pager-link prev" href="/tmagic-editor/docs/guide/tutorial/hello-world.html" data-v-caf0f700><!--[--><span class="desc" data-v-caf0f700>Previous page</span><span class="title" data-v-caf0f700>1.Hello World</span><!--]--></a></div><div class="pager" data-v-caf0f700><a class="VPLink link pager-link next" href="/tmagic-editor/docs/guide/tutorial/render.html" data-v-caf0f700><!--[--><span class="desc" data-v-caf0f700>Next page</span><span class="title" data-v-caf0f700>3.DSL解析渲染</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-2932c6cf data-v-53df1d78><div class="container" data-v-53df1d78><p class="message" data-v-53df1d78>Powered by 腾讯视频会员平台技术中心</p><p class="copyright" data-v-53df1d78>Copyright (C) 2025 Tencent.</p></div></footer><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_editor_codeblockservicemethods.md\":\"B0JWNSG9\",\"api_editor_componentlistservicemethods.md\":\"CBP2S7wE\",\"api_editor_datasourceservicemethods.md\":\"Dqsgtsza\",\"api_editor_editorserviceevents.md\":\"D8xRN9za\",\"api_editor_editorservicemethods.md\":\"Bk-06sWx\",\"api_editor_events.md\":\"BRiMzDnt\",\"api_editor_eventsservicemethods.md\":\"dwupZk8N\",\"api_editor_historyserviceevents.md\":\"BtP81g1-\",\"api_editor_historyservicemethods.md\":\"BjNQp3OU\",\"api_editor_props.md\":\"BhoqoNOV\",\"api_editor_propsserviceevents.md\":\"Buhcztd1\",\"api_editor_propsservicemethods.md\":\"BzKNuOaj\",\"api_editor_slots.md\":\"CM6xNMn8\",\"api_editor_storageservicemethods.md\":\"efkyIGFc\",\"api_editor_uiserviceevents.md\":\"0dV3tgwH\",\"api_editor_uiservicemethods.md\":\"BYnnqy4l\",\"api_form_form-dialog-events.md\":\"uk6NOP07\",\"api_form_form-dialog-methods.md\":\"B6jmcnJU\",\"api_form_form-dialog-props.md\":\"bOkTzdnl\",\"api_form_form-events.md\":\"DMpt-Smk\",\"api_form_form-methods.md\":\"DwT7cEhd\",\"api_form_form-props.md\":\"Dg-76p7a\",\"api_form_submit-form.md\":\"nS0JshyL\",\"api_stage_coreevents.md\":\"Bf0PhKAQ\",\"api_stage_coremethods.md\":\"BfJ-Bzds\",\"api_table_events.md\":\"CmdGltTm\",\"api_table_methods.md\":\"CDy1hOhW\",\"api_table_props.md\":\"D0XbY-XC\",\"form-config_compare.md\":\"BZ2qHWJP\",\"form-config_editor-fields_code-link.md\":\"BpuuSraL\",\"form-config_editor-fields_code-select-col.md\":\"C54C6HBq\",\"form-config_editor-fields_code-select.md\":\"CdTMmJRk\",\"form-config_editor-fields_code.md\":\"DBDZ9aIQ\",\"form-config_editor-fields_cond-op-select.md\":\"0vX39ttH\",\"form-config_editor-fields_data-source-field-select.md\":\"-jRdW6U6\",\"form-config_editor-fields_data-source-fields.md\":\"CO7fjwNI\",\"form-config_editor-fields_data-source-input.md\":\"DpgkSVzn\",\"form-config_editor-fields_data-source-method-select.md\":\"CjX7GYAV\",\"form-config_editor-fields_data-source-methods.md\":\"YdiUw-3k\",\"form-config_editor-fields_data-source-mocks.md\":\"D3UjxvJ1\",\"form-config_editor-fields_data-source-select.md\":\"CF-Bi9Rd\",\"form-config_editor-fields_display-conds.md\":\"QPsgn3i7\",\"form-config_editor-fields_event-select.md\":\"O34LrrHB\",\"form-config_editor-fields_key-value.md\":\"PMq3b0FT\",\"form-config_editor-fields_page-fragment-select.md\":\"D3CJRip6\",\"form-config_editor-fields_ui-select.md\":\"BgtJ5AxZ\",\"form-config_fields_cascader.md\":\"DhJC40cS\",\"form-config_fields_checkbox.md\":\"nvv9BCrN\",\"form-config_fields_color-picker.md\":\"D31BXkuH\",\"form-config_fields_date-picker.md\":\"C0Jc2sM4\",\"form-config_fields_daterange-picker.md\":\"hZiPs5Uv\",\"form-config_fields_datetime-picker.md\":\"BAb8t3p_\",\"form-config_fields_display.md\":\"CwHJEg6e\",\"form-config_fields_dynamic-field.md\":\"1EuSDWFw\",\"form-config_fields_hidden.md\":\"kjCPK54I\",\"form-config_fields_link.md\":\"JBng1KBn\",\"form-config_fields_number-range.md\":\"pk4oxFSa\",\"form-config_fields_number.md\":\"B-L5x_DS\",\"form-config_fields_radio.md\":\"DQIt8zrV\",\"form-config_fields_select.md\":\"CvxobLp8\",\"form-config_fields_switch.md\":\"CaohlziY\",\"form-config_fields_text.md\":\"-xxYJ1yb\",\"form-config_fields_textarea.md\":\"JLm1vGhr\",\"form-config_fields_time-picker.md\":\"B0kEAtsi\",\"form-config_fields_timerange-picker.md\":\"BBWsAvYr\",\"form-config_layout.md\":\"BouY35z0\",\"form-config_relate.md\":\"QHBTFWrk\",\"form-config_rules.md\":\"BLmymsyx\",\"guide_advanced_code-block.md\":\"DzhFxdMX\",\"guide_advanced_coupling.md\":\"B_NEBwJV\",\"guide_advanced_data-source.md\":\"R6g6a5Js\",\"guide_advanced_history-list.md\":\"Dp7f-5wV\",\"guide_advanced_js-schema.md\":\"DURcb0gD\",\"guide_advanced_layout.md\":\"DfLeWfj5\",\"guide_advanced_page.md\":\"DZRwYmIT\",\"guide_advanced_prop-form-validate.md\":\"CfZaPKFi\",\"guide_advanced_tmagic-form.md\":\"BhAymOm7\",\"guide_component.md\":\"CHxd4qA-\",\"guide_conception.md\":\"r6YOd1Lq\",\"guide_editor-expand.md\":\"DGPm3bVd\",\"guide_index.md\":\"DHab0YEy\",\"guide_introduction.md\":\"Bs_e3Azr\",\"guide_migration.md\":\"GpzxeUHU\",\"guide_publish.md\":\"nlian04d\",\"guide_runtime.md\":\"C48c370I\",\"guide_tutorial_hello-world.md\":\"DY2j4gMO\",\"guide_tutorial_index.md\":\"DgGlEUue\",\"guide_tutorial_render.md\":\"Cp6KvBb3\",\"guide_tutorial_runtime.md\":\"B7CmcXE9\",\"index.md\":\"9RsHeZYQ\",\"runtime-api_core_app.md\":\"Dur674t2\",\"runtime-api_core_devtoolapi.md\":\"C1wqlpj3\",\"runtime-api_core_env.md\":\"wgvhhZGD\",\"runtime-api_core_eventhelper.md\":\"BcVTf8du\",\"runtime-api_core_flowstate.md\":\"Bd39Dl4m\",\"runtime-api_core_iteratorcontainer.md\":\"BjjzJUgF\",\"runtime-api_core_node.md\":\"DpKm8jlu\",\"runtime-api_core_page.md\":\"aMeRWFmG\",\"runtime-api_core_utils.md\":\"BNL-iA4H\",\"runtime-api_data-source_datasource.md\":\"CTrOiEBp\",\"runtime-api_data-source_datasourcemanager.md\":\"B0C4k-Pw\",\"runtime-api_data-source_httpdatasource.md\":\"C2nCaEQ4\",\"runtime-api_data-source_observeddata.md\":\"XXpQQO8h\",\"runtime-api_data-source_utils.md\":\"BeoHBz0Y\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"tmagic-editor\",\"description\":\"页面可视化平台\",\"base\":\"/tmagic-editor/docs/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"./favicon.png\",\"search\":{\"provider\":\"local\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/Tencent/tmagic-editor\"}],\"footer\":{\"message\":\"Powered by 腾讯视频会员平台技术中心\",\"copyright\":\"Copyright (C) 2025 Tencent.\"},\"nav\":[{\"text\":\"文档\",\"link\":\"/guide/\",\"activeMatch\":\"/guide/\"},{\"text\":\"Editor API\",\"link\":\"/api/editor/props\",\"activeMatch\":\"/api/\"},{\"text\":\"Runtime API\",\"link\":\"/runtime-api/core/app\",\"activeMatch\":\"/runtime-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\":\"RUNTIME\",\"link\":\"/guide/runtime.md\"},{\"text\":\"组件开发\",\"link\":\"/guide/component.md\"},{\"text\":\"基础概念\",\"link\":\"/guide/conception.md\"},{\"text\":\"页面发布\",\"link\":\"/guide/publish.md\"},{\"text\":\"编辑器扩展\",\"link\":\"/guide/editor-expand.md\"},{\"text\":\"升级到1.5.x\",\"link\":\"/guide/migration.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\":\"数据源\",\"link\":\"/guide/advanced/data-source.md\"},{\"text\":\"历史记录面板\",\"link\":\"/guide/advanced/history-list.md\"},{\"text\":\"@tmagic/form\",\"link\":\"/guide/advanced/tmagic-form.md\"},{\"text\":\"属性配置表单校验联动\",\"link\":\"/guide/advanced/prop-form-validate.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\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/uiServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/uiServiceEvents.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\":\"submitForm\",\"link\":\"/api/form/submit-form\"}]}]},{\"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\":\"NumberRange数字范围\",\"link\":\"/form-config/fields/number-range.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/cascader.md\"},{\"text\":\"ColorPicker颜色选择器\",\"link\":\"/form-config/fields/color-picker.md\"},{\"text\":\"DatePick日期选择器\",\"link\":\"/form-config/fields/date-picker.md\"},{\"text\":\"DateRangePick日期范围选择器\",\"link\":\"/form-config/fields/daterange-picker.md\"},{\"text\":\"DatetimePick日期时间选择器\",\"link\":\"/form-config/fields/datetime-picker.md\"},{\"text\":\"TimePick时间选择器\",\"link\":\"/form-config/fields/time-picker.md\"},{\"text\":\"TimeRangePick时间范围选择器\",\"link\":\"/form-config/fields/timerange-picker.md\"},{\"text\":\"DynamicField动态表单\",\"link\":\"/form-config/fields/dynamic-field.md\"}]},{\"text\":\"编辑器中可用配置\",\"items\":[{\"text\":\"Code代码编辑器\",\"link\":\"/form-config/editor-fields/code.md\"},{\"text\":\"CodeLink代码链接\",\"link\":\"/form-config/editor-fields/code-link.md\"},{\"text\":\"CodeSelect代码块选择器\",\"link\":\"/form-config/editor-fields/code-select.md\"},{\"text\":\"CodeSelectCol代码块选择列\",\"link\":\"/form-config/editor-fields/code-select-col.md\"},{\"text\":\"DataSourceSelect数据源选择器\",\"link\":\"/form-config/editor-fields/data-source-select.md\"},{\"text\":\"DataSourceFieldSelect数据源字段选择器\",\"link\":\"/form-config/editor-fields/data-source-field-select.md\"},{\"text\":\"DataSourceMethodSelect数据源方法选择器\",\"link\":\"/form-config/editor-fields/data-source-method-select.md\"},{\"text\":\"DataSourceFields数据源字段配置\",\"link\":\"/form-config/editor-fields/data-source-fields.md\"},{\"text\":\"DataSourceInput数据源输入框\",\"link\":\"/form-config/editor-fields/data-source-input.md\"},{\"text\":\"DataSourceMethods数据源方法配置\",\"link\":\"/form-config/editor-fields/data-source-methods.md\"},{\"text\":\"DataSourceMocks数据源Mock配置\",\"link\":\"/form-config/editor-fields/data-source-mocks.md\"},{\"text\":\"UISelect组件选择器\",\"link\":\"/form-config/editor-fields/ui-select.md\"},{\"text\":\"KeyValue键值对\",\"link\":\"/form-config/editor-fields/key-value.md\"},{\"text\":\"PageFragmentSelect页面片选择器\",\"link\":\"/form-config/editor-fields/page-fragment-select.md\"},{\"text\":\"EventSelect事件选择器\",\"link\":\"/form-config/editor-fields/event-select.md\"},{\"text\":\"DisplayConds显示条件配置\",\"link\":\"/form-config/editor-fields/display-conds.md\"},{\"text\":\"CondOpSelect条件操作选择器\",\"link\":\"/form-config/editor-fields/cond-op-select.md\"}]},{\"text\":\"布局配置\",\"items\":[{\"text\":\"布局\",\"link\":\"/form-config/layout.md\"}]},{\"text\":\"联动配置\",\"items\":[{\"text\":\"联动\",\"link\":\"/form-config/relate.md\"}]},{\"text\":\"表单校验\",\"items\":[{\"text\":\"表单校验\",\"link\":\"/form-config/rules.md\"}]},{\"text\":\"表单对比\",\"items\":[{\"text\":\"表单对比\",\"link\":\"/form-config/compare.md\"}]}],\"/runtime-api/\":[{\"text\":\"@tmagic/core\",\"items\":[{\"text\":\"App\",\"link\":\"/runtime-api/core/app\"},{\"text\":\"Node\",\"link\":\"/runtime-api/core/node\"},{\"text\":\"Page\",\"link\":\"/runtime-api/core/page\"},{\"text\":\"EventHelper\",\"link\":\"/runtime-api/core/eventHelper\"},{\"text\":\"Env\",\"link\":\"/runtime-api/core/env\"},{\"text\":\"IteratorContainer\",\"link\":\"/runtime-api/core/iteratorContainer\"},{\"text\":\"FlowState\",\"link\":\"/runtime-api/core/flowState\"},{\"text\":\"DevtoolApi\",\"link\":\"/runtime-api/core/devtoolApi\"},{\"text\":\"工具函数\",\"link\":\"/runtime-api/core/utils\"}]},{\"text\":\"@tmagic/data-source\",\"items\":[{\"text\":\"DataSourceManager\",\"link\":\"/runtime-api/data-source/dataSourceManager\"},{\"text\":\"DataSource\",\"link\":\"/runtime-api/data-source/dataSource\"},{\"text\":\"HttpDataSource\",\"link\":\"/runtime-api/data-source/httpDataSource\"},{\"text\":\"观察者数据类\",\"link\":\"/runtime-api/data-source/observedData\"},{\"text\":\"工具函数\",\"link\":\"/runtime-api/data-source/utils\"}]}]}},\"locales\":{},\"cleanUrls\":false,\"additionalConfig\":{}}");</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink