범용 편집기에 대한 RTE 구성 configure-rte

마지막 업데이트: 2026년 8월 19일

적용 대상:
Experience Manager as a Cloud Service

주제:
Developing

작성 대상:

Admin
Developer

범용 편집기에서 리치 텍스트 편집기(RTE)를 구성하는 방법을 이해합니다.

개요 overview

유니버설 편집기는 작성자가 텍스트를 편집할 때 서식 변경 사항을 적용할 수 있도록 하기 위해 서식 있는 텍스트 편집기(RTE)를 현재 위치 및 속성 패널에 제공합니다.

이 RTE는 구성 요소 필터를 사용하여 구성할 수 있습니다. 이 문서에서는 예제와 함께 사용 가능한 구성 옵션에 대해 설명합니다.

NOTE

유니버설 편집기 프로젝트를 시작하면 백엔드가 지원하는 모든 서식 있는 텍스트 기능(Edge Delivery이 포함된 AEM 또는 Headless 구현)이 자동으로 활성화되고 RTE의 모달 편집기 창에서 사용할 수 있습니다.

필요하지 않은 옵션을 비활성화할 수 있습니다.
프로젝트 유형과 호환되지 않는 옵션 활성화는 지원되지 않습니다.

구성 구조 structure

RTE 구성은 다음 두 부분으로 구성됩니다.

toolbar: 도구 모음 구성은 UI에서 사용할 수 있는 편집 옵션과 구성 방법을 제어합니다.
actions: 작업 구성을 사용하면 개별 편집 작업의 동작 및 모양을 사용자 지정할 수 있습니다.

이러한 구성은 속성이 rte인 구성 요소 필터의 일부로 정의할 수 있습니다.

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

도구 모음 구성은 UI에서 사용할 수 있는 편집 옵션과 구성 방법을 제어합니다. 사용 가능한 섹션은 다음과 같습니다

{
  "toolbar": {
    // Text formatting options
    "format": ["bold", "italic", "underline", "strike", "code_inline", "text_color"],
    // 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", "blockquote"],
    // List options
    "list": ["bullet_list", "ordered_list"],
    // Content insertion
    "insert": ["link", "unlink", "image", "table", "special_characters"],
    // Superscript/subscript
    "sr_script": ["superscript", "subscript"],
    // Editor utilities
    "editor": ["removeformat", "clean_unsupported_tags", "paste_text", "fullscreen", "find_and_replace"],
    // Advanced items (e.g. the class picker).
    "advanced": ["classes"],
    // Section ordering (optional)
    "sections": ["format", "alignment", "list"]
  }
}

액션 구성 action

액션 구성을 통해 개별 편집 액션의 동작 및 모양을 맞춤화할 수 있습니다. 사용 가능한 섹션입니다.

일반 작업 옵션 common-action-options

대부분의 작업은 다음과 같은 공통 옵션을 지원합니다.

shortcut?: 문자열 - 작업의 기본 키보드 단축키를 무시합니다(있는 경우).
label?: 문자열 - UI에서 작업에 사용되는 레이블을 재정의합니다.
hideInline?: 부울 - true일 때 은 컨텍스트 내(인라인) RTE 편집기 도구 모음에서 이 작업을 숨깁니다.

{
  "actions": {
    "bold": {
      "label": "Bold",
      "shortcut": "Mod-B",
      "hideInline": true
    }
  }
}

액션 포맷 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"
    }
  }
}

테이블 작업 table-actions

표 작업은 표 셀에서 HTML 구조를 제어하는 컨텐츠 줄바꿈을 지원합니다.

{
  "actions": {
    "table": {
      "wrapInParagraphs": false, // <td>content</td> (default)
      "shortcut": "Mod-Alt-T",   // Custom shortcut
      "label": "Insert Table"    // Custom label
    }
  }
}

표 구성 옵션 table-configuration-options

wrapInParagraphs: false(기본값) - 테이블 셀에 래핑되지 않은 텍스트 콘텐츠가 포함되어 있습니다.
wrapInParagraphs: true - 테이블 셀이 단락 태그의 콘텐츠를 래핑합니다.

샘플:

wrapInParagraphs: false일 때:

<!-- Single line -->
<td>Cell content</td>

<!-- Multiple paragraphs get <br> separation -->
<td>Line 1<br />Line 2</td>

wrapInParagraphs: true일 때:

<!-- Single paragraph -->
<td><p>Cell content</p></td>

<!-- Multiple paragraphs preserved -->
<td>
  <p>Line 1</p>
  <p>Line 2</p>
</td>

NOTE

단락(wrapInParagraphs: false)의 줄바꿈을 해제할 때 삭제기가 여러 단락 사이에 <br> 태그를 자동으로 삽입하여 시각적 줄 바꿈을 유지합니다. 이는 주요 리치 텍스트 편집기의 HTML 표준 및 일반적인 관행을 따릅니다.

속성 대화 상자 properties-dialog

테이블 플러그 인에는 다음 플래그를 사용할 수 있을 때 테이블 메뉴에서 열리는 세 개의 속성 편집기 대화 상자가 제공됩니다.

표 속성 — 바깥쪽 표의 너비/높이, 셀 간격, 셀 패딩, 맞춤, 테두리(너비/스타일/색상) 및 배경색을 편집합니다. 테두리 및 셀 패딩은 동일한 트랜잭션의 모든 셀에 대해 팬아웃되므로 시각적 결과가 사용자가 예상하는 내용과 일치합니다.
행 속성 — 바깥쪽 행의 행 유형(머리글/본문/바닥글), 정렬, 높이, 테두리(너비/스타일/색상) 및 배경색을 편집합니다. 행 형식이 섹션 전용입니다(TinyMCE의 기본 table_header_type: "section"과(와) 일치). 머리글 행이 직렬화 시 <thead>(으)로 이동하지만 해당 셀은 <td> 상태로 유지됩니다. <th>에 대해 셀 속성 -> 헤더 셀을(를) 사용합니다. 직렬화할 때 행은 실제 <thead>/<tbody>/<tfoot> 섹션(일치하는 TinyMCE/Word)으로 그룹화됩니다. 아래 스토리지 노트를 참조하십시오. 테두리는 행의 셀로 확장되므로 테두리 축소 시 렌더링됩니다.
셀 속성 — 선택한 셀의 셀 유형(셀/머리글 셀), 너비/높이, 가로 및 세로 정렬, 테두리(너비/스타일/색상) 및 배경색을 편집합니다. CellSelection이(가) 여러 셀에 걸쳐 있는 경우 선택한 모든 셀에 패치가 한 번에 적용됩니다. 셀 형식은 table_cell(<td>)과(와) table_header(<th>) 사이의 셀을 전환합니다.

세 가지 모두 기본적으로 비활성화(옵트인)되어 소비자가 명시적으로 활성화할 때까지 기능이 꺼진 나머지 RTE 구성 표면과 일치합니다. 대화 상자를 표시하려는 경우 소비자별로 옵트인:

{
  actions: {
    table: {
      showTableProperties: true, // default false: show "Table Properties" menu item
      showRowProperties: true,   // default false: show "Row Properties" menu item
      showCellProperties: true,  // default false: show "Cell Properties" menu item
    }
  }
}

속성 대화 상자 옵션 properties-dialog-options

각 ProseMirror 노드의 htmlAttrs.style을(를) 통해 왕복하는 대화 상자, 즉 사용자 지정 데이터 특성이 아닌 TinyMCE/Word와 같은 인라인 CSS입니다. 셀 너비도 스키마 수준 colwidth을(를) 기록하므로 PM의 테이블 기계에서 유지됩니다. 셀 유형은 노드 태그(<td>/<th>)에 의해 전달됩니다.

prosemirror-tables 스키마는 <thead>/<tbody>/<tfoot> 섹션 노드가 없는 플랫(table -> table_row -> cell)이므로 내부적으로 행의 머리글/본문/바닥글 의도가 <tr>에서 data-row-type 마커로 유지됩니다. 행의 유형이 변경되면 행이 동일한 트랜잭션 내에서 머리글 -> 본문 -> 바닥글 순서로 제자리에 다시 정렬되므로 편집기 캔버스는 내보낸 구조를 실시간으로 일치시킵니다(머리글 행은 위쪽으로 올라가고 바닥글 행은 TinyMCE처럼 아래쪽으로 내려감). 셀이 여러 행(rowspan > 1)에 걸쳐 있으면 이 편집기 내 순서 변경을 건너뜁니다. 여기서 행을 이동하면 그리드가 손상됩니다. 나가는 동안 sanitizeHTML은(는) 행을 실제 <thead>/<tbody>/<tfoot> 섹션(머리글 행 먼저, 바닥글 행 마지막)으로 그룹화하고 마커를 삭제하여 동일한 구조 TinyMCE/Word 내보내기를 생성합니다. 들어오는 길에 <tr>의 바깥쪽 섹션이 마커로 다시 읽히므로 HTML 라운드트립을 구분했습니다.

링크 작업 link

링크 작업은 링크 동작을 관리하기 위해 대상 속성 제어를 지원합니다. 다음 섹션을 사용할 수 있습니다.

{
  "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
    }
  }
}

링크 구성 옵션 link-options

hideTarget: false(기본값) - 링크에 대상 특성을 포함하여 _self, _blank 등을 허용합니다.
hideTarget: true - 링크에서 대상 특성을 완전히 제외

unlink 동작은 기존 링크 내에 커서가 있는 경우에만 나타납니다. 텍스트 콘텐츠를 유지하면서 링크 서식을 제거합니다.

이미지 작업 image

이미지 작업은 응답형 이미지 마크업을 생성하기 위해 그림 요소 래핑을 지원합니다. 다음 섹션을 사용할 수 있습니다.

{
  "actions": {
    "image": {
      "wrapInPicture": false,     // Use <img> tag (default)
      "shortcut": "Mod-Shift-I",  // Custom keyboard shortcut
      "label": "Insert Image"     // Custom button label
    }
  }
}

이미지 구성 옵션 image-options

wrapInPicture: false(기본값) - 단순 <img> 요소 생성
wrapInPicture: true - 반응형 디자인을 위해 <picture> 요소에서 이미지 줄바꿈

전체 화면 full-screen

전체 화면 작업은 편집기를 전체 화면 모드로 전환하거나 전체 화면 모드를 해제합니다.

{
  actions: {
    fullscreen: {
      label: "Fullscreen"; // Custom button label
    }
  }
}

전체 화면이 활성화되면 편집기 래퍼가 클래스 rte-fullscreen-wrapper을(를) 받습니다. 소비자 앱은 이 클래스를 타깃팅하여 사용자 지정 스타일 또는 CSS 속성(예: z-색인, 차원, 오버레이)을 적용할 수 있습니다. (범용 편집기에서 지원되지 않음)

들여쓰기 구성 indentation

들여쓰기에는 들여쓰기 동작의 범위를 제어하는 기능 수준 구성과 바로 가기 및 레이블에 대한 개별 작업 구성이 있습니다.

{
  "actions": {
    // Feature-level configuration
    "indentation": {
      "scope": "all"  // Controls what content can be indented (default: "all")
    },

    // Individual action configurations
    "indent": {
      "shortcut": "Tab",           // Custom keyboard shortcut
      "label": "Increase Indent"   // Custom button label
    },
    "outdent": {
      "shortcut": "Shift-Tab",     // Custom keyboard shortcut
      "label": "Decrease Indent"   // Custom button label
    }
  }
}

들여쓰기 범위 옵션 indentation-options

scope: all(기본값) - 들여쓰기/내어쓰기가 모든 콘텐츠에 적용됩니다.
- 목록: 목록 항목 중첩/중첩 해제
- 단락 및 제목: 일반 들여쓰기 수준 증가/감소
scope: lists - 들여쓰기/내어쓰기는 목록 항목에만 적용됩니다.
- 목록: 목록 항목 중첩/중첩 해제
- 단락 및 머리글: 들여쓰기 없음(이들에 대해 비활성화된 단추)

NOTE

Tab/Shift+Tab 키를 통한 목록 중첩은 일반 들여쓰기 설정과 독립적으로 작동합니다.

특수 문자 special-characters

special_characters 삽입 작업을 수행하면 특수 문자(기호, 수학 연산자, 통화 기호, 구두점, 화살표 등)를 삽입할 문자 선택 팝오버가 열립니다. 커서 위치에 있습니다.

{
  "toolbar": {
    "insert": ["link", "unlink", "image", "table", "special_characters"],
    "sections": ["insert"],
  },
  "actions": {
    "special_characters": {
      "label": "Special Characters"
    }
  }
}

일반적으로 사용되는 44개의 기본 문자 세트가 즉시 포함됩니다. 다음 두 가지 구성 옵션을 통해 문자 목록을 사용자 지정할 수 있습니다.

appendCharacters - 기본 집합에 문자 추가
characters - 기본 집합을 완전히 바꿉니다.

각 문자 항목에는 character(유니코드 문자)과 title(도구 설명/액세스 가능한 이름)이 있습니다.

기본값에 문자 추가 append-special-characters

{
  "actions": {
    "special_characters": {
      "appendCharacters": [
        { "character": "\u2605", "title": "Black star" },
        { "character": "\u2764", "title": "Heavy black heart" },
      ];
    }
  }
}

기본 특수 문자 바꾸기 replace-special-characters

{
  "actions": {
    "special_characters": {
      "characters": [
        { "character": "\u00A9", "title": "Copyright sign" },
        { "character": "\u00AE", "title": "Registered sign" },
        { "character": "\u2122", "title": "Trade mark sign" },
      ];
    }
  }
}

두 옵션을 함께 사용 both-special-character-options

이 예제에서는 characters을(를) 기본으로 사용한 다음 appendCharacters을(를) 사용하여 추가 문자를 추가합니다.

{
  "actions": {
    "special_characters": {
      "characters": [
        { "character": "\u00A9", "title": "Copyright sign" },
        { "character": "\u00AE", "title": "Registered sign" }
      ],
      "appendCharacters": [
        { "character": "\u2605", "title": "Black star" }
      ]
    }
  }
}

CSS 클래스 css-classes

classes 작업은 구성 가능한 CSS 클래스를 RTE 콘텐츠에 적용하는 드롭다운을 추가합니다. advanced 섹션에 항목으로 나열됩니다. 플러그인은 생성된 HTML에서 클래스 이름만 작성/제거합니다. 소비자 앱은 각 클래스에 대한 실제 CSS를 소유하며 RTE 콘텐츠가 렌더링되는 모든 위치(편집기, 미리보기, 게시)에서 이 CSS를 로드합니다.

드롭다운은 하나 이상의 옵션이 구성된 경우에만 나타납니다. 플러그인은 기본값 없이 제공됩니다.

{
  toolbar: {
    advanced: ["classes"],
    sections: ["blocks", "format", "advanced"],
  },
  actions: {
    classes: {
      label: "Add Custom Class",
      options: [
        { value: "rte-hero", label: "Hero title" },
        { value: "rte-lede", label: "Lede paragraph" },
        { value: "rte-callout", label: "Callout block" },
        { value: "rte-pill", label: "Pill (inline)" },
      ],
    },
  },
}

각 항목에는 값(HTML에 기록된 CSS 클래스 이름)과 레이블(드롭다운에 사람이 읽을 수 있는 텍스트)이 있습니다.

타겟은 캐럿에 가장 가까운 승리 규칙을 따릅니다.

관리되는 범위 내에서 선택 항목 비우기: 차단이 아닌 해당 범위 실행에 클래스가 적용됩니다. 다른 클래스를 선택하면 범위의 클래스가 교체됩니다. 사용자 지정 클래스 제거를 선택하면 해당 클래스가 지워집니다.
다른 곳에서 선택 항목 비우기(커서만): 선택한 클래스가 커서의 가장 가까운 블록 수준 상위 멤버(<p>, <h1> 등)에 적용됩니다. 커서가 단락을 래핑하는 목록 항목 또는 테이블 셀 안에 있으면 <li>/<td>/<th>은(는) 내부 단락이 아니라 클래스를 받습니다.
실제 선택: 선택한 텍스트가 <span class="...">에 래핑됩니다. 선택 영역에 이미 범위가 있으면 기존 범위의 클래스가 업데이트됩니다.
사용자 지정 클래스 제거: 캐럿이 확인되는 대상(범위 실행 또는 블록)에서 관리되는 클래스를 제거합니다. span에 남아 있는 유일한 특성이 관리되는 클래스인 경우 span 자체가 래핑 해제됩니다. 사용자 지정 클래스 제거 옵션은 관리되는 클래스가 현재 활성 상태인 경우에만 나타납니다.

구성된 옵션 목록에 포함되지 않은 기존 클래스는 그대로 유지됩니다. 관리되는 클래스만 교체됩니다. 소비자 설정 클래스는 플러그인과 안전하게 공존합니다.

드롭다운 반사:

커서만 배치하면 드롭다운에 가장 가까운 관리되는 클래스(있는 경우 캐럿의 범위)가 반영되고, 그렇지 않으면 커서 아래에 블록이 반영됩니다.
선택 항목을 사용하면 드롭다운에 선택 항목을 래핑하는 범위에 관리되는 클래스가 반영됩니다. 전체 선택 항목이 동일한 클래스를 공유하는 경우에만 해당합니다. 선택 영역이 혼합되어 있으면 선택된 항목이 없습니다.

블록 유형 block-types

blocks 도구 모음 섹션은 현재 블록을 구성된 블록 형식 간에 전환하는 드롭다운을 렌더링합니다. 지원되는 값은 paragraph, h1-h6, code_block 및 blockquote입니다.

blockquote은(는) 텍스트 블록인 paragraph/h1-h6/code_block과(와) 달리 래핑 블록입니다(ProseMirror content은(는) block+임). Quote을(를) 선택하면 현재 블록이 <blockquote>에 래핑됩니다. 그러면 캐럿이 안에 있는 동안 드롭다운에 Quote이(가) 선택된 것으로 표시됩니다. 따옴표 안에 있는 동안 다른 블록 형식(예: 단락)을 선택하면 먼저 블록이 따옴표에서 해제되므로 따옴표도 해제됩니다. 이는 TinyMCE의 블록 드롭다운을 미러링합니다.
래핑 노드이므로 <blockquote>에는 여러 단락, 목록 또는 중첩된 따옴표가 포함될 수 있습니다. 이렇게 하면 외부에서 작성된 콘텐츠를 무가치하게 라운드트립 할 수 있습니다. TinyMCE(레거시 콘텐츠)와 Word(붙여넣기)가 모두 <blockquote><p>…</p></blockquote>(종종 다중 단락)을 내보내 해당 구조가 병합되지 않고 로드, 편집 및 직렬화 시 유지됩니다.
모든 블록 형식과 마찬가지로 소비자 앱은 RTE 콘텐츠가 렌더링되는 모든 곳에서 <blockquote> 스타일을 시각적으로 표시하는 CSS를 소유합니다.

{
  "toolbar": {
    "blocks": ["paragraph", "h1", "h2", "h3", "code_block", "blockquote"],
    "sections": ["blocks"],
  },
  "actions": {
    "blockquote": {
      "label": "Quote", // Custom dropdown label
    },
  },
}

텍스트로 붙여넣기 paste-as-text

paste_text 편집기 작업을 사용하면 표준 일반 텍스트로 붙여넣기 워크플로를 사용할 수 있습니다.

기본 바로 가기: Mod-Shift-v(macOS의 경우 Cmd+Shift+V, Windows/Linux의 경우 Ctrl+Shift+V)
동작: 텍스트/일반 붙여넣기(원본 서식 무시)
- 목록에서 새 행은 새 목록 항목을 만듭니다.

{
  "toolbar": {
    "editor": ["removeformat", "paste_text"]
  },
  "actions": {
    "paste_text": {
      "shortcut": "Mod-Shift-v",
      "label": "Paste as Text"
    }
  }
}

찾기 및 바꾸기 find-replace

find_and_replace 편집기 작업은 prosemirror-search(강조 표시 일치)와 FIND_AND_REPLACE_PLUGIN_KEY에서 입력한 명령 플러그인을 사용합니다.

통합: toolbar.editor에 find_and_replace이(가) 포함된 경우 편집기의 ProseMirror 플러그인에 createFindAndReplacePlugin()을(를) 추가합니다.
API: FIND_AND_REPLACE_PLUGIN_KEY.getState(state)을(를) 사용하여 find, replaceNext, replaceAll 및 getMatchCount에 액세스합니다.
스타일: 앱에서 .ProseMirror-search-match 및 .ProseMirror-active-search-match에 대한 CSS를 로드하는지 확인합니다(prosemirror-search의 스타일/search.css 또는 이와 동등한 사용자).

{
  "toolbar": {
    "editor": ["find_and_replace"],
    "sections": ["editor"],
  },
  "actions": {
    "find_and_replace": {
      "label": "Find and replace",
    },
  },
}

기타 작업 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",
          "text_color"
        ],
        "blocks": [
          "paragraph",
          "h1",
          "h2"
        ],
        "list": [
          "bullet_list",
          "ordered_list"
        ],
        "insert": [
          "link",
          "unlink",
          "image",
          "special_characters"
        ],
        "editor": [
          "removeformat",
          "paste_text"
        ],
        "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"
        },
        // Image actions with picture wrapping
        "image": {
          "wrapInPicture": false, // Use <img> tag instead of <picture>
          "shortcut": "Mod-Shift-I",
          "label": "Insert Image",
        },
        // Special characters with custom additions
        "special_characters": {
          "label": "Special Characters",
          "appendCharacters": [{ "character": "\u2605", "title": "Black star" }],
        },
        // Other actions with basic customization
        "paste_text": {
          "shortcut": "Mod-Shift-v",
          "label": "Paste as Text",
        },
        "h1": {
          "shortcut": "Mod-Alt-1",
          "label": "Main Heading"
        }
      }
    }
  }
]

작업 옵션 세부 정보 action-details

몇 가지 옵션에는 기억해야 할 중요한 추가 세부 사항이 있습니다.

`wrapInParagraphs` wrapInParagraphs

목록에 대한 wrapInParagraphs 옵션은 HTML 구조를 제어합니다.

`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을(를) 사용합니다.

목록 항목 내의 서식
목록 항목당 여러 단락
일관된 블록 수준 스타일

`wrapInPicture`

이미지에 대한 wrapInPicture 옵션은 이미지 콘텐츠에 대해 생성된 HTML 구조를 제어합니다.

wrapInPicture: false(기본값) wrapinpicture-false

<img src="image.jpg" alt="Description" />

wrapInPicture: true wrapinpicture-true

<picture>
  <img src="image.jpg" alt="Description" />
</picture>

필요한 경우 wrapInPicture: true을(를) 사용합니다.

<source>개 요소로 반응형 이미지를 지원합니다.
미술 감독 기능.
고급 이미지 기능에 대한 향후 교정.
일관된 그림 요소 구조.

NOTE

wrapInPicture: true이(가) 활성화되면 다양한 미디어 쿼리 및 형식에 대한 추가 <source> 요소로 이미지를 개선할 수 있으므로 반응형 디자인에 보다 유연하게 사용할 수 있습니다.

링크 대상 옵션 link-target

링크에 대한 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>

이미지에 링크 비활성화 disableforimages

링크에 대한 disableForImages 옵션은 사용자가 이미지 및 그림 요소에 링크를 만들 수 있는지 여부를 제어합니다. 이는 인라인 <img> 요소와 블록 수준 <picture> 요소 모두에 적용됩니다.

`disableForImages: false` (기본값) disableforimages-false

사용자는 이미지를 선택하여 링크로 래핑할 수 있습니다.

<!-- Inline image with link -->
<a href="https://example.com">
  <img src="image.jpg" alt="Description" />
</a>

<!-- Block-level picture with link -->
<a href="https://example.com">
  <picture>
    <img src="image.jpg" alt="Description" />
  </picture>
</a>

disableForImages: true disableforimages-true

이미지 또는 그림을 선택하면 링크 버튼이 비활성화됩니다. 사용자는 텍스트 콘텐츠에만 링크를 만들 수 있습니다.

<!-- Images remain standalone without links -->
<img src="image.jpg" alt="Description" />

<picture>
  <img src="image.jpg" alt="Description" />
</picture>

<!-- Links work normally on text -->
<a href="https://example.com">Link text</a>

다음을 원할 때 disableForImages: true을(를) 사용합니다.

연결된 이미지를 방지하여 시각적 일관성을 유지합니다.
탐색에서 이미지를 분리하여 콘텐츠 구조를 간소화합니다.
이미지 연결을 제한하는 컨텐츠 정책을 적용합니다.
콘텐츠의 접근성 복잡성을 줄입니다.

NOTE

이 설정은 이미지에 새 링크를 만드는 기능에만 영향을 줍니다. 콘텐츠의 이미지에서 기존 링크가 제거되지는 않습니다.

태그 옵션 tag

형식 작업을 사용하면 HTML 변형 간을 전환할 수 있습니다.

작업

기본 태그

대체 태그

사용 사례

bold

<strong>

<b>

의미론적 강조와 시각적 강조

italic

<em>

<i>

의미 체계와 시각적 스타일 비교

strike

<del>

<s>

시각적 대 의미 체계 삭제

액세스 가능성 및 SEO 향상을 위해 의미 체계 태그(<strong>, <em>, <del>)를 선택하십시오.

인라인 코드 inline-code

code_inline 형식 옵션은 텍스트 범위를 인라인 코드로 표시하여 <code>을(를) 렌더링합니다(예: 문장 내에서 foo() 호출을 참조). bold/italic/strike과(와) 달리 태그 전환 옵션이 없으며 다른 모든 표시는 제외됩니다. 인라인 코드는 축어적으로 렌더링되므로 bold/italic/link을(를) 위에 적용할 수 없습니다. 기본 키보드 단축키는 Mod-e입니다.

이는 blocks 드롭다운에서 사용할 수 있는 code_block 블록(<pre><code>)과 다릅니다. code_inline은(는) 줄 내의 인라인 표시이지만 code_block은(는) 독립 실행형 여러 줄 블록입니다. 코드 블록에는 일반 텍스트만 남으므로(표시 없음) 인라인 <code>은(는) <pre> 내에 중첩되지 않습니다.

Use the <code>foo()</code> helper here.

텍스트 색상 color

text_color 형식 옵션을 사용하면 텍스트 색상 기능이 편집기에 추가됩니다.

<!-- With color applied -->
<span style="color: #ff0000">Colored text</span>

<!-- Color removed -->
Plain text

또한 이 플러그인은 이전 버전과의 호환성을 위해 레거시 <font color="..."> 요소를 구문 분석합니다.

키보드 단축키 keyboard-shortcuts

바로 가기는 Mod-Key 형식을 사용합니다. 여기서

Mod = Cmd(Mac), Ctrl(Windows/Linux)
예: Mod-B, Mod-Shift-8, Mod-Alt-1

지원되지 않는 HTML unsupported-html

기본적으로 알 수 없는 HTML 태그는 편집기에서 구문 분석하면 제거됩니다. 이를 유지하려면 unsupportedHtml 구성 옵션을 통해 옵트인하십시오.

const rteConfig = {
  unsupportedHtml: true, // preserve unknown HTML tags (default: false)
};

값

비헤이비어

false (기본값)

구문 분석 중에 알 수 없는 HTML 태그가 삭제됩니다.

true

알 수 없는 HTML 태그는 콘텐츠가 안전하게 왕복할 수 있도록 사용자 지정 지원되지 않는 블록 노드에 래핑됩니다.

`unsupportedHtmlOptions.structuralTags` (옵션) unsupportedhtmloptions

지원되는 HTML으로 처리되는 추가 구조적 태그를 제어하려면 unsupportedHtmlOptions.structuralTags을(를) 사용하십시오.

const rteConfig = {
  unsupportedHtml: true,
  unsupportedHtmlOptions: {
    structuralTags: ["div", "section"], // preserve configured tags as supported
  },
};

값

비헤이비어

생략됨/[]

추가 구조적 태그는 화이트리스트에 추가되지 않습니다.

["div"]

<div>은(는) 지원되는 HTML으로 처리되며 지원되지 않는 것으로 래핑되지 않습니다.

["div", "section"]

<div>과(와) <section>은(는) 모두 지원되는 HTML으로 처리되며 지원되지 않는 것으로 래핑되지 않습니다.

NOTE

unsupportedHtmlOptions은(는) unsupportedHtml을(를) 사용하도록 설정한 경우에만 동작에 영향을 줍니다.

활성화되면 편집기는 래퍼 태그(unsupported-block/unsupported-inline) 및 래퍼 클래스를 사용하여 지원되지 않는 노드를 렌더링합니다. 소비자 앱은 이 클래스에 대한 스타일을 제공해야 합니다(예: 테두리, 패딩, 배경). 블록 내의 태그 레이블은 rte-unsupported-label을(를) 사용하며, 이 값은 사용자 지정할 수도 있습니다.

rte-unsupported-block
rte-unsupported-inline
rte-unsupported-label

소비자 앱은 이러한 클래스에 대한 스타일 지정(예: 테두리, 간격, 배경 및 인라인 정렬)을 제공해야 합니다.

unsupportedHtml이(가) 활성화되면 소비자는 지원되지 않는 블록 또는 인라인 노드를 복사하면 클립보드에 내부 텍스트가 포함되고(일반 텍스트만) 사용자가 콘텐츠를 다른 곳에 붙여넣을 수 있도록 지원되지 않는 노드 플러그인(예: createUnsupportedNodesPlugin())을 추가해야 합니다.

recommendation-more-help

experience-manager-cloud-service-help-main-toc

범용 편집기에 대한 RTE 구성 configure-rte

개요 overview

구성 구조 structure

도구 모음 구성 toolbar

액션 구성 action

일반 작업 옵션 common-action-options

액션 포맷 format

작업 나열 list

테이블 작업 table-actions

표 구성 옵션 table-configuration-options

속성 대화 상자 properties-dialog

속성 대화 상자 옵션 properties-dialog-options

링크 작업 link

링크 구성 옵션 link-options

이미지 작업 image

이미지 구성 옵션 image-options

전체 화면 full-screen

들여쓰기 구성 indentation

들여쓰기 범위 옵션 indentation-options

특수 문자 special-characters

기본값에 문자 추가 append-special-characters

기본 특수 문자 바꾸기 replace-special-characters

두 옵션을 함께 사용 both-special-character-options

CSS 클래스 css-classes

블록 유형 block-types

텍스트로 붙여넣기 paste-as-text

찾기 및 바꾸기 find-replace

기타 작업 other

전체 예 example

작업 옵션 세부 정보 action-details

wrapInParagraphs wrapInParagraphs

wrapInParagraphs: false (기본값) wrapInParagraphs-false

wrapInParagraphs: true wrapInParagraphs-true

wrapInPicture

wrapInPicture: false(기본값) wrapinpicture-false

wrapInPicture: true wrapinpicture-true

링크 대상 옵션 link-target

hideTarget: false (기본값) hideTarget-false

hideTarget: true hideTarget-true

이미지에 링크 비활성화 disableforimages

disableForImages: false (기본값) disableforimages-false

disableForImages: true disableforimages-true

태그 옵션 tag

인라인 코드 inline-code

텍스트 색상 color

키보드 단축키 keyboard-shortcuts

지원되지 않는 HTML unsupported-html

unsupportedHtmlOptions.structuralTags (옵션) unsupportedhtmloptions

`wrapInParagraphs` wrapInParagraphs

`wrapInParagraphs: false` (기본값) wrapInParagraphs-false

`wrapInParagraphs: true` wrapInParagraphs-true

`wrapInPicture`

`hideTarget: false` (기본값) hideTarget-false

`hideTarget: true` hideTarget-true

`disableForImages: false` (기본값) disableforimages-false

`unsupportedHtmlOptions.structuralTags` (옵션) unsupportedhtmloptions