Contribute to this guide

指南文本部分语言

文本部分语言功能允许您标记文本片段的语言。这样浏览器和屏幕阅读器就可以正确地解释不同语言的文本部分。

# 演示

在下面的演示中,选择一个文本片段。接下来,使用语言工具栏下拉菜单从预定义的语言中进行选择。

语言是人类获得和使用复杂通信系统的能力,而语言则是这种系统的任何特定例子。语言的科学研究被称为语言学。

שפה היא דרך תקשורת המבוססת על מערכת סמלים מורכבת בעלת חוקיות, המאפשרת לקודד ולארגן מידע בעל משמעויות רבות ומגוונות. נהוג להבדיל בין הסמל השפתי המסמן לבין המושג או התוכן המסומן בו, אשר יכול להיות מציאותי או מופשט.

Un lenguaje (del provenzal lenguatge y este del latín lingua) es un sistema de comunicación estructurado para el que existe un contexto de uso y ciertos principios combinatorios formales. Existen contextos tanto naturales como artificiales.

اللغة نسق من الإشارات والرموز، يشكل أداة من أدوات المعرفة، وتعتبر اللغة أهم وسائل التفاهم والاحتكاك بين أفراد المجتمع في جميع ميادين الحياة. وبدون اللغة يتعذر نشاط الناس المعرفي.

来源:维基百科

此演示展示了有限的功能集。访问 功能丰富的编辑器示例 以查看更多功能。

# 其他功能信息

文本部分语言功能在您的内容包含以不同文本方向编写的文本部分时特别有用,例如,当整个内容为英文但包含一些阿拉伯语引文时。

文本部分语言功能实现了 WCAG 3.1.2 部件语言 规范。

# 安装

⚠️ 新的导入路径

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

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

import { ClassicEditor, TextPartLanguage } from 'ckeditor5';

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

# 配置可用语言

要修改语言下拉菜单中显示的可用语言列表,请使用 config.language.textPartLanguage 配置选项。

以下示例显示了用于上面 演示 的配置

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // More of editor's configuration.
        // ...
        language: {
            textPartLanguage: [
                { title: 'Arabic', languageCode: 'ar' },
                { title: 'French', languageCode: 'fr' },
                { title: 'Hebrew', languageCode: 'he' },
                { title: 'Spanish', languageCode: 'es' }
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

您可能需要查看其他与语言相关的 CKEditor 5 功能

# 常用 API

The TextPartLanguage plugin registers

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

// Applies the language to the selected text part with the given language code.
editor.execute( 'textPartLanguage', { languageCode: 'es' } );

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

# 贡献

该功能的源代码可在 GitHub 上获得,网址为 https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-language