创建Slate Ng Plugin

在很多情况下我们会遇见很多node节点的元素是大家都需要的，那么事实上在slate-ng中我们是可以把这个节点组件提取出来变为一个库发布供大家使用，接下来我将会以slate-ng-element-table为参照，教大家如何创建一个Slate Ng Plugin(事实上这个一个用Angular Cli创建一个Library的教程)：

首先我们需要一个Angular工作区，可参考官方

 ng new slate-ng-plugin-workspace --create-application=false
 cd slate-ng-plugin-workspace
 ng generate library slate-ng-element-table

创建完后，我会得到如下目录结构：

├── README.md
├── angular.json
├── node_modules
├── package-lock.json
├── package.json
├── projects
│  └── slate-ng-element-table
│  ├── README.md
│  ├── karma.conf.js
│  ├── ng-package.json
│  ├── package.json
│  ├── src
│  │   ├── lib
│  │   ├── public-api.ts
│  │   └── test.ts
│  ├── tsconfig.lib.json
│  ├── tsconfig.lib.prod.json
│  ├── tsconfig.spec.json
│  └── tslint.json
├── tsconfig.json
└── tslint.json

更改package.json依赖，并安装：

{
"name": "<u package name>",
"version": "0.0.1",
"peerDependencies": {
 "@angular/common": "^10.2.4",
 "@angular/core": "^10.2.4",
 "@angular/cdk": "^10.2.4",
 "slate-ng": "~0.0.2",
 "slate": ">=0.55.0"
},
"dependencies": {
 "tslib": "^2.0.0"
},
"devDependencies": {
   "slate": "^0.63.0",
   "@angular/cdk": "^10.2.4",
   "slate-ng": "~0.0.2"
}
}

删除lib文件夹,清理public-api.ts内容，并新增或更新以下文件：

index.ts
```
export * from './public-api';
```
ns-element-table.module.ts
table.ts
table-row.ts
table-cell.ts
with-table.ts
table.css

public-api.ts

// 导出
export * from './ns-element-table.module';
export * from './table';
export * from './table-row';
export * from './table-cell';
export * from './with-table';

打包并发布：

ng build --prod
cd dist/slate-ng-element-table
npm publish

前面已经有了一个插件，那么如何使用呢？具体参考使用方式

我们只需要在module中导入ns-element-table.module，然后使用withTables包裹editor，并进行注册：this.registryNsElement.add([SlateNgElementTableRow, SlateNgElementTableCell, SlateNgElementTable,]);，创建对应的value值：

{
      type: 'table',
      children: [
        {
          type: 'table-row',
          children: [
            {
              type: 'table-cell',
              children: [{text: ''}]
            },
            {
              type: 'table-cell',
              children: [{text: 'Human', bold: true}]
            },
            {
              type: 'table-cell',
              children: [{text: 'Dog', bold: true}]
            },
            {
              type: 'table-cell',
              children: [{text: 'Cat', bold: true}]
            }
          ]
        },
        {
          type: 'table-row',
          children: [
            {
              type: 'table-cell',
              children: [{text: '# of Feet', bold: true}]
            },
            {
              type: 'table-cell',
              children: [{text: '2'}]
            },
            {
              type: 'table-cell',
              children: [{text: '4'}]
            },
            {
              type: 'table-cell',
              children: [{text: '4'}]
            }
          ]
        },
        {
          type: 'table-row',
          children: [
            {
              type: 'table-cell',
              children: [{text: '# of Lives', bold: true}]
            },
            {
              type: 'table-cell',
              children: [{text: '1'}]
            },
            {
              type: 'table-cell',
              children: [{text: '1'}]
            },
            {
              type: 'table-cell',
              children: [{text: '9'}]
            }
          ]
        }
      ]
  }

最终你便可以看到一个table。

创建slate-ng插件

创建Slate Ng Plugin

results matching ""

No results matching ""