@ngodings/ngx-editor

Angular package for Editor, easy to use (Support Mention & Tagging) from ckeditor5

Demo - Angular v15

https://npm.ngodings.com/packages/ngx-editor

Support Me

If you like this package I will be happy that you support me on Buy me a coffee :)
Buy me coffee: https://www.buymeacoffee.com/alidihaw
Indonesia People: https://sociabuzz.com/dihaw

Getting Started

Installing and Importing

Install the package by command:

 npm install @ngodings/ngx-editor --save

Import the module

import { NgxEditorModule } from "@ngodings/ngx-editor";

@NgModule({
    imports: [
        ...
        NgxEditorModule
    ],
    declarations: [...],
    providers: [...]
})
export class AppModule {}

Set types editor - inside src folder - create file types.d.ts

declare module '@ngodings/ckeditor5' {
    const ClassicEditorBuild: any;

    export default ClassicEditorBuild;
}

Usage

Editor (Support Tagging # & Mention @)

<ngx-editor [(data)]="text" [tags]="tags" [mentions]="mentions"></ngx-editor>

Editor Simple

<ngx-editor [(data)]="text" [tags]="tags" [mentions]="mentions" [isSimple]="true"></ngx-editor>

Option (Input & Output)

name	description	default value
data	text data
tags	Data tags trigger by @	[]
mentions	Data mentions trigger by @	[]
isSimple	Simple Toolbar	false
dataChange	Callback text data

Editor View Result

<ngx-view-editor [data]="text"></ngx-view-editor>

Option (Input & Output)

name	description	default value
data	text data
customClass	Custom view inner html

Development

Prepare your environment

• Install Node.js and NPM
• Install local dev dependencies: npm install while current directory is this repo

License

MIT @ Ali Abdul Wahid