突出显示

突出显示功能允许您使用不同的颜色标记文本片段。您可以将其用作标记（更改背景颜色）或笔（更改文本颜色）。

# 演示

选择要突出显示的文本。然后使用突出显示工具栏按钮 从下拉菜单中选择所需的颜色。

# 安装

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

import { ClassicEditor, Highlight } from 'ckeditor5';

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

# 配置突出显示选项

突出显示功能具有灵活的配置选项。

但是，插件具有预定义且有限数量的可用颜色。它还更注重功能而不是美观。要更改文本和背景颜色，请使用 字体颜色和背景颜色 插件。

突出显示功能在视图中使用内联 <mark> 元素。

# 下拉菜单

您可以配置编辑器支持的突出显示选项。使用 highlight.options 配置并定义突出显示样式。

例如，以下编辑器支持两种样式（绿色标记和红色笔）

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        highlight: {
            options: [
                {
                    model: 'greenMarker',
                    class: 'marker-green',
                    title: 'Green marker',
                    color: 'var(--ck-highlight-marker-green)',
                    type: 'marker'
                },
                {
                    model: 'redPen',
                    class: 'pen-red',
                    title: 'Red pen',
                    color: 'var(--ck-highlight-pen-red)',
                    type: 'pen'
                }
            ]
        },
        toolbar: [
            'heading', '|', 'bulletedList', 'numberedList', 'highlight', 'undo', 'redo'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 内联按钮

除了使用（默认）'highlight' 按钮外，该功能还支持在工具栏中直接使用单独按钮的配置

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: {
            items: [
                'heading',
                '|',
                'highlight:yellowMarker', 'highlight:greenMarker', 'highlight:pinkMarker',
                'highlight:greenPen', 'highlight:redPen', 'removeHighlight',
                '|',
                'undo', 'redo'
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 颜色和样式

# 使用 CSS 变量

突出显示功能使用在 CSS 变量 的力量定义在 样式表 中。因此，UI 和内容样式共享相同的颜色定义，您可以自定义这些定义

:root {
    /* Make green a little darker. */
    --ck-highlight-marker-green: #199c19;

    /* Make the yellow more "dirty". */
    --ck-highlight-marker-yellow: #cac407;

    /* Make red more pinkish. */
    --ck-highlight-pen-red: #ec3e6e;
}

# 内联颜色定义

您可以使用内联颜色值，例如 rgba(R, G, B, A)、#RRGGBB[AA] 或 hsla(H, S, L, A) 格式，而不是 CSS 变量。为此，请自定义 选项 并为每个选项定义 color 属性

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        highlight: {
            options: [
                {
                    model: 'greenMarker',
                    class: 'marker-green',
                    title: 'Green marker',
                    color: 'rgb(25, 156, 25)',
                    type: 'marker'
                },
                {
                    model: 'yellowMarker',
                    class: 'marker-yellow',
                    title: 'Yellow marker',
                    color: '#cac407',
                    type: 'marker'
                },
                {
                    model: 'redPen',
                    class: 'pen-red',
                    title: 'Red pen',
                    color: 'hsl(343, 82%, 58%)',
                    type: 'pen'
                }
            ]
        },
        toolbar: [
            'heading', '|', 'bulletedList', 'numberedList', 'highlight', 'undo', 'redo'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

然后，更新样式表中的类，使内容与编辑器的 UI 相对应。UI 按钮和文本中的实际突出显示应该具有相同的颜色。

.marker-green {
    background-color: rgb(25, 156, 25);
}
.marker-yellow {
    background-color: #cac407;
}
.pen-red {
    color: hsl(343, 82%, 58%);
}

# 相关功能

CKEditor 5 还有更多功能可以帮助您设置内容的样式

• 样式 – 将预配置的样式（如突出显示或剧透）应用于现有内容元素。
• 基本文本样式 – 必不可少的要素，如 粗体、斜体 等。
• 字体样式 – 控制字体 系列、大小、文本或背景颜色。
• 格式刷 – 轻松复制文本格式并在编辑过的文档中的其他位置应用它。
• 块引用 – 在富文本内容中包含块引用或摘录。
• 删除格式 – 轻松清除基本文本格式。

# 通用 API

的 Highlight 插件注册

• 的 'highlight' 下拉菜单。

• 的 'highlight' 命令。

  选项的数量及其名称对应于 highlight.options 配置选项。

  您可以通过使用所需的值执行命令来更改当前选择的突出显示

  editor.execute( 'highlight', { value: 'yellowMarker' } );
  

  value 属性对应于配置对象中的 model 属性。对于默认配置

  highlight.options = [
      { model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow Marker', color: 'var(--ck-highlight-marker-yellow)', type: 'marker' },
      { model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: 'var(--ck-highlight-marker-green)', type: 'marker' },
      { model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: 'var(--ck-highlight-marker-pink)', type: 'marker' },
      { model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: 'var(--ck-highlight-marker-blue)', type: 'marker' },
      { model: 'redPen', class: 'pen-red', title: 'Red pen', color: 'var(--ck-highlight-pen-red)', type: 'pen' },
      { model: 'greenPen', class: 'pen-green', title: 'Green pen', color: 'var(--ck-highlight-pen-green)', type: 'pen' }
  ]
  

  'highlight' 命令将接受相应的字符串作为值

  • 'yellowMarker' – 可用作 'highlight:yellowMarker' 按钮，
  • 'greenMarker' – 可用作 'highlight:greenMarker' 按钮，
  • 'pinkMarker' – 可用作 'highlight:pinkMarker' 按钮，
  • 'blueMarker' – 可用作 'highlight:blueMarker' 按钮，
  • 'redPen' – 可用作 'highlight:redPen' 按钮，
  • 'greenPen' – 可用作 'highlight:greenPen' 按钮。

  传递一个空的 value 将从选择中移除任何 highlight 属性

  editor.execute( 'highlight' );
  

# 贡献

该功能的源代码在 GitHub 上的 https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-highlight 上可用。