mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[AAE-6919] add a display text form control (#7718)
* [AAE-9373] Create adf-rich-text-editor into core library, install editorjs and import it into the component, add a basic editorjs configuration * [AAE-9374] create a rich text editor demo page * [AAE-9376] Install header to provide headings blocks * [AAE-9376] Install editorjs List plugin to add ordered and unordered list * [AAE-9376] Install text color plugin to change text color and highlight text * [AAE-9376] Install paragraph plugin to set text alignment to right, left, center and justify * [AAE-9376] Install font size plugin to increase/decrease font size * [AAE-9376] Install @editorjs/underline plugin to underline text * [AAE-9376] Install @editorjs/inline-code to marking code-fragments * [AAE-9376] Set shortcut to underline text * [AAE-9376] Install @editorjs/code to add code examples * [AAE-9376] Enable custom picker to color text changer, add colors codes * [AAE-9376] Add input to fill rich text editor data * [AAE-9376] Demo rich text editor, add sample data to display editor content * [AAE-9376] Demo rich text editor, add sample data to display editor content * [AAE-9376] Install @editorjs/marker plugin to highlight the text, because color plugin doesn't save marker style * [AAE-9373] Send editor text output data onReady and onChange * [AAE-9374] Update editor demo page to show the output on the right side of the page * [AAE-9373] Allow to enable editorjs readOnly mode * [AAE-9373] Return rich text editor save data as promise * [AAE-9480] Add new display-rich-text widget to allow the user add Rich Text into a form * [AAE-9371] Add readonly class if readOnly property is true to remove the editor 300px padding bottom in readonly mode, set a dynamic id to editorjs * [AAE-9371] Destroy editorInstance on component destroy to FIX an error faced when there are multiple editorjs instance in the same page --> Uncaught TypeError: Cannot read property 'updateCurrentInput' of undefined * [AAE-9480] Install editorjs-html utility to parse editorjs clean data to HTML * [AAE-9480] parse editorjs data to HTML to avoid to create a new EditorJS instance for every single widget and improve performance * [AAE-9480] Set pre styles to show show Code block styles correctly * [AAE-9480] Remove space between rules * [AAE-9480] Set editorjs and plugins fixed versions * [AAE-9480] Removed unused editorjs dependency * [AAE-9371] Set is ready property when editor instance is ready, check if is ready to destroy the instance on component destroy * [AAE-9480] Add parse editorjs data to html Test * [AAE-9371] Send rich-text-editor component data only if readOnly mode is false * [AAE-9480] Test if display-rich-text widget is resolved * [AAE-9480] Rename DisplayRichTextComponent into DisplayRichTextWidgetComponent to be compliant with other widget component names * [AAE-9480] update Readme files with DisplayRichTextWidgetComponent * [AAE-9371] Update header text * [AAE-9371] Add Rich text editor component usage documentation * [AAE-9480] Add padding to the widget container * [AAE-9371] Remove plugin that align pragraph text since editorjs-html parser doesn't handle paragraph alignment * [AAE-9371] Set editor autofocus to true * [AAE-9480] Add a display-rich-text widget example to demo cloud form * [AAE-9371] Fix lint issue * [AAE-9371] Remove duplicated import to fix import module issue in a lib build job
This commit is contained in:
Amedeo Lepore
GitHub
@@ -57,5 +57,6 @@ Forms defined in APS have the following default mappings for the form fields:
|
||||
| Attach File | upload | AttachWidgetComponent or [`UploadWidgetComponent`](../../../lib/core/form/components/widgets/upload/upload.widget.ts) (based on metadata) |
|
||||
| Display value | readonly | [`TextWidgetComponent`](../../../lib/core/form/components/widgets/text/text.widget.ts) |
|
||||
| Display text | readonly-text | [`DisplayTextWidgetComponent`](../../../lib/core/form/components/widgets/display-text/display-text.widget.ts) |
|
||||
| Display Rich text | display-rich-text | [`DisplayRichTextWidgetComponent`](../../../lib/core/form/components/widgets/display-rich-text/display-rich-text.widget.ts) |
|
||||
| N/A | container | [`ContainerWidgetComponent`](../../../lib/core/form/components/widgets/container/container.widget.ts) (layout component) |
|
||||
| N/A | N/A | [`UnknownWidgetComponent`](../../../lib/core/form/components/widgets/unknown/unknown.widget.ts) |
|
||||
|
||||
78
docs/core/components/rich-text-editor.md
Normal file
78
docs/core/components/rich-text-editor.md
Normal file
@@ -0,0 +1,78 @@
|
||||
---
|
||||
Title: Rich Text Editor component
|
||||
Added: v1.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2020-07-20
|
||||
---
|
||||
|
||||
# [Rich Text Editor component](../../../lib/core/rich-text-editor/rich-text-editor.component.ts "Defined in rich-text-editor.component.ts")
|
||||
|
||||
Wrap [Editor.js](https://editorjs.io/) element to show a Rich Text editor allows to add formatted text.
|
||||
|
||||
## Contents
|
||||
|
||||
- [Basic usage](#basic-usage)
|
||||
- [Class members](#class-members)
|
||||
- [Properties](#properties)
|
||||
|
||||
## Basic usage
|
||||
|
||||
**app.component.html**
|
||||
|
||||
```html
|
||||
<adf-rich-text-editor [data]="data" #editor> </adf-rich-text-editor>
|
||||
<button (click)="saveContent()">Save</button>
|
||||
```
|
||||
|
||||
**app.component.ts**
|
||||
|
||||
```ts
|
||||
@Component({...})
|
||||
export class RichTextEditorDemo {
|
||||
|
||||
@ViewChild('editor')
|
||||
editorRef;
|
||||
|
||||
data = {
|
||||
time: 1658154611110,
|
||||
blocks: [
|
||||
{
|
||||
id: '99jwc03ETP',
|
||||
type: 'header',
|
||||
data: {
|
||||
text: 'Header',
|
||||
level: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'ffdulIdU1E',
|
||||
type: 'paragraph',
|
||||
data: {
|
||||
text: 'Sample paragraph',
|
||||
alignment: 'left'
|
||||
}
|
||||
},
|
||||
],
|
||||
version: 1
|
||||
};
|
||||
|
||||
async saveContent(){
|
||||
try {
|
||||
const editorContent = await this.editorRef.getEditorContent();
|
||||
// do some stuff with editor content
|
||||
} catch (error) {
|
||||
// catch error
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| -------- | ------------ | ------------- | -------------------------------------------------------------------------------------------- |
|
||||
| data | `OutputData` | null | EditorJs data format (follow the [official documentation](https://editorjs.io/saving-data) ) |
|
||||
| readOnly | `boolean` | false | If true users won't have the ability to change the document content |
|
||||
@@ -73,6 +73,7 @@ The [`Form`](../../../lib/process-services/src/lib/task-list/models/form.model.t
|
||||
| Checkbox | "boolean" | [`CheckboxWidgetComponent`](../../../lib/core/form/components/widgets/checkbox/checkbox.widget.ts) |
|
||||
| Date | "date" | [`DateWidgetComponent`](../../../lib/core/form/components/widgets/date/date.widget.ts) |
|
||||
| Display text | "readonly-text" | [`DisplayTextWidgetComponentComponent`](../../../lib/core/form/components/widgets/display-text/display-text.widget.ts) |
|
||||
| Display Rich text | "display-rich-text" | [`DisplayRichTextWidgetComponent`](../../../lib/core/form/components/widgets/display-rich-text/display-rich-text.widget.ts) |
|
||||
| Display value | "readonly" | DisplayValueWidgetComponent |
|
||||
| Dropdown | "dropdown" | [`DropdownWidgetComponent`](../../../lib/core/form/components/widgets/dropdown/dropdown.widget.ts) |
|
||||
| Dynamic table | "dynamic-table" | [`DynamicTableWidgetComponent`](../../../lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.ts) |
|
||||
|
||||
Reference in New Issue
Block a user