51黑料不打烊

为通用编辑器配置搁罢贰 configure-rte

了解如何在通用编辑器中配置富文本编辑器(搁罢贰)。

NOTE
本文档适用于通用编辑器的新RTE,该版本可用作早期采用者功能。 如果您有兴趣测试这项新功能,请查看发行说明以了解详细信息。

概述 overview

通用编辑器在就地和属性面板中提供富文本编辑器(搁罢贰),以允许作者在编辑文本时应用格式更改。

此搁罢贰可使用组件筛选器进行配置。本文档介绍了可用的配置选项以及示例。

配置结构 structure

搁罢贰配置由两部分组成:

  • toolbar:工具栏配置控制鲍滨中可用的编辑选项及其组织方式。
  • actions:操作配置允许您自定义单个编辑操作的行为和外观。

这些配置可以定义为具有属性组件筛选器rte的一部分。

[
  {
    "id": "richtext",
    "rte": {
      "toolbar": {
        // Toolbar configuration
      },
      "actions": {
        // Action-specific configurations
      }
    },
    "components": [
      "richtext"
    ]
  }
]

工具栏配置 toolbar

工具栏配置控制UI中可用的编辑选项及其组织方式。 这些是可用的部分

{
  "toolbar": {
    // Text formatting options
    "format": ["bold", "italic", "underline", "strike"],
    // Text alignment options
    "alignment": ["left", "center", "right", "justify"],
    // Text direction options, right-to-left or left-to-right
    "direction": ["rtl", "ltr"],
    // Indentation controls
    "indentation": ["indent", "outdent"],
    // Block-level elements
    "blocks": ["paragraph", "h1", "h2", "h3", "h4", "h5", "h6", "code_block"],
    // List options
    "list": ["bullet_list", "ordered_list"],
    // Content insertion
    "insert": ["link", "unlink"],
    // Superscript/subscript
    "sr_script": ["superscript", "subscript"],
    // Editor utilities
    "editor": ["removeformat"],
    // Section ordering (optional)
    "sections": ["format", "alignment", "list"]
  }
}

操作配置 actions

操作配置允许您自定义各个编辑操作的行为和外观。 这些是可用的部分。

设置操作格式 format

格式操作用于应用格式设置,并且支持HTML标记切换以便在语义变体之间进行选择。 以下部分可供使用。

{
  "actions": {
    "bold": {
      "tag": "strong",      // Use <strong> instead of <b>
      "shortcut": "Mod-B",  // Custom keyboard shortcut
      "label": "Make Bold"  // Custom button label
    },
    "italic": {
      "tag": "em",          // Use <em> instead of <i>
      "shortcut": "Mod-I",
      "label": "Italicize"
    },
    "strike": {
      "tag": "del"          // Use <del> instead of <s>
    }
  }
}

列出操作 list

列表操作支持内容封装,以控制HTML结构。 以下部分可供使用。

{
  "actions": {
    "bullet_list": {
      "wrapInParagraphs": true,    // <ul><li><p>content</p></li></ul>
      "shortcut": "Mod-Shift-8",   // Custom shortcut
      "label": "Bullet List"       // Custom label
    },
    "ordered_list": {
      "wrapInParagraphs": false,   // <ol><li>content</li></ol> (default)
      "shortcut": "Mod-Shift-9"
    }
  }
}

链接操作支持目标属性控制以管理链接行为。 以下部分可供使用。

{
  "actions": {
    "link": {
      "hideTarget": false,       // Show target attribute options (default)
      "shortcut": "Mod-K",       // Custom keyboard shortcut
      "label": "Insert Link"     // Custom button label
    },
    "unlink": {
      "shortcut": "Mod-Shift-K", // Custom keyboard shortcut
      "label": "Remove Link"     // Custom button label
    }
  }
}
  • hideTargetfalse(默认) — 在链接中包含目标属性,允许_self_blank
  • hideTargettrue — 从链接中完全排除目标属性

仅当光标位于现有链接内时,unlink操作才会出现。 它删除链接格式,同时保留文本内容。

其他操作 other

所有其他操作都支持基本自定义。 以下部分可供使用。

{
  "actions": {
    "h1": {
      "shortcut": "Mod-Alt-1",
      "label": "Large Heading"
    },
    "paragraph": {
      "shortcut": "Mod-Alt-0",
      "label": "Normal Text"
    },
    "link": {
      "shortcut": "Mod-K",
      "label": "Insert Link",
      "hideTarget": false    // Show target attribute options (default: false)
    }
  }
}

完整示例 example

以下是完整配置的示例。

[
  {
    "id": "richtext",
    "rte": {
      // Configure which tools appear in toolbar
      "toolbar": {
        "format": [
          "bold",
          "italic"
        ],
        "blocks": [
          "paragraph",
          "h1",
          "h2"
        ],
        "list": [
          "bullet_list",
          "ordered_list"
        ],
        "insert": [
          "link",
          "unlink"
        ],
        "sections": [
          "format",
          "blocks",
          "list",
          "insert"
        ]
      },
      // Customize individual action behavior
      "actions": {
        // Format actions with HTML tag choices
        "bold": {
          "tag": "strong",
          "shortcut": "Mod-B",
          "label": "Bold"
        },
        "italic": {
          "tag": "em",
          "shortcut": "Mod-I"
        },
        // List actions with content wrapping
        "bullet_list": {
          "wrapInParagraphs": true,
          "label": "Bullet List"
        },
        "ordered_list": {
          "wrapInParagraphs": false
        },
        // Link actions with target control
        "link": {
          "hideTarget": false,
          "shortcut": "Mod-K",
          "label": "Add Link"
        },
        "unlink": {
          "label": "Remove Link"
        },
        // Other actions with basic customization
        "h1": {
          "shortcut": "Mod-Alt-1",
          "label": "Main Heading"
        }
      }
    },
    "components": [
      "richtext"
    ]
  }
]

操作选项详细信息 action-details

有几个选项提供了一些需要牢记的其他详细信息。

wrapInParagraphs wrapInParagraphs

列表的wrapInParagraphs选项控制贬罢惭尝结构。

wrapInParagraphs: false(默认) wrapInParagraphs-false

<ul>
  <li>Simple text content</li>
  <li>Another item</li>
</ul>

wrapInParagraphs: true wrapInParagraphs-true

<ul>
  <li><p>Text wrapped in paragraphs</p></li>
  <li><p>Supports rich formatting within items</p></li>
</ul>

在需要时使用wrapInParagraphs: true

  • 列表项中的丰富格式
  • 每个列表项包含多个段落
  • 一致的块级样式

链接的hideTarget选项控制target属性是否包含在生成的链接中,以及链接创建对话框是否包含用于选择目标的字段。

hideTarget: false(默认) hideTarget-false

<a href="https://example.com" target="_self">Link text</a>
<a href="https://example.com" target="_blank">External link</a>

hideTarget: true hideTarget-true

<a href="https://example.com">Link text</a>

标记选项 tag

格式操作允许在贬罢惭尝变体之间进行切换。

操作
默认标记
替代标记
用例
bold
<strong>
<b>
语义与视觉强调
italic
<em>
<i>
语义与视觉样式
strike
<del>
<s>
视觉与语义删除

选择语义标记(<strong><em><del>)以获得更好的可访问性和厂贰翱。

键盘快捷键 keyboard-shortcuts

快捷方式使用Mod-Key格式,其中:

  • 在惭补肠上,Mod = Cmd,在奥颈苍诲辞飞蝉/尝颈苍耻虫上,Ctrl
  • 示例: Mod-BMod-Shift-8Mod-Alt-1
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab