CKEditor 5 v11.2.0 发布了,CKEditor 是一个网页在线文字编辑器,特点是高性能与可扩展。


此版本带来了期待已久的 Office 粘贴支持,例如可以直接复制 Microsoft Word 的文档,还集成了 CKFinder 文件上传器,此外,完善了图像上传文档,改进了移动设备上的 UI,并引入了许多其它功能和改进。

复制 Word 文档

此新功能允许粘贴 Microsoft Word 中的内容并保留原始结构和格式,包括基本文本样式、标题级别、链接、列表、表格和图像等。


集成 CKFinder

CKFinder 是一个文件管理器和上传器,它是 CKEditor 4 的一个关键特性,现在已经集成到了此版本的 CKEditor 5 中。集成之后允许将图像以及文件链接插入到编辑内容中。


其它变更

插件开发者需要关注一下,Position、Range 和 Writer 引擎类 API 已经发生变化。在此版本中,对 @ckeditor/ckeditor5-engine 软件包中的公共 API 进行了一些重大更改,view 和 model 中不再开放 Position 和 Range 类的各种方法,例如Position#createAt()、Position#createFromParentAndOffset()Range#createIn() Range#createCollapsedAt()。它们已被相应的方法替换,例如 createPositionAt( parent, offset )createRangeIn() createRange( position )。

比如之前的写法:

import Position from '@ckeditor/ckeditor5-engine/src/model/position';
import Range from '@ckeditor/ckeditor5-engine/src/model/range';

// ...

editor.model.change( writer => {
    const imageElement = writer.createElement( 'image', {
        src: 'https://example.com/image.jpg'
    } );

    // Insert the image at the current selection location.
    editor.model.insertContent( imageElement, editor.model.document.selection );

    const paragraph = writer.createElement( 'paragraph' );
    const insertPosition = Position.createAfter( imageElement );

    writer.insert( paragraph, insertPosition );

    // Set the selection in the <paragraph>.
    writer.setSelection( Range.createIn( paragraph ) );
} );

现在这样写:

// Imports from `@ckeditor/ckeditor5-engine` are no longer needed.

// ...

editor.model.change( writer => {
    const imageElement = writer.createElement( 'image', {
        src: 'https://example.com/image.jpg'
    } );

    editor.model.insertContent( imageElement );

    const paragraph = writer.createElement( 'paragraph' );

    // Writer#createPositionAfter() instead of Position#createAfter().
    const insertPosition = writer.createPositionAfter( imageElement );

    writer.insert( paragraph, insertPosition );

    // Writer#createRangeIn() instead of Range#createIn().
    writer.setSelection( writer.createRangeIn( paragraph ) );
} );

移动设备上更好的 UI

改进的 UI 带有下拉面板定位,可确保下拉内容始终对用户可见。还使一些 UI 元素根据环境响应,例如,链接和图像文本替代小气球图标现在适应屏幕的大小,使触摸按钮更容易。


还有其它更新内容,详情查看发布公告

下载地址:https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installation.html