Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
@ckeditor/ckeditor5-react
Advanced tools
@ckeditor/ckeditor5-react is a React component that integrates CKEditor 5, a modern JavaScript rich text editor, into React applications. It provides a rich set of features for creating and editing content, including text formatting, image and media embedding, and collaborative editing.
Basic Usage
This code demonstrates the basic usage of the @ckeditor/ckeditor5-react package. It imports the CKEditor component and the ClassicEditor build, then renders the editor with some initial data and event handlers for ready, change, blur, and focus events.
import React from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
function App() {
return (
<div className="App">
<h2>Using CKEditor 5 with React</h2>
<CKEditor
editor={ ClassicEditor }
data="<p>Hello from CKEditor 5!</p>"
onReady={ editor => {
console.log( 'Editor is ready to use!', editor );
} }
onChange={ ( event, editor ) => {
const data = editor.getData();
console.log( { event, editor, data } );
} }
onBlur={ ( event, editor ) => {
console.log( 'Blur.', editor );
} }
onFocus={ ( event, editor ) => {
console.log( 'Focus.', editor );
} }
/>
</div>
);
}
export default App;
Custom Configuration
This code demonstrates how to use a custom configuration with the CKEditor component. The editorConfiguration object specifies a custom toolbar and heading options, which are then passed to the CKEditor component via the config prop.
import React from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
function App() {
const editorConfiguration = {
toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
]
}
};
return (
<div className="App">
<h2>Using CKEditor 5 with Custom Configuration</h2>
<CKEditor
editor={ ClassicEditor }
config={ editorConfiguration }
data="<p>Custom configuration example.</p>"
/>
</div>
);
}
export default App;
Using Plugins
This code demonstrates how to use plugins with the CKEditor component. The Alignment plugin is imported and added to the ClassicEditor build. The editorConfiguration object includes the alignment options, which are then passed to the CKEditor component via the config prop.
import React from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
ClassicEditor.builtinPlugins.push( Alignment );
function App() {
const editorConfiguration = {
toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'alignment', 'bulletedList', 'numberedList', 'blockQuote' ],
alignment: {
options: [ 'left', 'center', 'right', 'justify' ]
}
};
return (
<div className="App">
<h2>Using CKEditor 5 with Plugins</h2>
<CKEditor
editor={ ClassicEditor }
config={ editorConfiguration }
data="<p>Plugin example with text alignment.</p>"
/>
</div>
);
}
export default App;
React-Quill is a React component for Quill, a powerful rich text editor. It offers a similar set of features to CKEditor, including text formatting, image embedding, and custom themes. However, Quill's API and customization options differ from CKEditor, and it may have a different set of plugins and extensions.
Draft.js is a JavaScript rich text editor framework developed by Facebook. It provides a set of tools for building rich text editors with React. Unlike CKEditor, Draft.js is more of a low-level framework, offering more control and customization options but requiring more effort to implement common features.
Slate is a completely customizable framework for building rich text editors. It provides a set of tools and plugins for creating complex editors with React. Slate offers more flexibility and control compared to CKEditor, but it also requires more effort to set up and configure.
Official CKEditor 5 React component.
Note: This is development preview. There might be some small bugs and the API might change a little bit.
The easiest way to use CKEditor 5 in your React app is by choosing one of the editor builds. There are four official builds which you can choose from:
Install the component and one of the builds:
npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
Use CKEditor component inside your project:
import React, { Component } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
class App extends Component {
render() {
return (
<div className="App">
<h2>Using CKEditor 5 build in React</h2>
<CKEditor
editor={ ClassicEditor }
data="<p>Hello from CKEditor 5!</p>"
onChange={ ( event, editor ) => console.log( { event, editor } ) }
/>
</div>
);
}
}
export default App;
The <CKEditor>
component supports the following properties:
editor
required - the Editor constructor to use.
data
- an initial data for the created editor. See the DataApi#setData()
method.
config
- the editor configuration. See the Configuration guide.
onChange
- a function called when the editor's data changed. See the model.Document#change:data
event.
The callback receives two parameters:
onInit
- a function called when the editor was initialized. It receives the initialized editor
as a parameter.
CKEditor 5 builds come ready to use, with a set of builtin plugins and a predefined configuration. While you can change the configuration easily by using the config
property of the <CKEditor>
component which allows you to change the toolbar or remove some plugins to add plugins you need to rebuild the editor.
There are two main ways to do that.
Customize one of the existing builds.
This option does not require any changes in your project's configuration. You will create a new build, somewhere next to your project and include it like you included one of the existing builds. Therefore, it is the easiest way to add missing features. Read more about this method in Installing plugins.
Integrate the editor from source.
In this approach you will include CKEditor 5 from source – i.e. you will choose the editor creator you want and the list of plugins, etc. It is more powerful and creates a tighter integration between your app and CKEditor 5, however, it requires adjusting your webpack.config.js
to CKEditor 5 needs.
Read more about this option in Integrating CKEditor 5 from source.
If you use create-react-app
or use a custom configuration for you app but still use webpack@3
you will need to adjust the UglifyJsPlugin
options to make CKEditor 5 compatible with this setup. CKEditor 5 builds use ES6 so the default JavaScript minifier of webpack@3
and create-react-app
is not able to digest them.
To do that, you need to first eject the configuration from the setup created via create-react-app
(that's, of course, assuming that you use it).
npm run eject
Then, you can customize UglifyJsPlugin
's options in the webpack configuration. Read how to do this here.
Note: The latest webpack@4
comes with a version of UglifyJsPlugin
which supports ES6 out of the box. Also, the React community works on allowing importing ES6 libs into your applications, so you will not need this step soon.
If you use the Document editor, you need to add the toolbar to the DOM manually:
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
class App extends Component {
render() {
return (
<div className="App">
<h2>CKEditor 5 using custom build - DecoupledEditor</h2>
<CKEditor
onInit={ editor => {
console.log( 'Editor is ready to use!', editor );
// Insert the toolbar before the editable area.
editor.ui.view.editable.element.parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.view.editable.element
);
} }
onChange={ ( event, editor ) => console.log( { event, editor } ) }
editor={ DecoupledEditor }
data="<p>Hello from CKEditor 5's DecoupledEditor!</p>"
config={ /* the editor configuration */ }
/>
);
}
}
export default App;
Integrating the editor from source allows you to use the full power of the CKEditor 5 Framework.
This guide assumes that you are using Create React App CLI as your boilerplate and it goes through adjusting it to fit CKEditor 5's needs. If you use your custom webpack setup, please read more about including CKEditor 5 from source.
Install React CLI:
npm install -g create-react-app
Create your project using the CLI and go to the project's directory:
create-react-app ckeditor5-react-example && cd ckeditor5-react-example
Ejecting configuration is needed for custom webpack configuration to load inline SVG images and CKEditor 5's CSS. More information about ejecting can be found here.
npm run eject
webpack.config.prod.js
Failed to minify the code from this file: [31/75]
<project_root>/node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js:5:2077
The UglifyJS exported by webpack@3
cannot parse code written in ES6. You need to manually replace it with uglifyjs-webpack-plugin
. These changes touches webpack.config.prod.js
file only.
After ejecting this file is placed in <project_root>/config/webpack.config.prod.js
.
uglifyjs-webpack-plugin
.npm install --save-dev uglifyjs-webpack-plugin
webpack.config.prod.js
file).const UglifyJsWebpackPlugin = require( 'uglifyjs-webpack-plugin' );
webpack.optimize.UglifyJsPlugin
with UglifyJsWebpackPlugin
- new webpack.optimize.UglifyJsPlugin
+ new UglifyJsWebpackPlugin
Options: compress
, mangle
and output
are invaild for UglifyJsWebpackPlugin
. You need to wrap these option as uglifyOptions
.
The whole plugin definition should look like:
// Minify the code.
new UglifyJsWebpackPlugin( {
uglifyOptions: {
compress: {
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebookincubator/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
},
mangle: {
safari10: true,
},
output: {
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebookincubator/create-react-app/issues/2488
ascii_only: true,
},
},
sourceMap: shouldUseSourceMap,
} )
webpack.config.dev.js
and webpack.config.prod.js
)In order to build your application properly, you need to modify your webpack configuration files. After ejecting they are located at:
<project_root>/config/webpack.config.dev.js
<project_root>/config/webpack.config.prod.js
We need to modify webpack configuration to load CKEditor 5 SVG icons properly.
At the beginning import an object that creates a configuration for PostCSS:
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
Then add two new elements to exported object under module.rules
array (as new items for oneOf
array). These are SVG and CSS loaders only for CKEditor 5 code:
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
use: [ 'raw-loader' ]
},
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
use: [
{
loader: 'style-loader',
options: {
singleton: true
}
},
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
}
]
},
Exclude CSS files used by CKEditor 5 from project's CSS loader:
{
test: /\.css$/,
exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
// (...)
}
and exclude CKEditor 5 SVG and CSS files from file-loader
because these files will be handled by the loaders added previously (usually the last item in module.rules
array is the file-loader
) so it looks like this:
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// it's runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [
/\.(js|jsx|mjs)$/,
/\.html$/,
/\.json$/,
/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
/ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/
],
options: {
name: 'static/media/[name].[hash:8].[ext]'
}
}
Remember that the changes above should be done in both configuration files.
Next, install raw-loader
, the theme for CKEditor 5 and CKEditor 5 dev-utils:
npm install --save-dev raw-loader @ckeditor/ckeditor5-theme-lark @ckeditor/ckeditor5-dev-utils
Install component, editor and plugins you need:
npm install --save \
@ckeditor/ckeditor5-react \
@ckeditor/ckeditor5-editor-classic \
@ckeditor/ckeditor5-essentials \
@ckeditor/ckeditor5-basic-styles \
@ckeditor/ckeditor5-heading \
@ckeditor/ckeditor5-paragraph
import React, { Component } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
class App extends Component {
render() {
return (
<div className="App">
<h2>Using CKEditor 5 Framework in React</h2>
<CKEditor
onInit={ editor => console.log( 'Editor is ready to use!', editor ) }
onChange={ ( event, editor ) => console.log( { event, editor } ) }
config={ {
plugins: [ Essentials, Paragraph, Bold, Italic, Heading ],
toolbar: [ 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo', ]
} }
editor={ ClassicEditor }
data="<p>Hello from CKEditor 5!</p>"
/>
</div>
);
}
}
export default App;
Having cloned this repository, install necessary dependencies:
npm install
npm run tests -- [additional options]
# or
npm t -- [additional options]
It accepts the following options:
--coverage
(-c
) - whether generates the code coverage,--source-map
(-s
) - whether attaches the source maps,--watch
(-w
) - whether watch testes files,--reporter
(-r
) - reporter for the Karma (default: mocha
, can be changed to dots
)--browsers
(-b
) - browsers that will be used to run tests (default: Chrome
, available: Firefox
, BrowserStack_Edge
and BrowserStack_Safari
)Note: If you would like to use the BrowserStack_*
browser, you need to specify the BROWSER_STACK_USERNAME
and BROWSER_STACK_ACCESS_KEY
as
an environment variable, e.g.:
BROWSER_STACK_USERNAME=[...] BROWSER_STACK_ACCESS_KEY=[...] npm t -- -b BrowserStack_Edge,BrowserStack_Safari -c
If you are going to change the source (src/ckeditor.jsx
) file, remember about rebuilding the package. You can use npm run develop
in order to do it automatically.
It builds a minified version of the package which is ready to publish.
npm run build
npm run changelog
Before starting releasing the package, you need to generate a changelog.
npm run release
Note: Only the dist/
directory will be published.
Licensed under the terms of GNU General Public License Version 2 or later. For full details about the license, please check the LICENSE.md file.
1.0.0-beta.1 (2018-07-26)
First developer preview. It contains a ready-to-use <CKEditor>
component that allows using CKEditor 5 Builds and CKEditor 5 Framework in React applications.
FAQs
Official React component for CKEditor 5 – the best browser-based rich text editor.
The npm package @ckeditor/ckeditor5-react receives a total of 146,558 weekly downloads. As such, @ckeditor/ckeditor5-react popularity was classified as popular.
We found that @ckeditor/ckeditor5-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.