10 KiB
Services
editorService
set
-
参数：
{'root' | 'page' | 'parent' | 'node'} name{MNode} value
-
返回：
- {MNode}
-
用法：
设置当前指点节点配置
'root': 当前整个配置，也就是当前编辑器的值
'page': 当前正在编辑的页面配置
'parent': 当前选中的节点的父节点
'node': 当前选中的节点
-
示例：
import { editorService } from '@tmagic/editor';
const node = editorService.get('node');
node.name = 'new name';
editorService.set('node', node);
get
-
参数：
{'root' | 'page' | 'parent' | 'node'} name
-
返回：
- {MNode}
-
用法：
获取当前指点节点配置
'root': 当前整个配置，也就是当前编辑器的值
'page': 当前正在编辑的页面配置
'parent': 当前选中的节点的父节点
'node': 当前选中的节点
-
示例：
import { toRaw } from 'vue';
import { editorService } from '@tmagic/editor';
const node = editorService.get('node');
console.log(toRaw(node));
getNodeInfo
-
参数：
{number | string}id
-
返回：
-
用法：
根据id获取组件、组件的父组件以及组件所属的页面节点
-
示例：
import { toRaw } from 'vue';
import { editorService } from '@tmagic/editor';
const info = editorService.getNodeInfo('text_123');
console.log(toRaw(info.node));
console.log(toRaw(info.parent));
console.log(toRaw(info.page));
getNodeById
-
参数：
{number | string}id
-
返回：
- {MNode} 组件节点配置
-
用法：
根据id获取组件的信息
-
示例：
import { toRaw } from 'vue';
import { editorService } from '@tmagic/editor';
const node = editorService.getNodeById('text_123');
console.log(toRaw(node));
getParentById
-
参数：
{number | string}id
-
返回：
- {MNode} 指点组件的父节点配置
-
用法：
根据ID获取指点节点的父节点配置
-
示例：
import { toRaw } from 'vue';
import { editorService } from '@tmagic/editor';
const parent = editorService.getParentById('text_123');
console.log(toRaw(parent));
select
-
参数：
{number | string | MNode}config
-
返回：
当前选中的节点配置
-
用法：
选中指点节点（将指点节点设置成当前选中状态）
-
示例：
import { editorService } from '@tmagic/editor';
editorService.select('text_123');
add
-
参数：
- {AddMNode} param0 将要添加的组件节点配置
- {MContainer | null} parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
-
返回：
添加后的节点
-
用法：
向指点容器添加组件节点
-
示例：
import { editorService } from '@tmagic/editor';
editorService.add({
type: 'text',
// ...
});
const parent = editorService.getParentById('text_123');
editorService.add({
type: 'text',
// ...
}, parent);
remove
-
参数：
- {MNode} node
-
返回：
删除的组件配置
-
用法：
删除组件
-
示例：
import { editorService } from '@tmagic/editor';
const node = editorService.get('node');
editorService.remove(node);
-
update
-
参数：
- {MNode} config
-
返回：
更新后的节点配置
-
用法：
更新节点
-
示例：
import { editorService } from '@tmagic/editor';
const node = editorService.get('node');
node.name = 'new name';
editorService.update(node);
-
sort
-
参数：
{number | string}id1{number | string}id2
-
用法：
将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -> sort(1,3) -> [2,1,3,4]
-
示例：
import { editorService } from '@tmagic/editor';
const parent = editorService.get('parent');
editorService.update(parent[0].id, parent[3].id);
-
copy
-
参数：
- {MNode} config
-
用法：
将组将节点配置转化成string，然后存储到localStorage中
-
示例：
import { editorService } from '@tmagic/editor';
const node = editorService.get('node');
editorService.copy(node);
-
paste
-
参数：
{Position}position 可选，如果设置，指定组件位置
-
返回：
添加后的组件节点配置
-
用法：
从localStorage中获取节点，然后添加到当前容器中
-
示例：
import { editorService } from '@tmagic/editor';
editorService.paste({ left: 0, top: 0 });`
-
alignCenter
-
参数：
{MNode} config
-
返回：
当前组件节点配置
-
用法：
将指点节点设置居中
-
示例：
import { editorService } from '@tmagic/editor';
const node = editorService.get('node');
editorService.alignCenter(node);
-
moveLayer
-
参数：
{number | 'top' | 'bottom'offset
-
用法：
移动当前选中节点位置
-
示例：
import { editorService } from '@tmagic/editor';
editorService.moveLayer('top'); // 置底
editorService.moveLayer('bottom'); // 置顶
editorService.moveLayer(1); // 上移一层
editorService.moveLayer(-1); // 下移一层
-
undo
-
返回：
上一次数据
-
用法：
撤销当前操作
-
示例：
import { editorService } from '@tmagic/editor';
editorService.undo();
-
redo
-
返回：
下一步数据
-
用法：
恢复到下一步
-
示例：
import { editorService } from '@tmagic/editor';
editorService.redo();
-
move
-
参数：
{number}left{number}top
-
用法：
绝对定位布局下，移动组件位置
-
示例：
import { editorService } from '@tmagic/editor';
editorService.move(1, 1);
usePlugin
-
参数：
{Record<string, Function>options
-
用法： 扩展editorService中的方法（'select', 'add', 'remove', 'update', 'sort', 'copy', 'paste', 'center', 'moveLayer', 'undo', 'redo'）
对于每一个方法，都可以为其添加before/after两个扩展方法，分别在该方法运行前与运行后调用
调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after第一个参数则是原方法的return值
-
示例：
import { editorService } from '@tmagic/editor';
editorService.usePlugin({
beforeAdd(value) {
console.log(value); // { type: 'text' }
console.log('before add');
return [{
type: 'button',
}];
},
afterAdd(result, value) {
console.log(value) // { type: 'button' }
console.log('after add');
},
});
const node = await editorService.add({
type: 'text';
});
console.log(node); // { type: 'button' }
// console 输出如下：
// { type: 'text' }
// before add
// add
// { type: 'button' }
// after add
// { type: 'button' }
use
-
参数：
{Record<string, Function>options
-
用法： 使用中间的方式扩展editorService中的方法（'select', 'add', 'remove', 'update', 'sort', 'copy', 'paste', 'center', 'moveLayer', 'undo', 'redo'）
-
示例：
import { editorService } from '@tmagic/editor';
editorService.use({
add(value, next) {
console.log('before');
next();
console.log('after')
},
});
editorService.add({
type: 'text';
});
// console 输出如下：
// before
// add
// after
:::tip 可以多次为同一个方法添加扩展，运行时会根据添加的顺序依次调用 :::
propsService
setPropsConfig
-
参数：
{string}type 组件类型- FormConfig config 组件属性表单配置
-
用法：
为指定类型组件设置组件属性表单配置
-
示例：
import { propsService } from '@tmagic/editor';
propsService.setPropsConfig('text', [
{
name: 'text',
text: '文本',
},
{
name: 'multiple',
text: '多行文本',
type: 'switch',
},
]);
getPropsConfig
-
参数：
{string}type 组件类型
-
返回：
组件属性表单配置
-
用法：
获取指点类型的组件属性表单配置
-
示例：
import { propsService } from '@tmagic/editor';
propsService.getPropsConfig('text');
setPropsValue
-
参数：
{string}type 组件类型{Object}value 组件初始值
-
用法：
为指点类型组件设置组件初始值
-
示例：
import { propsService } from '@tmagic/editor';
propsService.setPropsValue('text', {
text: '文本',
multiple: true,
});
getPropsValue
-
参数：
{string}type 组件类型
-
返回：
组件初始值
-
用法：
获取指定类型的组件初始值
-
示例：
import { propsService } from '@tmagic/editor';
propsService.getPropsValue('text');
usePlugin
扩展propsService中的方法（'setConfig', 'getConfig', 'setValue', 'getValue'）
use
扩展propsService中的方法（'setConfig', 'getConfig', 'setValue', 'getValue'）