A Custom Ckeditor5 Balloon Build

Original upstream repository.

The motivation to fork and create our own Ckeditor build is a better user experience. The needs are tailored to our own use case so I have no plan to create PR at least in the short term, but the UX principles behind these add-ons and improvement in this repo are universe. (see the heuristics introduced by Nielsen)

That said, I'll fetch from upstream from time to time to ensure the core engine are up to date.

What did we add on top of the original Ckeditor upstream?

• Some official Ckeditor plugin that are not included in balloon editor
  • Alignment
  • Strikethrough
  • Code
• Some useful plugins written by me
  • Add image by url
  • Keyborad shortcut: for headings, bullet points (strikethrough already built-in, ctrl+shift+x). In gernal following the keymap of Google Doc. Improvement based on the heuristics - Flexibility and efficiency of use.
• Some custom config to enpower the plugins and improve user experience ❤️️️️
  • Standard 4-level headings plus a paragraph.
  • Alignment options

Relevant repository

• Our custom Ckeditor React build. This Ckeditor React repository serves like an adapter between vanilla Ckeditor and the React framework, that means you can switch the vanilla Ckeditor5 part with any other variant you want - say it's the offical or somebody else custom build like this repo.
• User facing apps
  • Appl Tracky. Written in React, this frontend SPA uses this repo as a npm package with our custom balloon build mentioned above.
  • Iriversland2 - my personal website which use Ckeditor. Uses my custom build of Ckeditor balloon editor in this repo.

Logics for this forked repo

How to update upstream

You first have to set up upstream repo.

git remote add upstream https://github.com/ckeditor/ckeditor5-build-balloon.git
git fetch upstream
git checkout master # this repo's master
git merge upstream/stable

How to update code and release to npm

1. Commit code in git, give commit message.
2. Run npm run patch-publish.

How to publish to npm (only the first time when package.json release command not yet set)

• See this post.
• How to create public, scoped package? npm publish --access public. See this npm official page.
• If failed in Angualr, consider build ckeditor using es5. See instructions.

Documentation

The balloon editor build for CKEditor 5. Read more about the balloon editor build and see the demo.

See the details at ckeditor repo.

See:

• Installation for how to install this package and what it contains.
• Basic API for how to create an editor and interact with it.
• Configuration for how to configure the editor.
• Creating custom builds for how to customize the build (configure and rebuild the editor bundle).

Quick start

See details at ckeditor 5 repo.

Note: If you are planning to integrate CKEditor 5 deep into your application, it is actually more convenient and recommended to install and import the source modules directly (like it happens in ckeditor.js). Read more in the Advanced setup guide.

License

See the details at ckeditor repo.