https://github.com/aitorllj93/ngx-codex
Angular editor.js component with custom components support.
https://github.com/aitorllj93/ngx-codex
angular editorjs
Last synced: about 1 year ago
JSON representation
Angular editor.js component with custom components support.
- Host: GitHub
- URL: https://github.com/aitorllj93/ngx-codex
- Owner: aitorllj93
- License: mit
- Created: 2020-03-28T19:52:48.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T02:40:09.000Z (over 3 years ago)
- Last Synced: 2025-03-01T17:18:42.149Z (over 1 year ago)
- Topics: angular, editorjs
- Language: HTML
- Homepage: https://d3v0ps.github.io/ngx-codex
- Size: 4.49 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# ngx-codex
[](https://www.npmjs.com/package/ngx-codex)
[](https://d3v0ps.github.io/ngx-codex)
Angular [editor.js](https://editorjs.io/) component with ControlValueAccesorTool Support.
Implements `ControlValueAccesor`.
[Demo](https://d3v0ps.github.io/ngx-codex)
## Getting Started
### 1. Install packages
```sh
npm i @editorjs/editorjs
npm i ngx-codex
```
### 2. Import Module
```typescript
import { NgxCodexModule } from 'ngx-codex';
@NgModule({
declarations: [AppComponent],
imports: [
FormsModule,
NgxCodexModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
```
### 3. Load editor.js tools
```typescript
import Header from '@editorjs/header';
const myEditorTools = {
header: {
class: Header,
shortcut: 'CMD+SHIFT+H',
config: {
placeholder: 'Enter a header'
}
}
}
```
### 4. Include the component
```html
```
## Inputs
| name | description |
| ---- | ----------- |
| tools | EditorJS Tools. [See editor.js configuration](https://editorjs.io/configuration) |
## Tips
### Loading Angular Components
```ts
import { Component, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { ControlValueAccesorTool } from 'ngx-codex';
import { NgxBPMNModelerComponent } from 'ngx-bpmn-modeler';
export class BPMNTool extends ControlValueAccesorTool {
static get toolbox() {
return {
title: 'BPMN',
icon: `
`
};
}
}
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
title = 'testing';
codex = {
content: null,
tools: {
bpmn: {
class: BPMNTool,
config: {
getFactoryResolver: () => this.factoryResolver,
getContainerRef: () => this.containerRef,
component: BPMNModelerComponent,
inputs: {
wrapperClass: 'bpmn-wrapper',
containerClass: 'bpmn-container',
propertiesClass: 'bpmn-properties'
}
}
},
}
};
constructor(
private factoryResolver: ComponentFactoryResolver,
private containerRef: ViewContainerRef,
) {}
}
```