CKEditor 生态系统文档
Search
Contribute to this guide
主页/CKEditor 5/功能

指南限制编辑

限制编辑功能引入了两种模式：标准编辑模式和限制编辑模式。在限制编辑模式下工作的人员无法更改内容，除了标记为可编辑的部分。

# 演示

下面的演示允许您模拟标准编辑模式和限制编辑模式。

首先，在标准编辑模式下创建文档模板。选择文本的一部分，然后使用启用编辑工具栏按钮 启用编辑 将选定区域转换为可编辑区域或删除现有区域。

然后切换到限制编辑模式，查看可编辑和不可编辑区域的行为。

提示：在限制模式下，使用 Tab 在一个可编辑区域之间导航（以及 Shift+Tab 返回）。

模式:

尊敬的 客户姓名，

感谢您联系我们。您的案件已记录为 案件 ID，并已分配给 技术人员姓名。我们将尽力在接下来的 时间 小时内解决您的问题。

如果您需要任何进一步的帮助，请随时通过 热线号码 联系我们的客户支持热线。

此致
姓名
客户支持团队

此演示展示了一组有限的功能。访问 功能丰富的编辑器示例 以查看更多实际操作。

# 其他功能信息

限制编辑功能启用两种编辑模式

  • 标准编辑模式 - 在此模式下，用户可以编辑内容并选择在限制编辑模式下应可编辑的区域。
  • 限制编辑模式 - 当您在此模式下初始化编辑器时，用户只能在标准编辑模式下用户选择的区域内编辑内容。

您可以想象一个工作流程，其中某些用户组负责创建文档模板。同时，第二个用户组只能填补空白（例如，填写缺少的数据，如姓名、日期、产品名称等）。

通过使用此功能，您的应用程序的用户将能够创建模板文档。在某种程度上，您可以使用此功能来生成具有富文本功能的表单。这种实际应用程序在 如何使用 CKEditor 5 分页功能创建可打印文档 博客文章中有所展示。

另请参阅 只读功能，它允许您将整个 WYSIWYG 编辑器转换为只读模式。您还可以阅读有关写入限制编辑模式的 专门博客文章。

# 安装

⚠️ 新的导入路径

从 42.0.0 版本 开始，我们更改了导入路径的格式。本指南使用新的、更短的格式。如果您使用的是旧版本的 CKEditor 5，请参考 旧版设置中的包 指南。

在 安装编辑器 后，将该功能添加到您的插件列表和工具栏配置中。

# 运行标准编辑模式

要以标准编辑模式初始化编辑器，请添加 StandardEditingMode 插件，并将 'restrictedEditingException' 按钮添加到工具栏。

import { ClassicEditor, StandardEditingMode } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ StandardEditingMode, /* ... */ ],
        toolbar: [ 'restrictedEditingException', /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 运行受限编辑模式

要以受限编辑模式初始化编辑器，请添加 RestrictedEditingMode 插件，并将 'restrictedEditing' 按钮添加到工具栏。

import { ClassicEditor, RestrictedEditingMode } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ RestrictedEditingMode, /* ... */ ],
        toolbar: [ 'restrictedEditing', /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 配置

您可以配置哪些功能应该在受限模式下可用。例如，以下配置允许用户输入、删除，还可以加粗文本。

import { ClassicEditor, RestrictedEditingMode, Bold } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Bold, RestrictedEditingMode, /* ... */ ],
        toolbar: [ 'bold', '|', 'restrictedEditing', /* ... */ ],
        restrictedEditing: {
            allowedCommands: [ 'bold' ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

注意：在受限编辑区域中，始终可以输入和删除文本。有关更多信息，请查看 config.restrictedEditing 文档。

# 在受限编辑模式中启用命令

受限编辑模式仅允许在指定的区域修改编辑器内容。在这些区域之外，默认情况下会关闭大多数编辑器命令。如果您希望在受限编辑区域之外启用一些命令，可以使用 RestrictedEditingModeEditing.enableCommand() 方法。您必须在编辑器插件的 afterInit() 回调中执行此方法。

import { ClassicEditor, Plugin } from 'ckeditor5';

class MyPlugin extends Plugin {
    afterInit() {
        this.editor.plugins.get( 'RestrictedEditingModeEditing' ).enableCommand( 'myCommand' );
    }
}

CKEditor 5 还有更多功能可帮助您控制用户权限。

  • 只读 – 使编辑器的整个内容变为只读。
  • 跟踪更改 – 在内容中标记用户更改，并将它们显示为侧边栏中的建议，以便接受或拒绝。
  • 评论 – 用户可以向内容的任何部分添加评论，而不是直接编辑它。

阅读这篇 CKEditor 博客文章，了解如何将受限编辑与其他功能结合使用以创建可编辑的文档模板。

# 通用 API

StandardEditingMode 插件注册

  • 'restrictedEditingException' 按钮，可让您将区域标记为可编辑。
  • 'restrictedEditingException' 命令，允许将区域标记为可编辑。

RestrictedEditingMode 插件注册

  • 'restrictedEditing' 下拉菜单，可让您在可编辑区域之间导航。
  • 'goToPreviousRestrictedEditingException' 和 'goToNextRestrictedEditingException' 命令，允许在可编辑区域之间导航。

我们建议使用官方的 CKEditor 5 检查器 进行开发和调试。它将为您提供有关编辑器状态的大量有用信息，例如内部数据结构、选择、命令等等。

# 实时协作

使用 实时协作 时，所有连接的用户应始终处于相同模式。您不能在一个协作会话中为不同的用户启用不同的插件列表。

# 贡献

该功能的源代码在 GitHub 上可用，地址为 https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-restricted-editing。