CKEditor 5 富文本编辑器的官方例子

种麦南山下

已于 2022-04-26 09:22:39 修改

阅读量2k

点赞数 1

分类专栏： springboot 文章标签：前端

于 2022-04-19 09:13:03 首次发布

本文链接：https://blog.csdn.net/conving/article/details/124265024

版权

springboot 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CKEditor 5 可以提供任何所见即所得的编辑器类型。从类似于 Google Docs 和 Medium 的在线编辑器，到类似于 Slack 或 Twitter 的应用程序，CKEditor 5 编辑框架为每个用户提供了定制的和开箱即用的解决方案。这个具有 MVC 架构、自定义数据模型和虚拟 DOM 的现代 JavaScript 富文本编辑器是在 ES6 中从头开始编写的，具有出色的 webpack 支持。

cdn位置：

# 经典编辑器
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
# 内联编辑器
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/inline/ckeditor.js"></script>
# 气球编辑器
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/balloon/ckeditor.js"></script>
# 气球块编辑器
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/balloon-block/ckeditor.js"></script>
# 文档编辑器
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/decoupled-document/ckeditor.js"></script>

1、经典编辑器

经典编辑器是大多数用户传统上学习与富文本编辑器相关联的东西 - 一个工具栏，其编辑区域放置在页面上的特定位置，通常作为表单的一部分，用于向服务器提交一些内容。

在其初始化期间，编辑器隐藏页面上使用的可编辑元素并呈现“代替”它。这就是为什么它通常用于替换<textarea>元素的原因。

在 CKEditor 5 中，“盒装”编辑器的概念被彻底改造：

现在，当用户向下滚动页面时，工具栏始终可见。
编辑器内容现在被内嵌在页面中（没有周围的<iframe>元素）——现在更容易设置它的样式。
默认情况下，编辑器现在会随着内容自动增长。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
</head>
<body>
    <h1>Classic editor</h1>
    <div id="editor">
        <p>This is some sample content.</p>
    </div>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

2、内联编辑器

内联编辑器带有一个浮动工具栏，当编辑器获得焦点时（例如通过单击它），该工具栏变得可见。与经典编辑器不同，内联编辑器不会呈现给定元素，它只是使其可编辑。因此，编辑内容的样式在创建编辑器之前和之后将完全相同。

使用内联编辑器的一个常见场景是为用户提供在网页上实际位置编辑内容的可能性，而不是在单独的管理部分中进行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 - Inline editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/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>

3、气球编辑器

气球编辑器与内联编辑器非常相似。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Balloon editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/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>

4、气球块编辑器

气球块本质上是气球编辑器带有一个额外的块工具栏，可以使用附加到可编辑内容区域的按钮并按照文档中的选择进行访问。工具栏提供对其他块级编辑功能的访问。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Balloon block editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/balloon-block/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>

5、文档编辑器

文档编辑器专注于类似于原生文字处理器的富文本编辑体验。它最适合创建通常稍后打印或导出为 PDF 文件的文档。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Document editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/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>

注：这里的表格只能居中显示。

默认情况下，表格样式工具不包含在即用型编辑器构建中，必须单独安装。

种麦南山下

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CKEditor 5 富文本编辑器的官方例子

CKEditor 5 可以提供任何所见即所得的编辑器类型。从类似于 Google Docs 和 Medium 的在线编辑器，到类似于 Slack 或 Twitter 的应用程序，CKEditor 5 编辑框架为每个用户提供了定制的和开箱即用的解决方案。这个具有 MVC 架构、自定义数据模型和虚拟 DOM 的现代 JavaScript 富文本编辑器是在 ES6 中从头开始编写的，具有出色的 webpack 支持。文档编辑器专注于类似于原生文字处理器的富文本编辑体验。它最适合创建通常稍后打印或导出为 PDF
复制链接

扫一扫