📅 最后修改于: 2023-12-03 14:40:05.876000 🧑 作者: Mango
CKEditor 5 是一个先进的富文本编辑器，可用于创建现代 Web 应用程序。它提供了一个全新的、模块化的架构，使之更加灵活和可扩展。
以下是一些 CKEditor 5 的示例代码，可用作您的开发参考。这些示例代码提供了一个基本的 HTML 环境，并演示了不同的编辑器功能。
下面是一个基本的示例代码，显示了一个具有默认配置的 CKEditor 5 编辑器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 5 示例代码</title>
<script src="https://cdn.ckeditor.com/ckeditor5/28.0.0/classic/ckeditor.js"></script>
</head>
<body>
<h1>CKEditor 5 示例代码</h1>
<textarea name="editor"></textarea>
<script>
ClassicEditor.create( document.querySelector( 'textarea' ) )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
该示例代码使用位于 CKEditor 5 CDN 上的经典版本，并在页面上创建了一个包含默认配置的编辑器。您可以在 textarea 元素中键入文本，并使用各种格式选项（如粗体、斜体、链接等）来进行格式化。
要使用自定义配置创建编辑器，请按照以下示例代码进行操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 5 示例代码</title>
<script src="https://cdn.ckeditor.com/ckeditor5/28.0.0/classic/ckeditor.js"></script>
</head>
<body>
<h1>CKEditor 5 示例代码</h1>
<textarea name="editor"></textarea>
<script>
ClassicEditor
.create( document.querySelector( 'textarea' ), {
toolbar: [ 'bold', 'italic', 'link' ]
} )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
在此示例代码中，我们将编辑器的工具栏限制为仅包括粗体、斜体和链接选项。您可以根据需要自定义其他配置选项。
要允许用户上传图像并在编辑器中嵌入它们，请按照以下示例代码进行操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor 5 示例代码</title>
<script src="https://cdn.ckeditor.com/ckeditor5/28.0.0/classic/ckeditor.js"></script>
</head>
<body>
<h1>CKEditor 5 示例代码</h1>
<textarea name="editor"></textarea>
<script>
ClassicEditor
.create( document.querySelector( 'textarea' ), {
toolbar: [ 'bold', 'italic', 'link', 'imageUpload' ],
image: {
toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
}
} )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
在此示例代码中，我们将工具栏添加了一个“上传图像”的选项，并配置了图像 uploads。用户可以单击“上传图像”按钮，然后选择所需的文件并上传。上传成功后，图像将显示在编辑器中。
CKEditor 5 是一个功能强大、灵活和易于扩展的富文本编辑器。通过使用上述示例代码，您可以轻松地创建自定义的编辑器，并为您的 Web 应用程序提供丰富、交互性的编辑功能。