How to use CKEditor 5 using javascript?
CKEditor is a package to provide functionality and design base editors to use a content design or many more. the default establishment of CKEditor incorporates a choice of modules. the extra modules and accordingly, carry new helpful highlights to your clients.CKEditor is a toolbar visible when the user page load.
querySelector() is the main component inside the archive that coordinates the predetermined selector, or gathering of selectors.
querySelectorAll() restores a static NodeList speaking to a rundown of the record components that coordinate the predetermined gathering of selectors.
Available Editor :
- Classic editor
- Inline editor
- Balloon editor
- Balloon block editor
- Document editor
Also Read: How to use multiple textarea with CKEditor 5
The toolbar is now always visible when the user scrolls the page down.
classic-editor.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Classic editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/classic/ckeditor.js"></script>
</head>
<body>
<h1>Classic editor</h1>
<div id="editor1">
<p>How to use <b>CKEditor 5</b> with Classic editor</p>
</div>
<script>
ClassicEditor
.create( document.querySelector( '#editor1' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>Demo: Classic Editor
2) Inline editor
The toolbar is now always visible when the user is on the hover element.
inline-editor.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inline editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/inline/ckeditor.js"></script>
</head>
<body>
<h1>Inline editor</h1><br></br>
<div id="editor1">
<p>How to use <b>CKEditor 5</b> with Inline editor</p>
</div>
<script>
InlineEditor
.create( document.querySelector( '#editor1' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>Demo: Inline Editor
Also read: How to image upload in CKEditor using Laravel?
3) Balloon editor
The toolbar is now always visible when the user element on double click.
balloon-editor.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bolloon editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/balloon/ckeditor.js"></script>
</head>
<body>
<h1>Bolloon editor</h1>
<div id="editor1">
<p>How to use <b>CKEditor 5</b> with Bolloon editor</p>
</div>
<script>
BalloonEditor
.create( document.querySelector( '#editor1' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>Demo : Balloon editor
4) Balloon block editor
The toolbar gives access to additional, block-level editing features.
ballon-block-editor.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bolloon block editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/balloon-block/ckeditor.js"></script>
</head>
<body>
<h1>Bolloon block editor</h1>
<div id="editor1">
<p>How to use <b>CKEditor 5</b> with Bolloon block editor</p>
</div>
<script>
BalloonEditor
.create( document.querySelector( '#editor1' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>Demo : bolloon block editor
5) Document editor
Creating documents that are usually later printed or exported to PDF files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/decoupled-document/ckeditor.js"></script>
</head>
<body>
<h1>Document editor</h1>
<div id="toolbar-container"></div>
<div id="editor1">
<p>How to use <b>CKEditor 5</b> with Document editor</p>
</div>
<script>
DecoupledEditor
.create( document.querySelector( '#editor1' ) )
.then( editor => {
const toolbarContainer = document.querySelector( '#toolbar-container' );
toolbarContainer.appendChild( editor.ui.view.toolbar.element );
} )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>Demo : Document Editor
Also Read : How to add CKEditor required field validation in Jquery
