Editor
A rich text editor for Angular based on @atlaskit/editor-core
.
Installation
Install the package from NPM
npm install @zodiac-ui/editor
Peer Dependencies
Zodiac Editor has a number of peer dependencies depending on which features are needed.
Core Dependencies
npm install
prosemirror-collab@^1.1.1
prosemirror-commands@^1.0.7
prosemirror-history@^1.0.4
prosemirror-inputrules@^1.0.1
prosemirror-keymap@^1.0.1
prosemirror-model@^1.7.0
prosemirror-schema-basic@^1.0.0
prosemirror-state@^1.2.2
prosemirror-tables"@0.7.10
prosemirror-transform@^1.1.3
prosemirror-utils@^0.7.7
prosemirror-view@^1.8.3
LinkModule Dependencies
LinkModule
requires LinkifyIt
to be installed
npm install linkify-it@^2.1.0
CodeModule Dependencies
CodeModule
requires CodeMirror
to be installed
npm install codemirror@^5.45.0
For CodeMirror mode support, add the following styles and assets to your project in angular.json
{
"assets": [
{
"input": "node_modules/codemirror",
"glob": "**/*.js",
"output": "/assets"
}
],
"styles": [
"node_modules/codemirror/lib/codemirror.css"
]
}
CSS
TBA
Basic Usage
Import the editor module
@NgModule({
imports: [EditorModule]
})
export class BasicEditorModule {}
Add this tag to your component template
<z-editor></z-editor>
Features can be added through additional modules
@NgModule({
imports: [
EditorModule,
LinkModule,
HeadingModule,
BlockquoteModule,
AlignmentModule,
HardBreakModule,
BlockTypeModule,
TextFormattingModule,
CodeModule,
HorizontalRuleModule
]
})
export class KitchenSinkEditorModule {}
Documents can be loaded by passing in a serialised ProseMirror
state object
<z-editor [state]="state" (stateChange)="save($event)"></z-editor>
@Component({ ... })
export class BasicEditorComponent {
state = {
doc: {
content: [],
type: "doc"
},
selection: {
type: "text",
anchor: 1,
head: 1
}
}
save(event: Editor) {
console.log(event)
}
}
Changes to the document or selection can be observed through the stateChange
event
Toolbar
For convenience, Zodiac editor exports toolbar components built with Angular Material and FontAwesome. Some additional dependencies and config are required.
npm install @angular/material@~7.2.2 @fortawesome/fontawesome-free@^5.8.1
Add the following project config to angular.json
{
"styles": [
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css", // or another theme
"node_modules/@fortawesome/fontawesome-free/css/all.css",
],
"scripts": [
"node_modules/hammerjs/hammer.min.js"
]
}
Now you can add the toolbar to your app
@NgModule({
imports: [
...
EditorModule,
EditorToolbarModule,
]
})
<z-editor-toolbar [editor]="editor"></z-editor-toolbar>
<z-editor #editor></z-editor>
This will render an empty toolbar. Add some tools to it.
@NgModule({
imports: [
...
EditorModule,
EditorToolbarModule,
StrongToolModule,
AlignmentToolModule,
EmphasisToolModule,
UnderlineToolModule,
SuperscriptToolModule,
SubscriptToolModule,
StrikeToolModule,
LinkToolModule,
CodeToolModule,
HeadingToolModule,
]
})
<z-editor-toolbar [editor]="editor">
<z-heading-tool></z-heading-tool>
<z-strong-tool></z-strong-tool>
<z-emphasis-tool></z-emphasis-tool>
<z-underline-tool></z-underline-tool>
<z-alignment-tool></z-alignment-tool>
<z-superscript-tool></z-superscript-tool>
<z-subscript-tool></z-subscript-tool>
<z-strike-tool></z-strike-tool>
<z-link-tool></z-link-tool>
</z-editor-toolbar>
<z-editor #editor></z-editor>
To create your own tools, toolbars or floating panels, refer to Advanced Usage.
Advanced Usage
API
CodeModule
Ensure you've installed peer dependencies before using this module
imports: [
CodeModule.configure(config)
]
config: CodeModuleConfig
Option | Description |
---|---|
modeURL | File pattern to load mode dependencies from |
extraModes | Additional metadata to append to modeInfo |
Support for Angular language mode is available here. Copy this file to
your assets folder (eg. assets/modes/angular/angular.js
)