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};
