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

指南查找和替换

查找和替换功能允许您在文档中查找和替换任何文本。这可以加快您的工作速度，并有助于保持内容的一致性。

# 演示

使用查找和替换工具栏按钮 查找和替换 打开搜索对话框。使用它查找和替换单词或短语。您也可以使用 Ctrl/Cmd+F 键盘快捷键。尝试将“AI”替换为“人工智能”，以使内容更适合不太了解技术的用户。注意匹配大小写！

AI 炼金术：在 2024 年打造迷人的内容

CKEditor 5 AI Assistant feature helps generate content.
在 CKEditor 5 中使用 AI 助手。

在 2024 年，AI 加速了内容创作，使其更快、更具吸引力。自动化负责研究和初始草稿等琐碎任务，让人类创作者有更多时间进行有趣的事情。

得益于自然语言处理，AI 现在可以理解上下文、语调和受众偏好。这意味着内容可以个性化、优化 SEO，并完美调整以吸引不同的受众。

但真正的魔力在于协作。AI 就像一个创意伙伴，提供想法、提供反馈，并与人类创作者无缝合作。结果如何？不仅仅高效的内容，而且是机器智慧和人类创造力的完美融合。

简而言之，2024 年的 AI 正在彻底改变内容创作，为创作者提供强大的工具，以创建不仅高效，而且引人入胜且在全球范围内产生共鸣的内容。

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

# 安装

⚠️ 新的导入路径

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

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

import { ClassicEditor, FindAndReplace } from 'ckeditor5';

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

# 配置

# 配置 UI 类型

默认情况下，查找和替换表单显示在对话框内。这使得它能够在同时编辑文档时保持打开状态。或者，您也可以在下拉菜单中显示该功能。要执行此操作，请使用 config.findAndReplace.uiType 配置选项

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        findAndReplace: {
            uiType: 'dropdown'
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

AI 炼金术：在 2024 年打造迷人的内容

CKEditor 5 AI Assistant feature helps generate content.
在 CKEditor 5 中使用 AI 助手。

在 2024 年，AI 加速了内容创作，使其更快、更具吸引力。自动化负责研究和初始草稿等琐碎任务，让人类创作者有更多时间进行有趣的事情。

得益于自然语言处理，AI 现在可以理解上下文、语调和受众偏好。这意味着内容可以个性化、优化 SEO，并完美调整以吸引不同的受众。

但真正的魔力在于协作。AI 就像一个创意伙伴，提供想法、提供反馈，并与人类创作者无缝合作。结果如何？不仅仅高效的内容，而且是机器智慧和人类创造力的完美融合。

简而言之，2024 年的 AI 正在彻底改变内容创作，为创作者提供强大的工具，以创建不仅高效，而且引人入胜且在全球范围内产生共鸣的内容。

  • 自动文本转换 – 启用自动将诸如 (tm) 之类的片段转换为 ™ 以及 "foo" 转换为 “foo”。

# 通用 API

The FindAndReplace plugin registers the 'findAndReplace' UI button component and the 'find', 'findNext', 'findPrevious', 'replace' and 'replaceAll' commands.

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

// Find all occurrences of a given text.
editor.execute( 'find', 'steam' );

您也可以使用 'findNext' 和 'findPrevious' 命令在所有匹配结果中移动高亮显示

// Move the search highlight to the next match.
editor.execute( 'findNext' );

您还可以使用 'replaceAll' 命令替换编辑器实例中给定文本的所有出现情况

editor.execute( 'replaceAll', 'diesel', 'steam' );

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

# 贡献

该功能的源代码可在 GitHub 上的 https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-find-and-replace 获取。