使用CKEditor5构建来创建一个编辑器时非常简单的,可以分两个步骤来描述:
<script>
标签加载所需的编辑器。create()
方法来创建编辑器。还有其他安装和集成方法可供使用。 获取更多信息,请查看安装和基本API指南。
在你的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>
在你的页面中添加应该被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>
在你的页面中添加应该被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编辑器构建版本(这里使用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
文章版权归作者所有,转载请保留此声明。