# @ckeditor5-custom-build/decoupled-document-editor

> A custom CKEditor 5 build with custom uploadAdapter

Latest version **0.1.4** (published 2021-11-20) · SEE LICENSE IN LICENSE.md license · 0 weekly downloads

## Install

```sh
npm install @ckeditor5-custom-build/decoupled-document-editor
pnpm add @ckeditor5-custom-build/decoupled-document-editor
yarn add @ckeditor5-custom-build/decoupled-document-editor
bun add @ckeditor5-custom-build/decoupled-document-editor
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2021-11-20 |
| First published | 2021-11-13 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE.md |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Hamidreza Behzadi |
| Maintainers | hamid.bhz |
| Keywords | ckeditor, ckeditor5, ckeditor 5, ckeditor5-feature, ckeditor5-plugin, ckeditor5-react, ckeditor5-custom, ckeditor5-custom-build, uploadAdapter |

## Links

- npm: https://www.npmjs.com/package/@ckeditor5-custom-build/decoupled-document-editor
- Repository: https://github.com/hamid-bhz/ckeditor5-custom-build
- Homepage: https://github.com/hamid-bhz/ckeditor5-custom-build#readme
- Issues: https://github.com/hamid-bhz/ckeditor5-custom-build/issues
- npm.io page: https://npm.io/package/@ckeditor5-custom-build/decoupled-document-editor

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.1.4 (latest) — 2021-11-20
- 0.1.3 — 2021-11-15
- 0.1.2 — 2021-11-13
- 0.1.1 — 2021-11-13

## README

# CKEditor 5 custom build

A custom CKEditor 5 build with custom uploadAdapter

## Installation

`npm i @ckeditor5-custom-build/decoupled-document-editor`

Or

`yarn add @ckeditor5-custom-build/decoupled-document-editor`

Or add this package to your `package.json` file:

```
"dependencies": {
  "@ckeditor5-custom-build/decoupled-document-editor": "0.1.4"
}
```

## Plugins

```javascript
[
  Alignment,
  Autoformat,
  Bold,
  Essentials,
  FontBackgroundColor,
  FontColor,
  FontFamily,
  FontSize,
  Heading,
  Image,
  ImageCaption,
  ImageResize,
  ImageStyle,
  ImageToolbar,
  ImageUpload,
  Indent,
  IndentBlock,
  Italic,
  Link,
  List,
  ListStyle,
  Paragraph,
  PasteFromOffice,
  Table,
  TableCellProperties,
  TableProperties,
  TableToolbar,
  TextTransformation,
  Underline,
];
```

## Usage

```javascript
import { CKEditor } from "@ckeditor/ckeditor5-react";
import DecoupledDocumentEditor from "@ckeditor5-custom-build/decoupled-document-editor";

const Editor = () => {
  function uploadAdapter(loader) {
    return {
      upload: () => {
        return new Promise((resolve, reject) => {
          loader.file.then((file) => {
            console.log("file", file);
            // if you want to upload file to your server
            axios
              .post("YOUR_SERVER_ADDRESS")
              .then((res) => {
                resolve({
                  default: `FILE_ADDRESS`,
                });
              })
              .catch((err) => {
                reject(err);
              });
          });
        });
      },
    };
  }

  function uploadPlugin(editor) {
    editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
      return uploadAdapter(loader);
    };
  }

  return (
    <CKEditor
      name="editor"
      editor={DecoupledDocumentEditor}
      data=""
      onReady={(editor) => {
        editor.ui
          .getEditableElement()
          .parentElement.insertBefore(
            editor.ui.view.toolbar.element,
            editor.ui.getEditableElement()
          );
      }}
      onChange={(event, editor) => {
        const data = editor.getData();
        console.log(data);
      }}
      config={{
        extraPlugins: [uploadPlugin],
      }}
    />
  );
};
```

---
_Source: https://npm.io/package/@ckeditor5-custom-build/decoupled-document-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._