category: builds-guides
Creating an editor using a CKEditor 5 build is very simple and can be described in two steps:
<script> tag.create() method to create the editor.
There are other installation and integration methods available. For more information check {@link builds/guides/integration/installation Installation} and {@link builds/guides/integration/basic-api Basic API} guides.
In your HTML page add an element that CKEditor should replace:
<textarea name="content" id="editor"></textarea>
Load the classic editor build (here CDN location is used):
<script src="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/classic/ckeditor.js"></script>
Call the {@link module:editor-classic/classiceditor~ClassicEditor#create ClassicEditor.create()} method.
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 5 - Classic editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/classic/ckeditor.js"></script>
</head>
<body>
<h1>Classic editor</h1>
<textarea name="content" id="editor">
<p>This is some sample content.</p>
</textarea>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
In your HTML page add an element that CKEditor should make editable:
<div id="editor"></div>
Load the inline editor build (here CDN location is used):
<script src="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/inline/ckeditor.js"></script>
Call the {@link module:editor-inline/inlineeditor~InlineEditor#create InlineEditor.create()} method.
<script>
InlineEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 5 - Inline editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/inline/ckeditor.js"></script>
</head>
<body>
<h1>Inline editor</h1>
<div id="editor">
<p>This is some sample content.</p>
</div>
<script>
InlineEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
In your HTML page add an element that CKEditor should make editable:
<div id="editor"></div>
Load the balloon editor build (here CDN location is used):
<script src="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/balloon/ckeditor.js"></script>
Call the {@link module:editor-balloon/ballooneditor~BalloonEditor#create BalloonEditor.create()} method.
<script>
BalloonEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Balloon editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/balloon/ckeditor.js"></script>
</head>
<body>
<h1>Balloon editor</h1>
<div id="editor">
<p>This is some sample content.</p>
</div>
<script>
BalloonEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
Check the {@link builds/guides/integration/configuration Configuration guide} to learn how to configure the editor – e.g. change the default toolbar.