@ckeditor/ckeditor5-build-classic
Advanced tools
Package description
@ckeditor/ckeditor5-build-classic is a ready-to-use build of CKEditor 5, a modern JavaScript rich text editor with a modular architecture. It provides a classic editor interface with a toolbar at the top and a large editing area. This package is designed to be easy to integrate into web applications and offers a wide range of features for content creation.
Basic Text Formatting
This code initializes the classic editor on an HTML element with the id 'editor'. It provides basic text formatting options like bold, italic, underline, and strikethrough.
ClassicEditor.create(document.querySelector('#editor')).catch(error => { console.error(error); });Image Upload
This code initializes the editor with image upload functionality. The 'uploadUrl' specifies the server endpoint to handle image uploads.
ClassicEditor.create(document.querySelector('#editor'), { ckfinder: { uploadUrl: '/upload' } }).catch(error => { console.error(error); });Table Creation
This code initializes the editor and programmatically creates a table within the editor. Users can also create and manipulate tables using the toolbar.
ClassicEditor.create(document.querySelector('#editor')).then(editor => { editor.plugins.get('Table').createTable(); }).catch(error => { console.error(error); });Link Insertion
This code initializes the editor and programmatically inserts a link into the content. Users can also add links through the toolbar.
ClassicEditor.create(document.querySelector('#editor')).then(editor => { editor.plugins.get('Link').addLink('https://example.com'); }).catch(error => { console.error(error); });TinyMCE is another popular rich text editor with a wide range of features similar to CKEditor. It offers a customizable toolbar, plugins for additional functionality, and easy integration into web applications. Compared to CKEditor, TinyMCE has a more extensive plugin ecosystem but may require more configuration for advanced features.
Quill is a lightweight and modern rich text editor with a focus on simplicity and extensibility. It provides a clean API for customization and a modular architecture. While Quill is less feature-rich out of the box compared to CKEditor, it is highly customizable and suitable for applications that need a simple and flexible editor.
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 that requires developers to build their own editor interfaces and features, offering greater flexibility and control.
Changelog
41.4.0-alpha.0 (April 18, 2024)
We are happy to announce the release of CKEditor 5 v41.4.0-alpha.0.
This release is intended to add a UMD build to the new installation methods.
For instructions on how to use the new installation methods, see the v41.3.0-alpha.0 Release Notes.
For more general information about the new installation methods, see the announcement post.
Check out the Versioning policy guide for more information.
<details> <summary>Released packages (summary)</summary>Minor releases (contain minor breaking changes):
Releases containing new features:
Other releases:
Readme
The classic editor build for CKEditor 5. Read more about the classic editor build and see the demo.
See:
First, install the build from npm:
npm install --save @ckeditor/ckeditor5-build-classic
And use it in your website:
<div id="editor">
<p>This is the editor content.</p>
</div>
<script src="./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( 'There was a problem initializing the editor.', error );
} );
</script>
Or in your JavaScript application:
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
// Or using the CommonJS version:
// const ClassicEditor = require( '@ckeditor/ckeditor5-build-classic' );
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( 'There was a problem initializing the editor.', error );
} );
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.
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 or https://ckeditor.com/legal/ckeditor-oss-license.
FAQs
The classic editor build of CKEditor 5 – the best browser-based rich text editor.
The npm package @ckeditor/ckeditor5-build-classic receives a total of 229,814 weekly downloads. As such, @ckeditor/ckeditor5-build-classic popularity was classified as popular.
We found that @ckeditor/ckeditor5-build-classic 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
Ecma TC39 is meeting this week and has moved key ECMAScript proposals forward, advancing Deferred Import Evaluation, Error.isError(), RegExp Escaping, and Promise.try to the next stages.
Security News
Researchers have demonstrated that teams of LLM agents can exploit zero-day vulnerabilities with a 53% success rate, and the costs of using AI to do so are rapidly becoming more affordable than hiring a human penetration tester.
Security News
In an unprecedented surge, May 2024 saw the publication of over 5,000 CVEs, marking a historic milestone in cybersecurity with an average of 164 CVEs per day, nearly double the 2023 daily average.