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

指南显示块

显示块功能允许内容创建者可视化所有块级元素（除了小部件）。它用轮廓包围它们，并在框的左上角显示它们的元素名称。

# 演示

使用显示块 显示块 工具栏按钮切换块元素的可见性，以查看功能的实际效果。内容仍然可编辑，因此您可以看到块如何在内容结构中动态调整。这些轮廓在 导出为 PDF 和 导出为 Word 功能中不可见，因此您无需在导出之前将其删除。

从旅行中学习的三件最棒的事情

就像地球上所有伟大的事物一样，旅行通过榜样教会我们。以下是我多年旅行中学习到的一些最宝贵的教训。

对多样性的欣赏

习惯完全不同的文化可能具有挑战性。虽然从网上或书籍中了解文化也很棒，但没有什么能比亲身体验文化多样性更有效。当您变得更具文化流动性时，您会学会欣赏每一个细微的差异。

真正的发现之旅不在于寻找新的风景，而在于拥有新的眼光。

马塞尔·普鲁斯特

即兴发挥

生活不允许我们完美地执行每一个计划。当您旅行时，情况尤其如此。您会用一个大清单将计划安排到每一分钟。但是，当您执行它时，总会有一些事情发生，您就会剩下您的即兴发挥技巧。您学会边走边适应。以下是我现在的旅行清单

  • 买票
  • 开始您的冒险
Three monks ascending the stairs of an ancient temple.
三位僧侣正在一座古老寺庙的楼梯上行走。

自信

去一个新的地方可能会很可怕。虽然变化和不确定性让我们感到害怕，但旅行教会我们，在事情发生之前就害怕是多么荒谬。当您直面恐惧并发现没有什么可怕时，您就会发现幸福。

此演示展示了一组有限的功能。请访问 功能丰富的编辑器示例，查看更多实际效果。

# 安装

⚠️ 新的导入路径

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

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

import { ClassicEditor, ShowBlocks } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // Load the plugin.
        plugins: [ ShowBlocks, /* ... */ ],

        // Display the "Show blocks" button in the toolbar.
        toolbar: [ 'showBlocks', /* ... */ ],
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

阅读有关 安装插件 和 工具栏配置 的更多信息。

# 已知问题

  • 显示块功能尚不支持小部件。这意味着它目前不会显示例如图片或表格的块轮廓。如果您觉得它很重要，请随时点赞 👍 GitHub 上的此问题。
  • 目前，显示块功能尚不完全兼容 分页 功能。同时使用这两者可能会导致错误。

您可能还想查看与 HTML 编辑相关的其他 CKEditor 5 功能

  • 通用 HTML 支持 – 允许您启用其他专用 CKEditor 5 插件不支持的 HTML 功能（元素、属性、类、样式）。
  • 源代码编辑 – 提供查看和编辑文档源代码的功能。
  • 全页 HTML – 允许使用 CKEditor 5 编辑整个 HTML 页面，从 <html> 到 </html>，包括页面元数据。

# 常用 API

ShowBlocks 插件注册了 'showBlocks' UI 按钮组件和 'showBlocks' 命令，该命令由 ShowBlocksCommand 实现。

您可以使用 editor.execute() 方法执行命令

// Toggle the visibility of block-level elements outline.
editor.execute( 'showBlocks' );

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

# 贡献

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