快速开始 - 构建文档 - ckeditor5中文文档
使用CKEditor5构建来创建一个编辑器时非常简单的，可以分两个步骤来描述：
- 使用
<script>标签加载所需的编辑器。 - 调用
create()方法来创建编辑器。
还有其他安装和集成方法可供使用。 获取更多信息，请查看安装和基本API指南。
Classic编辑器
在你的html页面中添加一个用来替换成CKEditor的元素：
<textarea name="content" id="editor"></textarea>
加载classic编辑器构建版本（这里使用的CDN）：
<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/classic/ckeditor.js"></script>
调用ClassicEditor.create()方法。
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Classic editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/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>
Inline编辑器
在你的页面中添加应该被CKEditor修改为可编辑的元素：
<div id="editor"></div>
加载inline编辑器构建版本（这里使用CDN）：
<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/inline/ckeditor.js"></script>
调用InlineEditor.create()方法。
<script>
InlineEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 - Inline editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/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>
Balloon编辑器
在你的页面中添加应该被CKEditor修改为可编辑的元素：
<div id="editor"></div>
加载balloon编辑器构建版本（这里使用CDN）：
<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/balloon/ckeditor.js"></script>
调用BalloonEditor.create()方法。
<script>
BalloonEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Balloon editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/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>
Document编辑器
加载document编辑器构建版本（这里使用CDN）：
<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/decoupled-document/ckeditor.js"></script>
调用DecoupledEditor.create()方法。decoupled编辑器需要将工具栏注入DOM，并且最好的位置是在promise链中的某个位置（例如，在某个then( () => { ... } )块中）。
以下代码片段将运行Document编辑器，但要充分利用它，请查看全面的教程，该教程逐步说明该如何配置和设置应用程序以获得最佳编辑体验。
<script>
DecoupledEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
const toolbarContainer = document.querySelector( '#toolbar-container' );
toolbarContainer.appendChild( editor.ui.view.toolbar.element );
} )
.catch( error => {
console.error( error );
} );
</script>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Document editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/decoupled-document/ckeditor.js"></script>
</head>
<body>
<h1>Document editor</h1>
<!-- The toolbar will be rendered in this container. -->
<div id="toolbar-container"></div>
<!-- This container will become the editable. -->
<div id="editor">
<p>This is the initial editor content.</p>
</div>
<script>
DecoupledEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
const toolbarContainer = document.querySelector( '#toolbar-container' );
toolbarContainer.appendChild( editor.ui.view.toolbar.element );
} )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
下一步
查看配置向导来学习如何配置编辑器——例如，修改默认的工具栏。
文章作者ianzhi,原文地址：https://cloud.tencent.com/developer/article/1476773
文章版权归作者所有，转载请保留此声明。
腾讯云开发者
