Catalog npm
Back to packageRELEASE DETAILS

0.0.5

npm

87-midnight-ckeditor5

A custom CKEditor 5 build made by the CKEditor 5 online builder.

ckeditor5reactvue3
Published3 Sept 2023
Direct dependencies50
Transitive dependenciesNot calculated

README

Current package documentation

CKEditor 5 editor generated with the online builder

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

Quick start

  1. Open the sample/index.html page in the browser.

  2. Fill the prompt with the license key. If you do not have the license key yet contact us.

Configuring build

Changes like changing toolbar items, changing order of icons or customizing plugin configurations should be relatively easy to make. Open the sample/index.html file and edit the script that initialized the CKEditor 5. Save the file and refresh the browser. That's all.

Note: If you have any problems with browser caching use the Ctrl + R or Cmd + R shortcut depending on your system.

However if you want to remove or add a plugin to the build you need to follow the next step of this guide.

Note that it is also possible to go back to the Online builder tool and pick other set of plugins. But we encourage you to try the harder way and to learn the principles of Node.js and CKEditor 5 ecosystems that will allow you to do more cool things in the future!

Installation

In order to rebuild the application you need to install all dependencies first. To do it, open the terminal in the project directory and type:

npm install

Make sure that you have the node and npm installed first. If not, then follow the instructions on the Node.js documentation page.

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 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.

What's next?

Follow the guides available on https://ckeditor.com/docs/ckeditor5/latest/framework/index.html and enjoy the document editing.

usage

import Editor from '87-midnight-ckeditor5'

const App = ()=>{
    return 
    (
        <CKEditor
                    editor={ Editor }
                    data="<p>Hello from CKEditor&nbsp;5!</p>"
                    onReady={ (editor:Editor) => {
                        console.log( 'Editor is ready to use!', editor );
                    } }
                    onChange={ ( event:any, editor:Editor ) => {
                        const data = editor.getData();
                        console.log( { event, editor, data } );
                    } }
                    onBlur={ ( event:any, editor:Editor ) => {
                        console.log( 'Blur.', editor,event );
                    } }
                    onFocus={ ( event:any, editor:Editor ) => {
                        console.log( 'Focus.', editor ,event);
                    } }
                />
    )
}

changelog

v0.0.4

install math plugin by using @isaul32/ckeditor5-math

see @isaul32/ckeditor5-math for more details

usage:

const defaultConfig = {
	// ...
	math: {
		engine: 'mathjax', // or katex or function. E.g. (equation, element, display) => { ... }
		lazyLoad: undefined, // async () => { ... }, called once before rendering first equation if engine doesn't exist. After resolving promise, plugin renders equations.
		outputType: 'script', // or span
		className: 'math-tex', // class name to use with span output type, change e.g. MathJax processClass (v2) / processHtmlClass (v3) is set
		forceOutputType: false, // forces output to use outputType
		enablePreview: true, // Enable preview view
		previewClassName: [], // Class names to add to previews
		popupClassName: [], // Class names to add to math popup balloon
		katexRenderOptions: {}  // KaTeX only options for katex.render(ToString)
	}
}

FAQ

| Where is the place to report bugs and feature requests?

You can create an issue on https://github.com/ckeditor/ckeditor5/issues including the build id - udd234h0crk2-15fqjz4t6i9l. Make sure that the question / problem is unique, please look for a possibly asked questions in the search box. Duplicates will be closed.

| Where can I learn more about the CKEditor 5 framework?

Here: https://ckeditor.com/docs/ckeditor5/latest/framework/

| Is it possible to use online builder with common frameworks like React, Vue or Angular?

Not yet, but it these integrations will be available at some point in the future.

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 50

Native requirements
50 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
@ckeditor/ckeditor5-alignment
Environment
{
  "local_name": "@ckeditor/ckeditor5-alignment",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-autoformat
Environment
{
  "local_name": "@ckeditor/ckeditor5-autoformat",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-autosave
Environment
{
  "local_name": "@ckeditor/ckeditor5-autosave",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-basic-styles
Environment
{
  "local_name": "@ckeditor/ckeditor5-basic-styles",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-block-quote
Environment
{
  "local_name": "@ckeditor/ckeditor5-block-quote",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-cloud-services
Environment
{
  "local_name": "@ckeditor/ckeditor5-cloud-services",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-code-block
Environment
{
  "local_name": "@ckeditor/ckeditor5-code-block",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-editor-classic
Environment
{
  "local_name": "@ckeditor/ckeditor5-editor-classic",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-essentials
Environment
{
  "local_name": "@ckeditor/ckeditor5-essentials",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-find-and-replace
Environment
{
  "local_name": "@ckeditor/ckeditor5-find-and-replace",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-font
Environment
{
  "local_name": "@ckeditor/ckeditor5-font",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-heading
Environment
{
  "local_name": "@ckeditor/ckeditor5-heading",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-highlight
Environment
{
  "local_name": "@ckeditor/ckeditor5-highlight",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-horizontal-line
Environment
{
  "local_name": "@ckeditor/ckeditor5-horizontal-line",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-html-embed
Environment
{
  "local_name": "@ckeditor/ckeditor5-html-embed",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-html-support
Environment
{
  "local_name": "@ckeditor/ckeditor5-html-support",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-image
Environment
{
  "local_name": "@ckeditor/ckeditor5-image",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-indent
Environment
{
  "local_name": "@ckeditor/ckeditor5-indent",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-language
Environment
{
  "local_name": "@ckeditor/ckeditor5-language",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-link
Environment
{
  "local_name": "@ckeditor/ckeditor5-link",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-list
Environment
{
  "local_name": "@ckeditor/ckeditor5-list",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-media-embed
Environment
{
  "local_name": "@ckeditor/ckeditor5-media-embed",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-mention
Environment
{
  "local_name": "@ckeditor/ckeditor5-mention",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-page-break
Environment
{
  "local_name": "@ckeditor/ckeditor5-page-break",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-paragraph
Environment
{
  "local_name": "@ckeditor/ckeditor5-paragraph",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-paste-from-office
Environment
{
  "local_name": "@ckeditor/ckeditor5-paste-from-office",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-remove-format
Environment
{
  "local_name": "@ckeditor/ckeditor5-remove-format",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-restricted-editing
Environment
{
  "local_name": "@ckeditor/ckeditor5-restricted-editing",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-select-all
Environment
{
  "local_name": "@ckeditor/ckeditor5-select-all",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-show-blocks
Environment
{
  "local_name": "@ckeditor/ckeditor5-show-blocks",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-source-editing
Environment
{
  "local_name": "@ckeditor/ckeditor5-source-editing",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-special-characters
Environment
{
  "local_name": "@ckeditor/ckeditor5-special-characters",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-style
Environment
{
  "local_name": "@ckeditor/ckeditor5-style",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-table
Environment
{
  "local_name": "@ckeditor/ckeditor5-table",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-typing
Environment
{
  "local_name": "@ckeditor/ckeditor5-typing",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-word-count
Environment
{
  "local_name": "@ckeditor/ckeditor5-word-count",
  "alias": false,
  "peer_metadata": null
}
39.0.1runtime
@ckeditor/ckeditor5-dev-translations
Environment
{
  "local_name": "@ckeditor/ckeditor5-dev-translations",
  "alias": false,
  "peer_metadata": null
}
^32.1.2development
@ckeditor/ckeditor5-dev-utils
Environment
{
  "local_name": "@ckeditor/ckeditor5-dev-utils",
  "alias": false,
  "peer_metadata": null
}
^32.1.2development
@ckeditor/ckeditor5-theme-lark
Environment
{
  "local_name": "@ckeditor/ckeditor5-theme-lark",
  "alias": false,
  "peer_metadata": null
}
^39.0.1development
@isaul32/ckeditor5-math
Environment
{
  "local_name": "@isaul32/ckeditor5-math",
  "alias": false,
  "peer_metadata": null
}
^39.0.1development
css-loader
Environment
{
  "local_name": "css-loader",
  "alias": false,
  "peer_metadata": null
}
^5.2.7development
postcss
Environment
{
  "local_name": "postcss",
  "alias": false,
  "peer_metadata": null
}
^8.4.27development
postcss-loader
Environment
{
  "local_name": "postcss-loader",
  "alias": false,
  "peer_metadata": null
}
^4.3.0development
raw-loader
Environment
{
  "local_name": "raw-loader",
  "alias": false,
  "peer_metadata": null
}
^4.0.2development
style-loader
Environment
{
  "local_name": "style-loader",
  "alias": false,
  "peer_metadata": null
}
^2.0.0development
terser-webpack-plugin
Environment
{
  "local_name": "terser-webpack-plugin",
  "alias": false,
  "peer_metadata": null
}
^4.2.3development
ts-loader
Environment
{
  "local_name": "ts-loader",
  "alias": false,
  "peer_metadata": null
}
^9.4.4development
typescript
Environment
{
  "local_name": "typescript",
  "alias": false,
  "peer_metadata": null
}
^4.9.5development
webpack
Environment
{
  "local_name": "webpack",
  "alias": false,
  "peer_metadata": null
}
^5.88.2development
webpack-cli
Environment
{
  "local_name": "webpack-cli",
  "alias": false,
  "peer_metadata": null
}
^4.10.0development

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "integrity": "sha512-4d/ZfTTDi1gK03GtzK/c8YemNVCGtfiVI2PeEP0RVn2Wj226brvbHZe2oLZ+iWFrpUe+RHVPfB/Io67EdUVY4w==",
  "shasum": "08923cd19279730cff34e06eab18f7f590b074e0",
  "tarball": "https://registry.npmjs.org/87-midnight-ckeditor5/-/87-midnight-ckeditor5-0.0.5.tgz",
  "fileCount": 82,
  "unpackedSize": 10147387,
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEUCIAWJ+LcZwKFF3jp9WEBEvWr604pX3it9n5N/KuOhMpW6AiEA+OjM5PQ84rP/d3zw7McKBrdEMzo49W+0EsXOpkOoT3o="
    }
  ]
}

Repository

PENDING
87-midnight/ckeditor5-super-build-classic

Shared repository data · GitHub

License detected in repository
Not collected

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 21:18 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:121da8754e6e8daa349bbf84391afa9bd4f7976aaa0bf5d05e00336335d9cd60

Other collected versions

0.0.431 Aug0.0.331 AugView all collected versions →