WideNarrow.TextEditor

This repo contains the CKEditor build used by WN applications.

CKEditor 5 editor generated with the online builder

This repository presents a tweaked CKEditor 5 editor build generated by the Online builder tool.

Installation

npm install widenarrow.texteditor @ckeditor/ckeditor5-react

React

Using this build in React is easy!

1. Install the npm package @ckeditor/ckeditor5-react
2. Import the component and widenarrow.texteditor from this repo in your file, assigning the Editor to the editor prop.
3. Import the styling override file styles.css.
4. To include translations files as well, import them from the translations folder in the build (editor is in english by default, no need to import that).

import { CKEditor } from '@ckeditor/ckeditor5-react';
import Editor from 'widenarrow.texteditor';
import 'widenarrow.texteditor/build/styles.css';
import 'widenarrow.texteditor/build/translations/sv';

<CKEditor
    editor={Editor}
    data={value}
    ... 
    />

You can then change the configuration according to your preferences. Full guides and help can be found in CKEditor 5 documentation.

Development

1. Open the sample/index.html page in the browser.
2. Edit the styles.css to overwrite the inherit styling in the CkEditor (!important is your friend)
3. Configure the ckeditor.ts to change imported plugins and default toolbar layout.
4. To change the icons, go into webpack.config.js and add the name of the icons you wish to replace to the customCKEditorIcons array. A list of all icons can be found here.

Installation

Adding or removing plugins

Now you can install additional plugin in the build. Just follow the Adding a plugin to an editor tutorial

Rebuilding editor

If you have already done the Installation and Adding or removing plugins steps, you're ready to rebuild the editor by running the following command:

npm install
npm run build

This will build the CKEditor 5 to the build directory. You can open your browser and you should be able to see the changes you've made in the code. If not, then try to refresh also the browser cache by typing Ctrl + R or Cmd + R depending on your system.

Publish to npm

Make sure the version in package.json is bumped. Publishing should always be made from master branch.

npm login

You need login information for npm (contact a collaborator). Type in these credentials now.

npm publish