一、为什么选择CKEditor 5
CKEditor 5 是一个强大的富文本编辑器，可以帮助你创建各种类型的内容，并有许多可定制的选项。
对比于其他编辑器，CKEditor 5 有以下优点：
1、易于集成：与各种框架和库集成无需繁琐的设置，可以轻松实现。
2、丰富的可定制选项：可以根据需要对文本编辑器进行定制和调整，如添加自定义按钮或菜单栏项。
3、跨浏览器兼容性：CKEditor 5 在主要的现代浏览器中工作正常，并按照最新的Web标准进行开发。
因此，CKEditor 5是一个非常棒的工具，可以帮助您将文本编辑的美学和功能提高到一个新的水平。
二、CKEditor Editor的基本使用
CKEditor 5可以快速创建各种类型的内容。下面介绍如何创建一个基本的文本编辑器:
<!-- 引入CKEditor 5 -->
<script src="https://cdn.cke-cs.com/ckeditor5/26.0.0/classic/ckeditor.js"></script>
<!-- 创建编辑器 -->
<textarea name="editor"></textarea>
<script>
ClassicEditor
.create( document.querySelector('textarea'))
.catch( error => {
console.error( error );
} );
</script>上面的代码将创建一个基本的CKEditor 5编辑器，并将其附加到id为”editor”的文本区域中。
三、自定义工具栏和按钮
CKEditor 5的一个很好的特性是它可以轻松地自定义编辑器的布局和功能。下面是一些步骤来自定义工具栏和按钮:
1、使用允许自定义的构建
CKEditor 5有两种构建类型：经典构建和基础构建。如果您需要自定义工具栏和按钮，则必须使用经典构建。创建一个自定义的CKEditor 5构建文件:
npx create-ckeditor5-app my-custom-build
cd my-custom-build
npm install
npm start 2、添加自定义控件
您可以在工具栏上添加自定义按钮、下拉列表和许多其他控件。例如，下面的代码将添加一个名为“insertImage”的按钮，使用户可以插入图像:
ClassicEditor
.create( document.querySelector( '#editor' ), {
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'insertImage',
'blockQuote',
'undo',
'redo'
]
},
image: {
toolbar: [
'imageStyle:full',
'imageStyle:side',
'|',
'imageTextAlternative'
]
},
language: 'en'
} )
.then( editor => {
window.editor = editor;
editor.model.document.on( 'change:data', () => {
console.log( Array.from( editor.model.document.getChanges() ) );
} );
} )
.catch( error => {
console.error( error );
} );3、调整信息窗口
// 编辑器上方的信息窗口
<div class="ck-editor__top">
// 工具栏
<div class="ck-editor__toolbar">
// 工具栏项目
<div class="ck-toolbar">
// 项目容器
<div class="ck-tooltbar__item">
// 项目
<button class="ck-button ck-heading__button-level-1" title="H1">H1</button>
</div>
</div>
</div> 四、集成CKEditor5和服务器保存
CKEditor 5 与服务器的相互作用是通过所谓的适配器完成的。它们负责将 CKEditor 5 接口和您的服务器端框架之间的差距抹平。
下面是如何与服务器集成的示例：
1、客户端上的配置：
ClassicEditor
.create( document.querySelector( '#editor' ), {
ckfinder: {
// 配置CKFinder URL
uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&responseType=json'
},
// 其他配置信息
} )
.catch( error => {
console.error( error );
} );2、添加CKFinder服务器
CKFinder是一个用于文件管理和上传的独立库。要使用CKFinder，您需要添加以下代码：
<!-- 引入CKFinder配置文件 -->
<script src="/ckfinder/ckfinder.js"></script>
<!-- 配置CKFinder -->
<script>
CKFinder.config( {
// 配置参考文档 https://ckeditor.com/docs/ckfinder/
// ...
} );
</script>3、处理文件上传
// CKFinder路径
$path = '/ckfinder/userfiles/images/';
// 获取上传文件的数据
$data = file_get_contents( 'php://input' );
// 保存文件
file_put_contents( realpath( '.' ) . $path . $fileName, $data );
// 返回文件的URL
echo json_encode( [ 'default' => $publicPath . $fileName ] );添加上述代码，并使用您自己的后端技术将所需的服务器代码插入即可。
五、使用CKEditor 5插件扩展功能
CKEditor 5 有可能不会满足您的每个需求，但是，您可以通过添加插件来扩展对编辑器的支持。
下面让我们来看一下如何为CKEditor 5添加插件的示例：
// 在编辑器中添加插件
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Alignment ],
toolbar: [ 'alignment:left', 'alignment:right' ]
} )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );上述代码将添加Alignment插件到CKEditor 5，并通过工具栏添加对齐左/右的选项。
六、使用CKEditor 5创建自定义微件
CKEditor 5 运行时提供了一个内置的小部件系统，可用于支持自定义 UI 小部件。您可以根据自己的要求自己创建小部件。
下面是一个简单的在编辑器中添加自定义微件的示例：
// 注册自定义小部件
editor.ui.componentFactory.add( 'myPlugin', locale => {
// 创建小部件
const container = new ContainerElement();
// 设置小部件的渲染模板
// ...
// 将该微件添加到工具栏中
editor.ui.get( 'MyCustomPlugin' )
.setChild( 'myPlugin', container );
} ); 上述代码将添加一个名为”MyPlugin”的自定义微件，并将其附加到 CKEditor 5 的工具栏上。
七、结论
使用CKEditor 5 编辑器创建优质的内容既简单又有趣。本指南总结了必要的步骤和工具来开始使用该编辑器，设计和自定义文本编辑器，并集成该编辑器与服务器。同时，您可以通过添加插件或创建自定义微件等来扩展编辑器的功能，以满足您的具体需求。
原创文章，作者：GWGLY，如若转载，请注明出处：https://www.506064.com/n/362709.html
微信扫一扫 
支付宝扫一扫 