# widenarrow.texteditor

> TextEditor build to be used in Infodesk clients

Latest version **1.0.16** (published 2026-04-08) · SEE LICENSE IN LICENSE.md license · 0 weekly downloads

## Install

```sh
npm install widenarrow.texteditor
pnpm add widenarrow.texteditor
yarn add widenarrow.texteditor
bun add widenarrow.texteditor
```

## Health

**Score 50/100 (C)** — status: active.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.0.16 |
| Published | 2026-04-08 |
| First published | 2024-01-30 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE.md |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 17 |
| Unpacked size | 6 MB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | widenarrow |

## Links

- npm: https://www.npmjs.com/package/widenarrow.texteditor
- npm.io page: https://npm.io/package/widenarrow.texteditor

## Dependencies (17)

- [@ckeditor/ckeditor5-font](https://npm.io/package/@ckeditor/ckeditor5-font.md) 41.0.0
- [@ckeditor/ckeditor5-link](https://npm.io/package/@ckeditor/ckeditor5-link.md) 41.0.0
- [@ckeditor/ckeditor5-list](https://npm.io/package/@ckeditor/ckeditor5-list.md) 41.0.0
- [@ckeditor/ckeditor5-undo](https://npm.io/package/@ckeditor/ckeditor5-undo.md) 41.0.0
- [@ckeditor/ckeditor5-table](https://npm.io/package/@ckeditor/ckeditor5-table.md) 41.0.0
- [@ckeditor/ckeditor5-typing](https://npm.io/package/@ckeditor/ckeditor5-typing.md) 41.0.0
- [@ckeditor/ckeditor5-heading](https://npm.io/package/@ckeditor/ckeditor5-heading.md) 41.0.0
- [@ckeditor/ckeditor5-alignment](https://npm.io/package/@ckeditor/ckeditor5-alignment.md) 41.0.0
- [@ckeditor/ckeditor5-clipboard](https://npm.io/package/@ckeditor/ckeditor5-clipboard.md) 41.0.0
- [@ckeditor/ckeditor5-paragraph](https://npm.io/package/@ckeditor/ckeditor5-paragraph.md) 41.0.0
- [@ckeditor/ckeditor5-essentials](https://npm.io/package/@ckeditor/ckeditor5-essentials.md) 41.0.0
- [@ckeditor/ckeditor5-basic-styles](https://npm.io/package/@ckeditor/ckeditor5-basic-styles.md) 41.0.0
- [@ckeditor/ckeditor5-html-support](https://npm.io/package/@ckeditor/ckeditor5-html-support.md) 41.0.0
- [@ckeditor/ckeditor5-remove-format](https://npm.io/package/@ckeditor/ckeditor5-remove-format.md) 41.0.0
- [@ckeditor/ckeditor5-editor-classic](https://npm.io/package/@ckeditor/ckeditor5-editor-classic.md) 41.0.0
- [@ckeditor/ckeditor5-horizontal-line](https://npm.io/package/@ckeditor/ckeditor5-horizontal-line.md) 41.0.0
- [@ckeditor/ckeditor5-paste-from-office](https://npm.io/package/@ckeditor/ckeditor5-paste-from-office.md) 41.0.0

## Recent versions

- 1.0.16 (latest) — 2026-04-08
- 1.0.15 — 2026-03-19
- 1.0.13 — 2026-02-02
- 1.0.12 — 2026-02-02
- 1.0.11 — 2025-11-04
- 1.0.10 — 2025-11-03
- 1.0.9 — 2025-10-09
- 1.0.8 — 2025-08-20
- 1.0.7 — 2025-02-05
- 1.0.6 — 2025-02-04
- 1.0.5 — 2024-10-31
- 1.0.4 — 2024-10-31
- 1.0.3 — 2024-05-24
- 1.0.2 — 2024-05-24
- 1.0.1 — 2024-01-30
- … 1 more at https://npm.io/package/widenarrow.texteditor/versions

## README

# 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](https://ckeditor.com/ckeditor-5/online-builder).

## 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](https://ckeditor.com/docs/ckeditor5/latest/installation/index.html).

## 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):
   ```bash
   npm run build
   ```

2. **Start the development server:**
   ```bash
   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](https://ckeditor.com/docs/ckeditor5/latest/framework/architecture/ui-components.html#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](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html#adding-a-plugin-to-an-editor)


### Rebuilding editor

If you have already done the [Installation](#installation) and [Adding or removing plugins](#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
```

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