# ckeditor5-custom-build-reach

> A custom build on top of the classic editor of CKEditor 5.

Latest version **0.2.0** (published 2020-05-19) · GPL-2.0-or-later license · 0 weekly downloads

## Install

```sh
npm install ckeditor5-custom-build-reach
pnpm add ckeditor5-custom-build-reach
yarn add ckeditor5-custom-build-reach
bun add ckeditor5-custom-build-reach
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2020-05-19 |
| First published | 2020-05-19 |
| Weekly downloads | 0 |
| License | GPL-2.0-or-later |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.0.0 |
| Dependencies | 0 |
| Unpacked size | 5.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 140 |
| Author | CKSource |
| Maintainers | davinotdavid |
| Keywords | ckeditor5-build, ckeditor, ckeditor5, ckeditor 5, wysiwyg, rich text, editor, html, contentEditable, editing, operational transformation, ot, collaboration, collaborative, real-time, framework |

## Links

- npm: https://www.npmjs.com/package/ckeditor5-custom-build-reach
- Repository: https://github.com/ckeditor/ckeditor5-build-classic
- Homepage: https://ckeditor.com/ckeditor-5
- Issues: https://github.com/ckeditor/ckeditor5/issues
- npm.io page: https://npm.io/package/ckeditor5-custom-build-reach

## 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.2.0 (latest) — 2020-05-19
- 0.1.0 — 2020-05-19

## README

# ckeditor5-custom-build-reach

See it live [here](https://ckeditor5-custom-build-reach.netlify.app/).

This is a custom build of CKEditor 5 based off of the [Classic Editor](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor). It is meant to use paired with the [official React component](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html).

The [original documentation](https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html) stands true for the most part. For the part that it differs, it will be highlighted in this README.

- Added custom plugin / toolbar button for handling images from URL. It uses a `prompt()` as an input for the image URL.

--

## Quick start

Add it to your project:

```bash
npm install @ckeditor/ckeditor5-react ckeditor5-custom-build-reach
```

And use it as a component like so:

```code
import CKEditor from '@ckeditor/ckeditor5-react';
import CKEditorReach from 'ckeditor5-custom-build-reach';

<CKEditor
  editor={ CKEditorReach }
  data="<p>Hello from CKEditor 5!</p>"
  onInit={ editor => {
    // You can store the "editor" and use when it is needed.
    console.log( 'Editor is ready to use!', editor );
  } }
  onChange={ ( event, editor ) => {
    const data = editor.getData();
    console.log( { event, editor, data } );
  } }
  onBlur={ ( event, editor ) => {
    console.log( 'Blur.', editor );
  } }
  onFocus={ ( event, editor ) => {
    console.log( 'Focus.', editor );
  } }
/>
```

## Development

Clone the repo and run

```bash
npm install
```

Add a new file with your plugin to the folder `src/customPlugins` and update `src/ckeditor.js` to include your plugin:

```code
// src/ckeditor.js
// ...

// Custom plugins
import InsertImageFromURL from './customPlugins/insertImageFromURL';
import MyNewFancyPlugin from './customPlugins/myNewFancyPlugin';

ClassicEditor.builtinPlugins = [
  // ...

  // From here, these are all custom plugins
  InsertImageFromURL,
  MyNewFancyPlugin
];

ClassicEditor.defaultConfig = {
  toolbar: {
    items: [
      // ...
      
      'insertImageFromURL',

      // This name has to be the same as the first parameter
      // of the call to editor.ui.componentFactory.add('<ADD_NAME_HERE>')
      // in ./customPlugins/myNewFancyPlugin.js
      'myNewFancyPlugin',
    ]
  }
}
```

## License (imported from the original repo)

Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html). For full details about the license, please check the `LICENSE.md` file or [https://ckeditor.com/legal/ckeditor-oss-license](https://ckeditor.com/legal/ckeditor-oss-license).

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