From 45fcc45655809dd998097d0e02742dc236cc63f3 Mon Sep 17 00:00:00 2001 From: cipchk Date: Sat, 21 Oct 2023 17:32:13 +0800 Subject: [PATCH] chore: add thireds --- package.json | 2 +- .../widgets-third/markdown/index.en-US.md | 92 ------------------- .../widgets-third/markdown/index.zh-CN.md | 91 ------------------ .../widgets-third/markdown/markdown.widget.ts | 27 ------ .../monaco-editor/demo/simple.md | 48 ++++++++++ .../monaco-editor/index.en-US.md | 33 +++++++ .../form/widgets-third/monaco-editor/index.ts | 21 +++++ .../monaco-editor/index.zh-CN.md | 33 +++++++ .../monaco-editor/ng-package.json | 6 ++ .../widgets-third/monaco-editor/schema.ts | 19 ++++ .../widgets-third/monaco-editor/widget.ts | 45 +++++++++ .../form/widgets-third/tinymce/index.en-US.md | 78 +++------------- packages/form/widgets-third/tinymce/index.ts | 21 +++++ .../form/widgets-third/tinymce/index.zh-CN.md | 79 +++------------- .../widgets-third/tinymce/ng-package.json | 6 ++ packages/form/widgets-third/tinymce/schema.ts | 12 +++ .../widgets-third/tinymce/tinymce.widget.ts | 35 ------- packages/form/widgets-third/tinymce/widget.ts | 42 +++++++++ .../form/widgets/autocomplete/ng-package.json | 6 ++ .../form/widgets/cascader/ng-package.json | 2 +- packages/form/widgets/mention/ng-package.json | 6 ++ packages/form/widgets/rate/ng-package.json | 6 ++ packages/form/widgets/slider/ng-package.json | 6 ++ packages/form/widgets/tag/ng-package.json | 6 ++ packages/form/widgets/time/ng-package.json | 6 ++ .../form/widgets/transfer/ng-package.json | 6 ++ .../form/widgets/tree-select/ng-package.json | 6 ++ packages/form/widgets/upload/ng-package.json | 6 ++ schematics/utils/versions.ts | 2 + scripts/ci/utils.sh | 3 +- scripts/site/route-paths.txt | 4 +- src/app/app.module.ts | 4 + .../routes/form-pages/form-pages.module.ts | 8 +- .../shared/json-schema/json-schema.module.ts | 21 ++--- 34 files changed, 384 insertions(+), 404 deletions(-) delete mode 100644 packages/form/widgets-third/markdown/index.en-US.md delete mode 100644 packages/form/widgets-third/markdown/index.zh-CN.md delete mode 100644 packages/form/widgets-third/markdown/markdown.widget.ts create mode 100644 packages/form/widgets-third/monaco-editor/demo/simple.md create mode 100644 packages/form/widgets-third/monaco-editor/index.en-US.md create mode 100644 packages/form/widgets-third/monaco-editor/index.ts create mode 100644 packages/form/widgets-third/monaco-editor/index.zh-CN.md create mode 100644 packages/form/widgets-third/monaco-editor/ng-package.json create mode 100644 packages/form/widgets-third/monaco-editor/schema.ts create mode 100644 packages/form/widgets-third/monaco-editor/widget.ts create mode 100644 packages/form/widgets-third/tinymce/index.ts create mode 100644 packages/form/widgets-third/tinymce/ng-package.json create mode 100644 packages/form/widgets-third/tinymce/schema.ts delete mode 100644 packages/form/widgets-third/tinymce/tinymce.widget.ts create mode 100644 packages/form/widgets-third/tinymce/widget.ts create mode 100644 packages/form/widgets/autocomplete/ng-package.json create mode 100644 packages/form/widgets/mention/ng-package.json create mode 100644 packages/form/widgets/rate/ng-package.json create mode 100644 packages/form/widgets/slider/ng-package.json create mode 100644 packages/form/widgets/tag/ng-package.json create mode 100644 packages/form/widgets/time/ng-package.json create mode 100644 packages/form/widgets/transfer/ng-package.json create mode 100644 packages/form/widgets/tree-select/ng-package.json create mode 100644 packages/form/widgets/upload/ng-package.json diff --git a/package.json b/package.json index 073ac506e3..97daa12633 100644 --- a/package.json +++ b/package.json @@ -89,7 +89,7 @@ "qrious": "^4.0.2", "@webcomponents/custom-elements": "^1.6.0", "aos": "^3.0.0-beta.6", - "@ng-util/monaco-editor": "^16.0.0", + "@ng-util/monaco-editor": "^16.0.1", "@nguniversal/express-engine": "^16.2.0", "express": "^4.18.2", "isutf8": "^4.0.0", diff --git a/packages/form/widgets-third/markdown/index.en-US.md b/packages/form/widgets-third/markdown/index.en-US.md deleted file mode 100644 index 9f33f7af6f..0000000000 --- a/packages/form/widgets-third/markdown/index.en-US.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: markdown -subtitle: Markdown Editor -type: Third Widgets ---- - -Markdown Editor - -> Note: third party widget is not registered by default, see details from [Customize Widgets](https://ng-alain.com/form/customize/en). - -## How to Use - -**Installation dependencies** - -Since the Markdown editor relies on a third-party plug-in [ngx-simplemde](https://github.com/cipchk/ngx-simplemde), the dependency should be installed first when using it - -`yarn add ngx-simplemde` - - -**Import module** - -- The project built using the latest scaffolding provides a third-party widget registration entry: `src/app/shared/json-schema/json-schema.module.ts` -- `MarkdownWidget` needs to be declared in `JsonSchemaModule` - -```ts -export const SCHEMA_THIRDS_COMPONENTS = [MarkdownWidget]; - -@NgModule({ - declarations: SCHEMA_THIRDS_COMPONENTS, - imports: [ - SharedModule, - DelonFormModule.forRoot(), - SimplemdeModule.forRoot({ style: 'default' }), - ], - exports: SCHEMA_THIRDS_COMPONENTS -}) -export class JsonSchemaModule { -} -``` - -**Widget registration** - -- Register the widget to the `WidgetRegistry` registry - -```ts -export class JsonSchemaModule { - constructor(widgetRegistry: WidgetRegistry) { - widgetRegistry.register(MarkdownWidget.KEY, MarkdownWidget); - } -} -``` - -**Import resources** - -Import the corresponding resources in `angular.json`. - -```json -"styles": [ - "src/styles.less" -] -"scripts": [ - "node_modules/simplemde-antd/dist/simplemde.min.js" -] -``` - -**Import styles** - -After using `style.less` as the style entry, you need to import the style file of `ngx-simplemde` and define some custom variables - -```less -// src/style.less -@import 'ngx-simplemde/index.less'; -// Change existing parameters here: -@simplemde-icon-url: '//at.alicdn.com/t/font_700857_mnodkd1cp9l766r'; -@simplemde-statusbar-lines: 'Lins:'; -@simplemde-statusbar-words: 'words:'; -@simplemde-statusbar-characters: '字符：'; -@simplemde-statusbar-counts: '字数：'; -``` - -## Source Code - -[Source Code](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third/markdown). - -## API - -### ui - -| Property | Description | Type | Default | -|----------|-------------|------|---------| -| `[options]` | Configuration options, [official website](https://github.com/cipchk/ngx-simplemde) | `object` | - | -| `[change]` | Callback function when content in editor is changed | `(md: string) => void` | - | diff --git a/packages/form/widgets-third/markdown/index.zh-CN.md b/packages/form/widgets-third/markdown/index.zh-CN.md deleted file mode 100644 index d7121219ae..0000000000 --- a/packages/form/widgets-third/markdown/index.zh-CN.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: markdown -subtitle: Markdown编辑器 -type: Third Widgets ---- - -Markdown编辑器。 - -> 注：第三方小部件默认并未注册，细节见[定制小部件](https://ng-alain.com/form/customize)。 - -## 如何使用 - -**安装依赖** - -由于Markdown编辑器依赖第三方插件[ngx-simplemde](https://github.com/cipchk/ngx-simplemde)，所以使用时应首先安装依赖 - -`yarn add ngx-simplemde` - -**导入模块** - -- 使用最新脚手架搭建出的项目提供了第三方控件注册入口: `src/app/shared/json-schema/json-schema.module.ts` -- 需将`MarkdownWidget`在`JsonSchemaModule`中进行声明 - -```ts -export const SCHEMA_THIRDS_COMPONENTS = [MarkdownWidget]; - -@NgModule({ - declarations: SCHEMA_THIRDS_COMPONENTS, - imports: [ - SharedModule, - DelonFormModule.forRoot(), - SimplemdeModule.forRoot({ style: 'default' }), - ], - exports: SCHEMA_THIRDS_COMPONENTS -}) -export class JsonSchemaModule { -} -``` - -**控件注册** - -- 将控件注册到`WidgetRegistry`注册表中 - -```ts -export class JsonSchemaModule { - constructor(widgetRegistry: WidgetRegistry) { - widgetRegistry.register(MarkdownWidget.KEY, MarkdownWidget); - } -} -``` - -**导入资源** - -在 `angular.json` 导入相应资源。 - -```json -"styles": [ - "src/styles.less" -] -"scripts": [ - "node_modules/simplemde-antd/dist/simplemde.min.js" -] -``` - -**导入样式** - -使用`style.less`作为样式入口后，需将`ngx-simplemde`的样式文件导入进去，并定义一些自定义变量 - -```less -// src/style.less -@import 'ngx-simplemde/index.less'; -// Change existing parameters here: -@simplemde-icon-url: '//at.alicdn.com/t/font_700857_mnodkd1cp9l766r'; -@simplemde-statusbar-lines: 'Lins:'; -@simplemde-statusbar-words: 'words:'; -@simplemde-statusbar-characters: '字符：'; -@simplemde-statusbar-counts: '字数：'; -``` - -## 源代码 - -[源代码](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third/markdown)。 - -## API - -### ui 属性 - -| 成员 | 说明 | 类型 | 默认值 | -|----|----|----|-----| -| `[options]` | 配置项说明，[见官网](https://github.com/cipchk/ngx-simplemde) | `object` | - | -| `[change]` | 编辑器内容发生改变时会触发该事件 | `(md: string) => void` | - | diff --git a/packages/form/widgets-third/markdown/markdown.widget.ts b/packages/form/widgets-third/markdown/markdown.widget.ts deleted file mode 100644 index e751dcdd8f..0000000000 --- a/packages/form/widgets-third/markdown/markdown.widget.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { Component } from '@angular/core'; - -import { ControlWidget } from '@delon/form'; - -@Component({ - selector: 'sf-md', - template: ` - - - - ` -}) -export class MarkdownWidget extends ControlWidget { - static readonly KEY = 'md'; - - _change(value: string): void { - this.setValue(value); - if (this.ui.change) this.ui.change(value); - } -} diff --git a/packages/form/widgets-third/monaco-editor/demo/simple.md b/packages/form/widgets-third/monaco-editor/demo/simple.md new file mode 100644 index 0000000000..c645d5f23a --- /dev/null +++ b/packages/form/widgets-third/monaco-editor/demo/simple.md @@ -0,0 +1,48 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; + +import { SFSchema } from '@delon/form'; +import type { MonacoEditorWidgetSchema } from '@delon/form/widgets-third/monaco-editor'; +import { NzMessageService } from 'ng-zorro-antd/message'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + json: { + type: 'string', + title: 'JSON', + default: `{"string": "abc","number": 1 }`, + ui: { + widget: 'monaco-editor', + options: { language: 'json' } + } as MonacoEditorWidgetSchema + } + } + }; + + constructor(private msg: NzMessageService) {} + + submit(value: {}): void { + this.msg.success(JSON.stringify(value)); + } +} +``` diff --git a/packages/form/widgets-third/monaco-editor/index.en-US.md b/packages/form/widgets-third/monaco-editor/index.en-US.md new file mode 100644 index 0000000000..c634a84bce --- /dev/null +++ b/packages/form/widgets-third/monaco-editor/index.en-US.md @@ -0,0 +1,33 @@ +--- +title: monaco-editor +subtitle: Monaco Editor +type: Third Widgets +--- + +Markdown Editor + +## How to Use + +**Installation dependencies** + +`yarn add @ng-util/monaco-editor` + +**Import module** + +- 1. Import `NuMonacoEditorModule.forRoot()` in `app.module.ts` +- 2. Import `MonacoEditorWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11). + +> For more Monaco Editor configuration, please refer to [@ng-util/monaco-editor](https://github.com/ng-util/ng-util/blob/master/packages/monaco-editor/README.md#usage). + +## API + +### ui + +| Property | Description | Type | Default | +|----------|-------------|------|---------| +| `[options]` | Configuration options, [official website](https://microsoft.github.io/monaco-editor/docs.html) | `monaco.editor.IStandaloneEditorConstructionOptions` | - | +| `[delay]` | Time of lazy loading | `number` | - | +| `[change]` | Callback function when content in editor is changed | `(value: string) => void` | - | +| `[height]` | Height of monaco editor | `string` | `200px` | +| `[model]` | Model of monaco editor | `NuMonacoEditorModel` | - | +| `(event)` | Event callback | `EventEmitter` | - | diff --git a/packages/form/widgets-third/monaco-editor/index.ts b/packages/form/widgets-third/monaco-editor/index.ts new file mode 100644 index 0000000000..ba3a3cf2dc --- /dev/null +++ b/packages/form/widgets-third/monaco-editor/index.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; + +import { NuMonacoEditorModule } from '@ng-util/monaco-editor'; + +import { DelonFormModule, WidgetRegistry } from '@delon/form'; + +import { MonacoEditorWidget } from './widget'; + +export * from './widget'; +export * from './schema'; + +@NgModule({ + imports: [FormsModule, DelonFormModule, NuMonacoEditorModule], + declarations: [MonacoEditorWidget] +}) +export class MonacoEditorWidgetModule { + constructor(widgetRegistry: WidgetRegistry) { + widgetRegistry.register(MonacoEditorWidget.KEY, MonacoEditorWidget); + } +} diff --git a/packages/form/widgets-third/monaco-editor/index.zh-CN.md b/packages/form/widgets-third/monaco-editor/index.zh-CN.md new file mode 100644 index 0000000000..1fa7cfbbc8 --- /dev/null +++ b/packages/form/widgets-third/monaco-editor/index.zh-CN.md @@ -0,0 +1,33 @@ +--- +title: monaco-editor +subtitle: Monaco Editor +type: Third Widgets +--- + +Markdown编辑器。 + +## 如何使用 + +**安装依赖** + +`yarn add @ng-util/monaco-editor` + +**导入模块** + +- 1、在 `app.module.ts` 下导入 `NuMonacoEditorModule.forRoot()` +- 2、在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `MonacoEditorWidgetModule`。 + +> 关于更多 Monaco Editor 配置请参考 [@ng-util/monaco-editor](https://github.com/ng-util/ng-util/blob/master/packages/monaco-editor/README.md#usage)。 + +## API + +### ui 属性 + +| 成员 | 说明 | 类型 | 默认值 | +|----|----|----|-----| +| `[options]` | 配置项说明，[见官网](https://microsoft.github.io/monaco-editor/docs.html) | `monaco.editor.IStandaloneEditorConstructionOptions` | - | +| `[delay]` | 延迟加载时间 | `number` | - | +| `[change]` | 编辑器内容发生改变时会触发该事件 | `(value: string) => void` | - | +| `[height]` | Height of monaco editor | `string` | `200px` | +| `[model]` | Model of monaco editor | `NuMonacoEditorModel` | - | +| `(event)` | Event callback | `EventEmitter` | - | diff --git a/packages/form/widgets-third/monaco-editor/ng-package.json b/packages/form/widgets-third/monaco-editor/ng-package.json new file mode 100644 index 0000000000..7f578c054e --- /dev/null +++ b/packages/form/widgets-third/monaco-editor/ng-package.json @@ -0,0 +1,6 @@ +{ + "lib": { + "flatModuleFile": "widgets-third-monaco-editor", + "entryFile": "index.ts" + } +} diff --git a/packages/form/widgets-third/monaco-editor/schema.ts b/packages/form/widgets-third/monaco-editor/schema.ts new file mode 100644 index 0000000000..87767d34bd --- /dev/null +++ b/packages/form/widgets-third/monaco-editor/schema.ts @@ -0,0 +1,19 @@ +import type { NuMonacoEditorEvent, NuMonacoEditorModel } from '@ng-util/monaco-editor'; + +import type { SFUISchemaItem } from '@delon/form'; + +export interface MonacoEditorWidgetSchema extends SFUISchemaItem { + options?: monaco.editor.IStandaloneEditorConstructionOptions; + delay?: number; + change?: (value: string) => void; + model?: NuMonacoEditorModel; + /** + * Height of monaco editor, default: `200px` + */ + height?: string; + /** + * Whether to automatically format the document + */ + autoFormat?: boolean; + event?: (ev: NuMonacoEditorEvent) => void; +} diff --git a/packages/form/widgets-third/monaco-editor/widget.ts b/packages/form/widgets-third/monaco-editor/widget.ts new file mode 100644 index 0000000000..354cf1a5d3 --- /dev/null +++ b/packages/form/widgets-third/monaco-editor/widget.ts @@ -0,0 +1,45 @@ +import { Component } from '@angular/core'; + +import type { NuMonacoEditorEvent } from '@ng-util/monaco-editor'; + +import { ControlUIWidget } from '@delon/form'; + +import type { MonacoEditorWidgetSchema } from './schema'; + +@Component({ + selector: 'sf-widget-monaco-editor', + template: ` + + + + ` +}) +export class MonacoEditorWidget extends ControlUIWidget { + static readonly KEY = 'monaco-editor'; + + _change(value: string): void { + this.setValue(value); + if (this.ui.change) this.ui.change(value); + } + + _event(ev: NuMonacoEditorEvent): void { + if (this.ui.event) this.ui.event(ev); + } +} diff --git a/packages/form/widgets-third/tinymce/index.en-US.md b/packages/form/widgets-third/tinymce/index.en-US.md index c5137895b8..739dd454e5 100644 --- a/packages/form/widgets-third/tinymce/index.en-US.md +++ b/packages/form/widgets-third/tinymce/index.en-US.md @@ -4,78 +4,20 @@ subtitle: Tinymce Rich Text type: Third Widgets --- -Tinymce rich text +Tinymce rich text. -> Note: third party widget is not registered by default, see details from [Customize Widgets](https://ng-alain.com/form/customize/en). +## How to Use **Installation dependencies** -Since the Tinymce editor relies on a third-party plug-in [ngx-tinymce](https://github.com/cipchk/ngx-tinymce), the dependency should be installed first when using it - `yarn add ngx-tinymce` - **Import module** -- The project built using the latest scaffolding provides a third-party widget registration entry: `src/app/shared/json-schema/json-schema.module.ts`. -- `TinymceWidget` needs to be declared in `JsonSchemaModule`. -- Take the given plug-in list and toolbar as a full list, which can be deleted according to needs. - -```ts -export const SCHEMA_THIRDS_COMPONENTS = [TinymceWidget]; - -@NgModule({ - declarations: SCHEMA_THIRDS_COMPONENTS, - imports: [ - SharedModule, - DelonFormModule.forRoot(), - NgxTinymceModule.forRoot({ - baseURL: './assets/tinymce/', - config: { - language: 'zh_CN', - language_url: './assets/tinymce/langs/zh_CN.js', - branding: false, - paste_data_images: true, - automatic_uploads: false, - menubar: true, - toolbar_mode: 'wrap', - plugins: - 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount image textpattern help emoticons autosave autoresize', - toolbar: - 'code undo redo restoredraft | cut copy | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | indent2em' - } - }) - ], - exports: SCHEMA_THIRDS_COMPONENTS -}) -export class JsonSchemaModule { -} -``` - -**Widget registration** - -- Register the widget to the `WidgetRegistry` registry - -```ts -export class JsonSchemaModule { - constructor(widgetRegistry: WidgetRegistry) { - widgetRegistry.register(TinymceWidget.KEY, TinymceWidget); - } -} -``` - -**Import resources** - -Tinymce supports a highly customized plug-in mode, which can effectively reduce the size of the package body by configuring plug-ins and static resources. - -- Plug-in download: [CustomBuilds](https://www.tiny.cloud/get-tiny/custom-builds/) -- Language package download: [LanguagePackages](https://www.tiny.cloud/get-tiny/language-packages/) -- Put the downloaded plug-in into a directory accessible by `baseURL` -- Put the downloaded language pack into a directory accessible by `language_url` - -## Source Code +- 1. Import `NgxTinymceModule.forRoot()` in `app.module.ts` +- 2. Import `TinymceWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11). -[Source Code](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third/tinymce)。 +> For more tinymce configuration, please refer to [ngx-tinymce](https://github.com/cipchk/ngx-tinymce). ## API @@ -83,6 +25,10 @@ Tinymce supports a highly customized plug-in mode, which can effectively reduce | Property | Description | Type | Default | |----------|-------------|------|---------| -| `[config]` | Configuration options, [official website](https://www.tinymce.com/docs/configure/integration-and-setup/) | `object` | - | -| `[loading]` | Initial hint message | `string` | `加载中...` | -| `[change]` | Callback function when content in editor is changed | `(html: string) => void` | - | +| config | `any` | | see [configure](https://www.tinymce.com/docs/configure/integration-and-setup/) | +| loading | `string,TemplateRef` | - | Loading status of tinymce | +| disabled | `boolean` | `false` | Set tinymce mode is `readonly` if `true` | +| inline | `boolean` | `false` | Inline editor | +| delay | `number` | 0 | Delayed rendering, unit is 'millisecond' | +| placeholder | `string` | - | Placeholder for tinymce, **NOTE:** dependent on [tinymce-placeholder](https://github.com/mohan/tinymce-placeholder) | +| ready | `EventEmitter` | - | Tinymce ready callback | diff --git a/packages/form/widgets-third/tinymce/index.ts b/packages/form/widgets-third/tinymce/index.ts new file mode 100644 index 0000000000..79d7c1459f --- /dev/null +++ b/packages/form/widgets-third/tinymce/index.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; + +import { NgxTinymceModule } from 'ngx-tinymce'; + +import { DelonFormModule, WidgetRegistry } from '@delon/form'; + +import { TinymceWidget } from './widget'; + +export * from './widget'; +export * from './schema'; + +@NgModule({ + imports: [FormsModule, DelonFormModule, NgxTinymceModule], + declarations: [TinymceWidget] +}) +export class TinymceWidgetModule { + constructor(widgetRegistry: WidgetRegistry) { + widgetRegistry.register(TinymceWidget.KEY, TinymceWidget); + } +} diff --git a/packages/form/widgets-third/tinymce/index.zh-CN.md b/packages/form/widgets-third/tinymce/index.zh-CN.md index 674cc43471..31617a80f0 100644 --- a/packages/form/widgets-third/tinymce/index.zh-CN.md +++ b/packages/form/widgets-third/tinymce/index.zh-CN.md @@ -6,79 +6,18 @@ type: Third Widgets Tinymce富文本。 -> 注：第三方小部件默认并未注册，细节见[定制小部件](https://ng-alain.com/form/customize)。 - - ## 如何使用 -**安装依赖** - -由于Tinymce编辑器依赖第三方插件[ngx-tinymce](https://github.com/cipchk/ngx-tinymce)，所以使用时应首先安装依赖 +**安装依赖** `yarn add ngx-tinymce` **导入模块** -- 使用最新脚手架搭建出的项目提供了第三方控件注册入口: `src/app/shared/json-schema/json-schema.module.ts` -- 需将`TinymceWidget`在`JsonSchemaModule`中进行声明 -- 以给出的插件列表与工具栏为全量列表，可根据需求删减 - -```ts -export const SCHEMA_THIRDS_COMPONENTS = [TinymceWidget]; - -@NgModule({ - declarations: SCHEMA_THIRDS_COMPONENTS, - imports: [ - SharedModule, - DelonFormModule.forRoot(), - NgxTinymceModule.forRoot({ - baseURL: './assets/tinymce/', - config: { - language: 'zh_CN', - language_url: './assets/tinymce/langs/zh_CN.js', - branding: false, - paste_data_images: true, - automatic_uploads: false, - menubar: true, - toolbar_mode: 'wrap', - plugins: - 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount image textpattern help emoticons autosave autoresize', - toolbar: - 'code undo redo restoredraft | cut copy | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | indent2em' - } - }) - ], - exports: SCHEMA_THIRDS_COMPONENTS -}) -export class JsonSchemaModule { -} -``` - -**控件注册** - -- 将控件注册到`WidgetRegistry`注册表中 - -```ts -export class JsonSchemaModule { - constructor(widgetRegistry: WidgetRegistry) { - widgetRegistry.register(TinymceWidget.KEY, TinymceWidget); - } -} -``` - -**导入静态资源** - -Tinymce支持高度自定义的插件模式,通过配置插件和静态资源可以有效的减少包体体积 - -- 插件下载: [CustomBuilds](https://www.tiny.cloud/get-tiny/custom-builds/) -- 语言包下载: [LanguagePackages](https://www.tiny.cloud/get-tiny/language-packages/) -- 将下载好的插件放入`baseURL`可访问到的目录内 -- 将下载好的语言包放入`language_url`可访问到的目录内 - - -## 源代码 +- 1、在 `app.module.ts` 下导入 `NgxTinymceModule.forRoot()` +- 2、在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `TinymceWidgetModule`。 -[源代码](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third/tinymce)。 +> 关于更多 tinymce 配置请参考 [ngx-tinymce](https://github.com/cipchk/ngx-tinymce)。 ## API @@ -86,6 +25,10 @@ Tinymce支持高度自定义的插件模式,通过配置插件和静态资源可 | 成员 | 说明 | 类型 | 默认值 | |----|----|----|-----| -| `[config]` | 配置项说明，[见官网](https://www.tinymce.com/docs/configure/integration-and-setup/) | `object` | - | -| `[loading]` | 初始化提示文本 | `string` | `加载中...` | -| `[change]` | 编辑器内容发生改变时会触发该事件 | `(html: string) => void` | - | +| config | `any` | | see [configure](https://www.tinymce.com/docs/configure/integration-and-setup/) | +| loading | `string,TemplateRef` | - | Loading status of tinymce | +| disabled | `boolean` | `false` | Set tinymce mode is `readonly` if `true` | +| inline | `boolean` | `false` | Inline editor | +| delay | `number` | 0 | Delayed rendering, unit is 'millisecond' | +| placeholder | `string` | - | Placeholder for tinymce, **NOTE:** dependent on [tinymce-placeholder](https://github.com/mohan/tinymce-placeholder) | +| ready | `EventEmitter` | - | Tinymce ready callback | diff --git a/packages/form/widgets-third/tinymce/ng-package.json b/packages/form/widgets-third/tinymce/ng-package.json new file mode 100644 index 0000000000..ff7c84a23d --- /dev/null +++ b/packages/form/widgets-third/tinymce/ng-package.json @@ -0,0 +1,6 @@ +{ + "lib": { + "flatModuleFile": "widgets-third-tinymce", + "entryFile": "index.ts" + } +} diff --git a/packages/form/widgets-third/tinymce/schema.ts b/packages/form/widgets-third/tinymce/schema.ts new file mode 100644 index 0000000000..19a34fc9f6 --- /dev/null +++ b/packages/form/widgets-third/tinymce/schema.ts @@ -0,0 +1,12 @@ +import type { SFUISchemaItem } from '@delon/form'; +import type { NzSafeAny } from 'ng-zorro-antd/core/types'; + +export interface TinymceWidgetSchema extends SFUISchemaItem { + /** 默认配置项，对全局 Tinymce 有效 */ + config?: Record; + inline?: boolean; + /** 延迟加载（单位：毫秒），默认：`0` */ + delay?: number; + loading?: string; + ready?: (instance: NzSafeAny) => void; +} diff --git a/packages/form/widgets-third/tinymce/tinymce.widget.ts b/packages/form/widgets-third/tinymce/tinymce.widget.ts deleted file mode 100644 index 6594d5b652..0000000000 --- a/packages/form/widgets-third/tinymce/tinymce.widget.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { ControlWidget } from '@delon/form'; - -@Component({ - selector: 'sf-tinymce', - template: ` - - - - ` -}) -export class TinymceWidget extends ControlWidget implements OnInit { - static readonly KEY = 'tinymce'; - - config!: Record; - loading!: string; - - ngOnInit(): void { - this.loading = this.ui.loading || '加载中……'; - this.config = this.ui.config || {}; - } - - change(value: string): void { - if (this.ui.change) this.ui.change(value); - this.setValue(value); - } -} diff --git a/packages/form/widgets-third/tinymce/widget.ts b/packages/form/widgets-third/tinymce/widget.ts new file mode 100644 index 0000000000..412831a07d --- /dev/null +++ b/packages/form/widgets-third/tinymce/widget.ts @@ -0,0 +1,42 @@ +import { Component } from '@angular/core'; + +import { ControlUIWidget } from '@delon/form'; +import type { NzSafeAny } from 'ng-zorro-antd/core/types'; + +import type { TinymceWidgetSchema } from './schema'; + +@Component({ + selector: 'sf-widget-tinymce', + template: ` + + + + ` +}) +export class TinymceWidget extends ControlUIWidget { + static readonly KEY = 'tinymce'; + + change(value: string): void { + this.setValue(value); + if (this.ui.change) this.ui.change(value); + } + + _ready(instance: NzSafeAny): void { + if (this.ui.ready) this.ui.ready(instance); + } +} diff --git a/packages/form/widgets/autocomplete/ng-package.json b/packages/form/widgets/autocomplete/ng-package.json new file mode 100644 index 0000000000..9d4a9afb0e --- /dev/null +++ b/packages/form/widgets/autocomplete/ng-package.json @@ -0,0 +1,6 @@ +{ + "lib": { + "flatModuleFile": "widgets-auto-complete", + "entryFile": "index.ts" + } +} diff --git a/packages/form/widgets/cascader/ng-package.json b/packages/form/widgets/cascader/ng-package.json index 9df62ad921..69f4052d28 100644 --- a/packages/form/widgets/cascader/ng-package.json +++ b/packages/form/widgets/cascader/ng-package.json @@ -1,6 +1,6 @@ { "lib": { - "flatModuleFile": "widget-cascader", + "flatModuleFile": "widgets-cascader", "entryFile": "index.ts" } } diff --git a/packages/form/widgets/mention/ng-package.json b/packages/form/widgets/mention/ng-package.json new file mode 100644 index 0000000000..ffc3837bae --- /dev/null +++ b/packages/form/widgets/mention/ng-package.json @@ -0,0 +1,6 @@ +{ + "lib": { + "flatModuleFile": "widgets-mention", + "entryFile": "index.ts" + } +} diff --git a/packages/form/widgets/rate/ng-package.json b/packages/form/widgets/rate/ng-package.json new file mode 100644 index 0000000000..b9b116ea3a --- /dev/null +++ b/packages/form/widgets/rate/ng-package.json @@ -0,0 +1,6 @@ +{ + "lib": { + "flatModuleFile": "widgets-rate", + "entryFile": "index.ts" + } +} diff --git a/packages/form/widgets/slider/ng-package.json b/packages/form/widgets/slider/ng-package.json new file mode 100644 index 0000000000..ddee7bcabf --- /dev/null +++ b/packages/form/widgets/slider/ng-package.json @@ -0,0 +1,6 @@ +{ + "lib": { + "flatModuleFile": "widgets-slider", + "entryFile": "index.ts" + } +} diff --git a/packages/form/widgets/tag/ng-package.json b/packages/form/widgets/tag/ng-package.json new file mode 100644 index 0000000000..6914a665fc --- /dev/null +++ b/packages/form/widgets/tag/ng-package.json @@ -0,0 +1,6 @@ +{ + "lib": { + "flatModuleFile": "widgets-tag", + "entryFile": "index.ts" + } +} diff --git a/packages/form/widgets/time/ng-package.json b/packages/form/widgets/time/ng-package.json new file mode 100644 index 0000000000..98ee820f87 --- /dev/null +++ b/packages/form/widgets/time/ng-package.json @@ -0,0 +1,6 @@ +{ + "lib": { + "flatModuleFile": "widgets-time", + "entryFile": "index.ts" + } +} diff --git a/packages/form/widgets/transfer/ng-package.json b/packages/form/widgets/transfer/ng-package.json new file mode 100644 index 0000000000..19483d3cc5 --- /dev/null +++ b/packages/form/widgets/transfer/ng-package.json @@ -0,0 +1,6 @@ +{ + "lib": { + "flatModuleFile": "widgets-transfer", + "entryFile": "index.ts" + } +} diff --git a/packages/form/widgets/tree-select/ng-package.json b/packages/form/widgets/tree-select/ng-package.json new file mode 100644 index 0000000000..b3d67c2122 --- /dev/null +++ b/packages/form/widgets/tree-select/ng-package.json @@ -0,0 +1,6 @@ +{ + "lib": { + "flatModuleFile": "widgets-tree-select", + "entryFile": "index.ts" + } +} diff --git a/packages/form/widgets/upload/ng-package.json b/packages/form/widgets/upload/ng-package.json new file mode 100644 index 0000000000..b39b5ce0f0 --- /dev/null +++ b/packages/form/widgets/upload/ng-package.json @@ -0,0 +1,6 @@ +{ + "lib": { + "flatModuleFile": "widgets-upload", + "entryFile": "index.ts" + } +} diff --git a/schematics/utils/versions.ts b/schematics/utils/versions.ts index bedd2b19fb..81501adbb6 100644 --- a/schematics/utils/versions.ts +++ b/schematics/utils/versions.ts @@ -37,6 +37,8 @@ export function UpgradeMainVersions(tree: Tree, version: string = VERSION): void `ng-alain-plugin-theme@DEP-0.0.0-PLACEHOLDER`, `source-map-explorer@DEP-0.0.0-PLACEHOLDER`, `@angular/language-service@DEP-0.0.0-PLACEHOLDER`, + `ngx-tinymce@DEP-0.0.0-PLACEHOLDER`, + `@ng-util/monaco-editor@DEP-0.0.0-PLACEHOLDER`, `@delon/testing@${version}` ], 'devDependencies' diff --git a/scripts/ci/utils.sh b/scripts/ci/utils.sh index e837a12a49..15c0043ca2 100644 --- a/scripts/ci/utils.sh +++ b/scripts/ci/utils.sh @@ -54,7 +54,8 @@ DEPENDENCIES=$(node -p " 'swagger-typescript-api', '@github/hotkey', 'ng-alain-sts', - 'ng-alain-plugin-theme' + 'ng-alain-plugin-theme', + '@ng-util/monaco-editor' ].map(key => key.replace(/\@/g, '\\\\@').replace(/\//g, '\\\\/').replace(/-/g, '\\\\-') + '|' + (vs[key] || dvs[key])).join('\n\t'); ") VERSION=$(node -p "require('./package.json').version") diff --git a/scripts/site/route-paths.txt b/scripts/site/route-paths.txt index 9b7ebc5aad..ba61a837f5 100644 --- a/scripts/site/route-paths.txt +++ b/scripts/site/route-paths.txt @@ -219,12 +219,12 @@ /form/i18n/zh /form/layout/en /form/layout/zh -/form/markdown/en -/form/markdown/zh /form/mention/en /form/mention/zh /form/modal/en /form/modal/zh +/form/monaco-editor/en +/form/monaco-editor/zh /form/number/en /form/number/zh /form/object/en diff --git a/src/app/app.module.ts b/src/app/app.module.ts index dd6133cfeb..dfd11182c1 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -32,6 +32,7 @@ import { JsonSchemaModule } from './shared/json-schema/json-schema.module'; import { SharedModule } from './shared/shared.module'; import { STWidgetModule } from './shared/st-widget/st-widget.module'; import { CellWidgetModule } from './shared/cell-widget/module'; +import { NuMonacoEditorModule } from '@ng-util/monaco-editor'; export function StartupServiceFactory(startupService: StartupService): () => Promise { return () => startupService.load(); @@ -70,6 +71,9 @@ function registerElements(injector: Injector, platformId: {}): void { CellWidgetModule, RoutesModule, ExampleModule, + NuMonacoEditorModule.forRoot({ + defaultOptions: { scrollBeyondLastLine: false } + }), NgxTinymceModule.forRoot({ baseURL: 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.9.2/' }), diff --git a/src/app/routes/form-pages/form-pages.module.ts b/src/app/routes/form-pages/form-pages.module.ts index 468c8f7dc9..35c29d0928 100644 --- a/src/app/routes/form-pages/form-pages.module.ts +++ b/src/app/routes/form-pages/form-pages.module.ts @@ -24,13 +24,7 @@ const routes: Routes = [ ]; @NgModule({ - imports: [ - SharedModule, - NuMonacoEditorModule.forRoot({ - defaultOptions: { scrollBeyondLastLine: false } - }), - RouterModule.forChild(routes) - ], + imports: [SharedModule, RouterModule.forChild(routes), NuMonacoEditorModule], declarations: COMPONENTS }) export class FormPagesModule {} diff --git a/src/app/shared/json-schema/json-schema.module.ts b/src/app/shared/json-schema/json-schema.module.ts index f8de98c81d..66fc205816 100644 --- a/src/app/shared/json-schema/json-schema.module.ts +++ b/src/app/shared/json-schema/json-schema.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; -import { DelonFormModule, WidgetRegistry } from '@delon/form'; +import { DelonFormModule } from '@delon/form'; import { AutoCompleteWidgetModule } from '@delon/form/widgets/autocomplete'; import { CascaderWidgetModule } from '@delon/form/widgets/cascader'; import { MentionWidgetModule } from '@delon/form/widgets/mention'; @@ -11,14 +11,12 @@ import { TimeWidgetModule } from '@delon/form/widgets/time'; import { TransferWidgetModule } from '@delon/form/widgets/transfer'; import { TreeSelectWidgetModule } from '@delon/form/widgets/tree-select'; import { UploadWidgetModule } from '@delon/form/widgets/upload'; -import { TinymceWidget } from '@delon/form/widgets-third/tinymce/tinymce.widget'; +import { MonacoEditorWidgetModule } from '@delon/form/widgets-third/monaco-editor'; +import { TinymceWidgetModule } from '@delon/form/widgets-third/tinymce'; import { SharedModule } from '../shared.module'; -export const SCHEMA_THIRDS_COMPONENTS = [TinymceWidget]; - @NgModule({ - declarations: SCHEMA_THIRDS_COMPONENTS, imports: [ SharedModule, DelonFormModule.forRoot(), @@ -31,12 +29,9 @@ export const SCHEMA_THIRDS_COMPONENTS = [TinymceWidget]; TreeSelectWidgetModule, TagWidgetModule, TimeWidgetModule, - UploadWidgetModule - ], - exports: [...SCHEMA_THIRDS_COMPONENTS] + UploadWidgetModule, + MonacoEditorWidgetModule, + TinymceWidgetModule + ] }) -export class JsonSchemaModule { - constructor(widgetRegistry: WidgetRegistry) { - widgetRegistry.register(TinymceWidget.KEY, TinymceWidget); - } -} +export class JsonSchemaModule {}