@spendit-dev/editor v0.0.51-canary

Editor

A simple rich text editor using CKEditor.

Demo

Demo

Specification Summary

- Toolbar Custom: X

- Responsive Toolbar: O

- Changing ReadOnly or Edit Mode:O

- Language: 'ko' | 'en'

- Editor Auto Height: X

- Editor Manual Height: O

- Editor Diff Mode: O

How to use

1. Install

npm install @spendit-dev/editor or
yarn add @spendit-dev/editor

2. Import

import '@spendit-dev/editor/default.css';
import '@spendit-dev/editor/editor.css';
import { initEditor, initEditorSizingButton } from '@spendit-dev/editor';

3. Initialize

const {editor} = await initEditor({
    targetId: 'sample-editor',
    lang: 'en',
    initialData: '<p>test</p>',
    onContentChange: (content: string) => {
        console.log('change', content);
    },
    debounceDelay: 500,
    onBlur: (content:string) => {
        console.log('blur', content);
    },
    onFocus: (bool:boolean) => {
        console.log('focus', bool);
    },
});

// if you want to use manual editor heignt sizing button add the following code.
initEditorSizingButton({
    editor,
    sizingButtonPosition: 'inner',
    resizeButtonCallback: (currentHeight: number) => {
        console.log('currentHeight', currentHeight);
    },
});

// html
<div id="sample-editor"></div>

4. Set Read Only Mode

you can make the editor read-only mode by using the following code.

  const handleReadonlyEvent = (readonly: boolean) => {
    if (readonly) {
        editor.enableReadOnlyMode('targetId');
        editor.ui.view.toolbar.element!.style.display = 'none';
    } else {
        editor.disableReadOnlyMode('targetId');
        editor.ui.view.toolbar.element!.style.display = 'block';
    }
};

5. Destroy Editor

editor.destroy();

6. Get Content From Editor

const content = editor.getData();

7. Set Content To Editor

editor.setData('<p>test</p>');

8. Diff Mode Editor

await initDiffModeEditor({
    targetId: 'sample-diff-editor',
    lang: 'en',
    textPrevious: '<p>test removed this</p>',
    textCurrent: '<p>test added this</p>',
});

// html
<div id="sample-diff-editor"></div>

9. Else

editor instance is CKEditor instance. you can find more API in the CKEditor documentation.

API for spendit-editor

Func: initEditor()

Returns of initEditor()

Func: initEditorSizingButton()

Func: initDiffModeEditor()

Returns of initDiffModeEditor()

Typescript Error

If you get a typescript error, you can add the following code to your type.d.ts file.

declare module '@spendit-dev/editor';

and you also need to add the following code to your tsconfig.json file.

{
    "compilerOptions": {
        "typeRoots": ["your type.d.ts path"],
        "types": ["@spendit-dev/editor"]
    }
}

This Editor isn't very open to customization. If you want to customize it, I'd recommend forking this repository and modifying it.