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

To develop and test changes to the editor before publishing to npm:

Running the development server

1. Build the editor (if not already built):

   npm run build

2. Start the development server:

   npm run sample

3. Open your browser and navigate to http://localhost:8080/sample/index.html

The development server serves the built editor files and sample HTML page so you can see your changes in action. The editor will initialize with all the plugins and toolbar configured in src/ckeditor.ts.

Making changes

The editor is built from source and configured in several places:

1. Plugin configuration (src/ckeditor.ts):

   • Add or remove plugins in the builtinPlugins array
   • Configure the toolbar items in the defaultConfig.toolbar.items array
   • Set default configuration for features (table, htmlSupport, etc.)

2. Styling (sample/styles.css):

   • Edit the CSS to customize the editor's appearance
   • Use !important to override CKEditor's default styles if needed

3. Icons (webpack.config.js):

   • Add icon names to the customCKEditorIcons array to replace them with custom SVGs
   • Place your custom SVG files in src/icons/
   • Full list of available icons

4. Test page (sample/index.html and sample/script.js):

   • Modify the HTML structure in index.html
   • Update the editor initialization in script.js (must include licenseKey: 'GPL' for open source projects)

Important: After making changes to any source files, rebuild with npm run build and refresh your browser to see the changes.

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