JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-05 07:27:09 +08:00
Code Issues Projects Releases Wiki Activity
tmagic-editor/docs/assets/api_editor_editorServiceMethods.md.BkDhL-Jz.js
github-actions[bot] 5040469595 Deploy to GitHub pages
2025-03-31 12:39:00 +00:00

71 lines
52 KiB
JavaScript
Raw 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.

import{aw as s,y as a,z as e,b0 as t}from"./chunks/framework.BCBheFgR.js";const k=JSON.parse('{"title":"editorService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/editorServiceMethods.md","filePath":"api/editor/editorServiceMethods.md"}'),l={name:"api/editor/editorServiceMethods.md"};function n(r,i,p,h,o,d){return e(),a("div",null,i[0]||(i[0]=[t(`<h1 id="editorservice方法" tabindex="-1">editorService方法 <a class="header-anchor" href="#editorservice方法" aria-label="Permalink to &quot;editorService方法&quot;">​</a></h1><h2 id="get" tabindex="-1">get <a class="header-anchor" href="#get" aria-label="Permalink to &quot;get&quot;">​</a></h2><ul><li><p><strong>参数：</strong></p><ul><li><code>{&#39;root&#39; | &#39;page&#39; | &#39;parent&#39; | &#39;node&#39; | &#39;highlightNode&#39; | &#39;nodes&#39; | &#39;modifiedNodeIds&#39; | &#39;pageLength&#39; | &#39;stage&#39;} name</code></li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{any} value</code></li></ul></li><li><p><strong>详情：</strong></p><p>获取当前指指定name的值</p><p>&#39;root&#39;: 当前整个配置，也就是当前编辑器的值</p><p>&#39;page&#39;: 当前正在编辑的页面配置</p><p>&#39;parent&#39;: 当前选中的节点的父节点</p><p>&#39;node&#39;: 当前选中的第一个节点</p><p>&#39;highlightNode&#39;: 当前高亮的节点</p><p>&#39;nodes&#39;: 当前选中的所有节点</p><p>&#39;modifiedNodeIds&#39;: 当前页面所有改动过的节点id</p><p>&#39;pageLength&#39;: 所以页面个数</p><p>&#39;stage&#39;: <a href="./../stage/coreMethods.html">StageCore</a>实例</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { editorService } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/editor&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> node</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> editorService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;node&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h2 id="set" tabindex="-1">set <a class="header-anchor" href="#set" aria-label="Permalink to &quot;set&quot;">​</a></h2><ul><li><p><code>{&#39;root&#39; | &#39;page&#39; | &#39;parent&#39; | &#39;node&#39; | &#39;highlightNode&#39; | &#39;nodes&#39; | &#39;modifiedNodeIds&#39; | &#39;pageLength&#39; | &#39;stage&#39;} name</code></p></li><li><p><code>{any} value</code></p></li><li><p><strong>详情：</strong> 参考<a href="#get">get</a>方法</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { editorService } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/editor&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> node</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> editorService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;node&#39;</span><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;">editorService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">set</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;node&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">node,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;new name&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h2 id="getnodeinfo" tabindex="-1">getNodeInfo <a class="header-anchor" href="#getnodeinfo" aria-label="Permalink to &quot;getNodeInfo&quot;">​</a></h2><ul><li><p><strong>参数：</strong></p><ul><li><p><code>{number | string}</code> id 组件id</p></li><li><p><code>{boolean}</code> raw 是否使用toRaw，默认为true</p></li></ul></li></ul><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>如果raw为false，对获取到的对象进行操作会触发vue响应式处理</p></div><ul><li><p><strong>返回：</strong></p><ul><li>{<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/type.ts#L139-L143" target="_blank" rel="noreferrer">EditorNodeInfo</a>}</li></ul></li><li><p><strong>详情：</strong></p><p>根据id获取组件、组件的父组件以及组件所属的页面节点</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { editorService } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/editor&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> info</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> editorService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getNodeInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;text_123&#39;</span><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;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(info.node);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(info.parent);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(info.page);</span></span></code></pre></div><h2 id="getnodebyid" tabindex="-1">getNodeById <a class="header-anchor" href="#getnodebyid" aria-label="Permalink to &quot;getNodeById&quot;">​</a></h2><ul><li><p><strong>参数：</strong></p><ul><li><p><code>{number | string}</code> id</p></li><li><p><code>{boolean}</code> raw 是否使用toRaw，默认为true</p></li></ul></li><li><p><strong>返回：</strong></p><ul><li>{<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>} 组件节点配置</li></ul></li><li><p><strong>详情：</strong></p><p>根据id获取组件的信息</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { editorService } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/editor&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> node</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> editorService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getNodeById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;text_123&#39;</span><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;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(node);</span></span></code></pre></div><h2 id="getparentbyid" tabindex="-1">getParentById <a class="header-anchor" href="#getparentbyid" aria-label="Permalink to &quot;getParentById&quot;">​</a></h2><ul><li><p><strong>参数：</strong></p><ul><li><p><code>{number | string}</code> id</p></li><li><p><code>{boolean}</code> raw 是否使用toRaw，默认为true</p></li></ul></li><li><p><strong>返回：</strong></p><ul><li>{<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>} 指点组件的父节点配置</li></ul></li><li><p><strong>详情：</strong></p><p>根据ID获取指点节点的父节点配置</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { editorService } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/editor&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> parent</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> editorService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getParentById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;text_123&#39;</span><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;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(parent);</span></span></code></pre></div><h2 id="getlayout" tabindex="-1">getLayout <a class="header-anchor" href="#getlayout" aria-label="Permalink to &quot;getLayout&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li><p>{<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>} parent</p></li><li><p>{<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>} node 可选</p></li></ul></li><li><p><strong>返回：</strong></p><ul><li>{Promise&lt;<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/type.ts#L297-L302" target="_blank" rel="noreferrer">Layout</a>&gt;} 当前布局模式</li></ul></li><li><p><strong>详情：</strong></p><p>只有容器拥有布局，目前支持的布局有流式布局（relative），绝对定位布局（absolute），固定定位布局（fixed）</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>固定定位布局需要从当前选中节点判断，固需要传递可选参数 node</p><p>其他布局则是从父组件（容器）来判断</p></div></li><li><p><strong>示例：</strong></p></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { editorService } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/editor&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> parent</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> editorService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getParentById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;text_123&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">editorService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getLayout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(parent).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(parent);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h2 id="select" tabindex="-1">select <a class="header-anchor" href="#select" aria-label="Permalink to &quot;select&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li>{number | string | <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>} config 需要选中的节点或节点ID</li></ul></li><li><p><strong>返回：</strong></p><ul><li>{Promise&lt;<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>&gt;} 当前选中的节点配置</li></ul></li><li><p><strong>详情：</strong></p><p>选中指点节点（将指点节点设置成当前选中状态）</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>editorService.select只是设置了编辑器的选中状态，并没有设置画布的选中状态，所以根据实际情况可以调用<a href="./../stage/coreMethods.html#select">stage.select</a>来设置画布的选中态</p></div></li><li><p><strong>示例：</strong></p></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { editorService } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/editor&#39;</span><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;">editorService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;text_123&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">editorService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;stage&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;text_123&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h2 id="multiselect" tabindex="-1">multiSelect <a class="header-anchor" href="#multiselect" aria-label="Permalink to &quot;multiSelect&quot;">​</a></h2><ul><li><p><strong>参数：</strong></p><ul><li>{(number | string)[]} ids 需要选中的节点ID集合</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise&lt;void&gt;}</code></li></ul></li><li><p><strong>详情：</strong></p><p>选中多个节点</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>editorService.multiSelect只是设置了编辑器的选中状态，并没有设置画布的选中状态，所以根据实际情况可以调用<a href="./../stage/coreMethods.html#multiSelect">stage.multiSelect</a>来设置画布的选中态</p></div></li><li><p><strong>示例：</strong></p></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { editorService } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/editor&#39;</span><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;">editorService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;text_123&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;button_123&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">editorService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;stage&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;text_123&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;button_123&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><h2 id="highlight" tabindex="-1">highlight <a class="header-anchor" href="#highlight" aria-label="Permalink to &quot;highlight&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li>{number | string | <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>} config 需要高亮的节点或节点ID</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise&lt;void&gt;}</code></li></ul></li><li><p><strong>详情：</strong></p><p>高亮指定节点</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { editorService } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/editor&#39;</span><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;">editorService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">highlight</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;text_123&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h2 id="doadd" tabindex="-1">doAdd <a class="header-anchor" href="#doadd" aria-label="Permalink to &quot;doAdd&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li><p>{<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>} node 新组件节点</p></li><li><p>{<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L54-L59" target="_blank" rel="noreferrer">MContainer</a>} parent 指定的容器节点</p></li></ul></li><li><p><strong>返回：</strong></p><ul><li>{Promise&lt;<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>&gt;} 新增的组件</li></ul></li><li><p><strong>详情：</strong></p><p>往指定的容器中添加组件</p></li></ul><h2 id="add" tabindex="-1">add <a class="header-anchor" href="#add" aria-label="Permalink to &quot;add&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li><p>{<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a> | <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>[]} node 新组件节点配置或多个节点集合</p></li><li><p>{<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L54-L59" target="_blank" rel="noreferrer">MContainer</a>} parent 指定的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点</p></li></ul></li><li><p><strong>返回：</strong></p><ul><li>{Promise&lt;<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a> | <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>[]&gt;} 新增的组件或组件集合</li></ul></li><li><p><strong>详情：</strong></p><p>往指定的容器或当前容器中添加组件</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p><strong>与<a href="#doadd">doAdd</a>的区别：</strong></p><p>add可以支持一次添加多个组件，add是通过调用<a href="#doadd">doAdd</a>来最终实现添加的。</p><p>编辑器内部添加组件都是调用add来实现的，add除了添加操作外，还会记录历史堆栈，还会更新编辑中相关的状态，而<a href="#doadd">doAdd</a>就仅仅是完成添加的行为</p></div></li></ul><h2 id="doremove" tabindex="-1">doRemove <a class="header-anchor" href="#doremove" aria-label="Permalink to &quot;doRemove&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li>{<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>} node 要删除的节点</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise&lt;void&gt;}</code></li></ul></li><li><p><strong>详情：</strong></p><p>删除指定的组件或者页面</p></li></ul><h2 id="remove" tabindex="-1">remove <a class="header-anchor" href="#remove" aria-label="Permalink to &quot;remove&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li>{<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a> | <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>[])} node 要删除的节点或节点集合</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise&lt;void&gt;}</code></li></ul></li><li><p><strong>详情：</strong></p><p>删除指定的组件或者页面或组件集合</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p><strong>与<a href="#doRemove">doRemove</a>的区别：</strong></p><p>remove可以支持一次删除多个组件，remove是通过调用<a href="#doRemove">doRemove</a>来最终实现删除的。</p><p>编辑器内部删除组件都是调用remove来实现的，remove除了删除操作外，还会记录历史堆。</p></div></li></ul><h2 id="doupdate" tabindex="-1">doUpdate <a class="header-anchor" href="#doupdate" aria-label="Permalink to &quot;doUpdate&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p></li><li><p>{<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a> | <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>)} node 新的节点</p></li><li><p><strong>返回：</strong></p><ul><li>{Promise&lt;<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a> | <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>&gt;} 新的节点</li></ul></li><li><p><strong>详情：</strong></p><p>更新节点</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>节点中应该要有id，不然不知道要更新哪个节点</p></div></li></ul><h2 id="update" tabindex="-1">update <a class="header-anchor" href="#update" aria-label="Permalink to &quot;update&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li>{Promise&lt;<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a> | <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>[]&gt;} node 新的节点或节点集合</li></ul></li><li><p><strong>返回：</strong></p><ul><li>{Promise&lt;<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a> | <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>[]&gt;} 新的节点或节点集合</li></ul></li><li><p><strong>详情：</strong></p><p>更新单个或多个节点</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p><strong>与<a href="#doupdate">doUpdate</a>的区别：</strong></p><p>update可以支持一次更新多个组件，update是通过调用<a href="#doupdate">doUpdate</a>来最终实现更新的。</p><p>编辑器内部更新组件都是调用update来实现的，update除了更新操作外，还会记录历史堆，还会更新<a href="./../../guide/advanced/code-block.html">代码块</a>关系链。</p></div></li></ul><h2 id="sort" tabindex="-1">sort <a class="header-anchor" href="#sort" aria-label="Permalink to &quot;sort&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li><code>{ string | number }</code> id1</li><li><code>{ string | number }</code> id2</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise&lt;void&gt;}</code></li></ul></li><li><p><strong>详情：</strong></p><p>将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -&gt; sort(1,3) -&gt; [2,1,3,4]</p><p>用于流式布局下的组件拖动更新</p></li></ul><h2 id="copy" tabindex="-1">copy <a class="header-anchor" href="#copy" aria-label="Permalink to &quot;copy&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li>{Promise&lt;<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a> | <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>[]&gt;} node 需要复制的节点或节点集合</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise&lt;void&gt;}</code></li></ul></li><li><p><strong>详情：</strong></p></li></ul><p>复制组件节点或节点集合</p><p>通过<a href="./storageServiceMethods.html#setitem">storageService.setItem</a>,将组将节点配置转化成string，然后存储到localStorage中</p><h2 id="dopaste" tabindex="-1">doPaste <a class="header-anchor" href="#dopaste" aria-label="Permalink to &quot;doPaste&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li></li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise&lt;void&gt;}</code></li></ul></li><li><p><strong>详情：</strong></p></li></ul><p>粘贴前置操作：返回分配了新id以及校准了坐标的配置</p><h2 id="paste" tabindex="-1">paste <a class="header-anchor" href="#paste" aria-label="Permalink to &quot;paste&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li>{<a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L152-L163" target="_blank" rel="noreferrer">PastePosition</a>} position 粘贴的坐标</li></ul></li><li><p><strong>返回：</strong></p><ul><li>{Promise&lt;<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a> | <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>[]&gt;} 添加后的组件节点配置</li></ul></li><li><p><strong>详情：</strong></p></li></ul><p>粘贴组件节点或节点集合</p><p>通过<a href="./storageServiceMethods.html#setitem">storageService.getItem</a>,从localStorage中获取节点，然后添加到当前容器中</p><h2 id="doaligncenter" tabindex="-1">doAlignCenter <a class="header-anchor" href="#doaligncenter" aria-label="Permalink to &quot;doAlignCenter&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li>{<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>} config 需要居中的组件</li></ul></li><li><p><strong>返回：</strong></p><ul><li>{Promise&lt;<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>&gt;}</li></ul></li><li><p><strong>详情：</strong></p><p>水平居中组件节点，仅在<a href="./../../guide/advanced/layout.html">流式布局</a>下有效</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>仅是计算出left，并未更新到编辑器中</p></div></li></ul><h2 id="aligncenter" tabindex="-1">alignCenter <a class="header-anchor" href="#aligncenter" aria-label="Permalink to &quot;alignCenter&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li>{Promise&lt;<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a> | <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>[]&gt;} config 需要居中的组件或者组件集合</li></ul></li><li><p><strong>返回：</strong></p><ul><li>{Promise&lt;<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a> | <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>[]&gt;}</li></ul></li><li><p><strong>详情：</strong></p></li></ul><p>水平居中组件或者组件集合，仅在<a href="./../../guide/advanced/layout.html">流式布局</a>下有效</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p><strong>与<a href="#doaligncentere">doAlignCenter</a>的区别：</strong></p><p>alignCenter可以支持一次水平居中多个组件，alignCenter是通过调用<a href="#doaligncentere">doAlignCenter</a>来获取到已设置好水平居中的位置信息的节点，然后调用update更新。</p></div><h2 id="movelayer" tabindex="-1">moveLayer <a class="header-anchor" href="#movelayer" aria-label="Permalink to &quot;moveLayer&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li><code>{number | &#39;top&#39; | &#39;bottom&#39;}</code> offset</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise&lt;void&gt;}</code></li></ul></li><li><p><strong>详情：</strong></p><p>移动当前选中节点位置</p><p>用于实现上移一层、下移一层、置顶、置底</p></li></ul><h2 id="movetocontainer" tabindex="-1">moveToContainer <a class="header-anchor" href="#movetocontainer" aria-label="Permalink to &quot;moveToContainer&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li>{<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>} config 需要移动的节点</li><li><code>{string | number}</code> targetId 容器ID</li></ul></li><li><p><strong>返回：</strong></p><ul><li>Promise&lt;<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a> | undefined&gt;</li></ul></li><li><p><strong>详情：</strong></p><p>移动到指定容器中</p></li></ul><h2 id="undo" tabindex="-1">undo <a class="header-anchor" href="#undo" aria-label="Permalink to &quot;undo&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>返回：</strong></p><ul><li>{Promise&lt;<a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404" target="_blank" rel="noreferrer">StepValue</a> | null&gt;}</li></ul></li><li><p><strong>详情：</strong></p><p>撤销当前操作</p></li></ul><h2 id="redo" tabindex="-1">redo <a class="header-anchor" href="#redo" aria-label="Permalink to &quot;redo&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>返回：</strong></p><ul><li>{Promise&lt;<a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404" target="_blank" rel="noreferrer">StepValue</a> | null&gt;}</li></ul></li><li><p><strong>详情：</strong></p><p>恢复到下一步</p></li></ul><h2 id="move" tabindex="-1">move <a class="header-anchor" href="#move" aria-label="Permalink to &quot;move&quot;">​</a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li><code>{number}</code> left</li><li><code>{number}</code> top</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise&lt;void&gt;}</code></li></ul></li><li><p><strong>详情：</strong></p><p>更新当前选中组件位置，通常用于键盘上下左右快捷键操作</p></li></ul><h2 id="resetmodifiednodeid" tabindex="-1">resetModifiedNodeId <a class="header-anchor" href="#resetmodifiednodeid" aria-label="Permalink to &quot;resetModifiedNodeId&quot;">​</a></h2><ul><li><strong>详情：</strong></li></ul><p>重置当前记录的修改过的节点id记录，通常用于保存之后</p><h2 id="resetstate" tabindex="-1">resetState <a class="header-anchor" href="#resetstate" aria-label="Permalink to &quot;resetState&quot;">​</a></h2><ul><li><strong>详情：</strong></li></ul><p>清空state</p><h2 id="destroy" tabindex="-1">destroy <a class="header-anchor" href="#destroy" aria-label="Permalink to &quot;destroy&quot;">​</a></h2><ul><li><p><strong>详情：</strong></p><p>销毁editorService</p><p>移除所有事件监听，清空state，移除所有插件</p></li></ul><h2 id="use" tabindex="-1">use <a class="header-anchor" href="#use" aria-label="Permalink to &quot;use&quot;">​</a></h2><p>使用中间件的方式扩展方法，上述方法中标记有<code>扩展支持： 是</code>的方法都支持使用use扩展</p><ul><li><strong>示例：</strong></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { editorService, getAddParent } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/editor&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ElMessageBox } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;element-plus&#39;</span><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;">editorService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">use</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 添加是否删除节点确认提示</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> async</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> remove</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">node</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">next</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ElMessageBox.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">confirm</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 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;"> confirmButtonText: </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;"> cancelButtonText: </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;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#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>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> next</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;"> add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">node</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">next</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // text组件只能添加到container中</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> parentNode</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getAddParent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(node);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (node.type </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;text&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &amp;&amp;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> parentNode?.type </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;container&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--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:#6F42C1;--shiki-dark:#B392F0;"> next</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="useplugin" tabindex="-1">usePlugin <a class="header-anchor" href="#useplugin" aria-label="Permalink to &quot;usePlugin&quot;">​</a></h2><ul><li><strong>详情：</strong></li></ul><p>相对于<a href="#use">use</a>, usePlugin支持更加灵活更加细致的扩展， 上述方法中标记有<code>扩展支持： 是</code>的方法都支持使用usePlugin扩展</p><p>每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值</p><ul><li><strong>示例：</strong></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { editorService } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/editor&#39;</span><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;">editorService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">usePlugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 添加组件的时候设置一个添加时间</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> beforeDoAdd</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">parent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config.addTime </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Date</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getTime</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [config, parent];</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="removeallplugins" tabindex="-1">removeAllPlugins <a class="header-anchor" href="#removeallplugins" aria-label="Permalink to &quot;removeAllPlugins&quot;">​</a></h2><ul><li><strong>详情：</strong></li></ul><p>删掉当前设置的所有扩展</p>`,92)]))}const g=s(l,[["render",n]]);export{k as __pageData,g as default};
Reference in New Issue View Git Blame Copy Permalink