Show Menu
화제×

Configure the Rich Text Editor

RTE(Rich Text Editor)는 작성자가 텍스트 컨텐츠를 편집할 수 있는 다양한 기능을 제공합니다. 아이콘, 선택 상자, 도구 모음 및 메뉴는 WYSIWYG 텍스트 편집 환경을 위해 제공됩니다.
작성을 위해 RTE 기능을 사용하는 방법에 대한 자세한 내용은 작성을 위해 리치 텍스트 편집기 사용을 참조하십시오. 작성 구성 요소에서 사용 가능한 기능을 활성화, 비활성화 및 확장하도록 RTE를 구성할 수 있습니다. 다음 워크플로우에서는 Experience Manager에서 RTE 구성 작업을 완료해야 하는 권장 순서를 보여줍니다.
그림:리치 텍스트 편집기를 구성하는 일반적인 워크플로우

터치 지원 UI 및 클래식 UI 이해

터치가 활성화된 UI는 AEM의 표준 UI입니다. Adobe는 버전 5.6에서 제작 환경을 위한 반응형 디자인으로 Touch UI를 도입했습니다.Touch UI는 터치 및 데스크톱 장치용으로 설계되었습니다. UI는 원래 클래식 UI와 상당히 다릅니다.
그림:터치 지원 UI의 리치 텍스트 편집기 도구 모음
그림:클래식 UI의 리치 텍스트 편집기 도구 모음

다양한 편집 모드

작성자는 다양한 구성 요소 모드를 사용하여 AEM에서 텍스트 컨텐츠를 만들고 편집할 수 있습니다. 컨텐츠 작성 및 서식 지정을 위한 툴바 옵션과 다양한 편집 모드에서 RTE 지원 구성 요소의 사용자 환경은 RTE 구성에 따라 다릅니다.
편집 모드
편집 영역
권장 기능 활성화
터치 UI
클래식 UI
인라인
간단한 편집을 위한 즉석 편집대화 상자를 열지 않고 서식 지정
최소 RTE 기능
Y
Y
RTE 전체 화면
전체 페이지
모든 필수 RTE 기능
Y
N
대화 상자
대화 상자는 페이지 컨텐츠 맨 위에 있지만 전체 페이지를 포함하지 않습니다.
클래식 UI의 모든 필수 RTE 기능;터치 UI의 기능을 동적으로 사용
Y
Y
대화 상자 전체 화면
전체 화면 모드와 동일;RTE와 함께 대화 상자의 필드를 포함합니다.
모든 필수 RTE 기능
Y
N
소스 편집 기능은 터치 지원 UI의 인라인 편집 모드에서 사용할 수 없습니다. 전체 화면 모드에서는 이미지를 드래그할 수 없습니다. 다른 모든 기능은 모든 모드에서 작동합니다.

인라인 편집

천천히 두 번 탭/클릭하여 열면 페이지 내에서 컨텐츠를 편집할 수 있습니다. 기본 옵션이 있는 작은 도구 모음이 표시됩니다.
그림:터치 지원 UI의 기본 툴바를 사용한 인라인 편집
클래식 UI에서 구성 요소를 느리게 두 번 클릭하면 인라인 편집이 가능하며 주황색 윤곽선이 내용을 강조 표시합니다. Content Finder가 열려 있으면 창 맨 위에 사용 가능한 RTE 서식 지정 옵션이 있는 도구 모음이 표시됩니다. Content Finder가 열려 있지 않으면 서식 옵션이 표시되지 않고 기본 텍스트 편집만 할 수 있습니다.

Full screen editing

AEM 구성 요소는 페이지 컨텐츠를 숨기고 사용 가능한 화면을 차지하는 전체 화면 보기에서 열 수 있습니다. 대부분의 편집 옵션을 제공하므로 전체 화면 편집이 인라인 편집의 자세한 버전을 고려하십시오. 인라인 편집 모드를 사용할 때 작은 을 클릭하여 열 수 있습니다.
대화 상자 전체 화면 모드에서는 자세한 RTE 도구 모음, 대화 상자 모드에서 사용할 수 있는 옵션 및 구성 요소가 제공됩니다. RTE가 포함된 대화 상자와 다른 구성 요소에만 적용됩니다.
그림:터치 지원 UI의 전체 화면 모드에서 편집할 때 자세한 RTE 도구 모음

대화 상자 편집

클래식 UI에서 구성 요소를 두 번 클릭하면 컨텐츠를 편집할 수 있는 대화 상자가 열립니다. 대화 상자가 기존 페이지 상단에 열립니다. 일부 특정 시나리오에서는 대화 상자가 팝업 창으로 열립니다. 예를 들어, 텍스트 구성 요소가 다중 열 페이지 레이아웃의 열에 포함되어 있고 대화 상자에 사용할 수 있는 영역이 적을 경우
그림:터치 지원 UI의 대화 상자 편집 모드
그림:편집용 세부 도구 모음이 포함된 클래식 UI의 대화 상자

RTE 플러그인 및 관련 기능 정보

이 기능은 다음과 같이 일련의 플러그인을 통해 사용할 수 있습니다.
  • A features 속성:
    • 이 플러그인은 해당 플러그인의 기본 기능을 활성화하거나 비활성화하는 데 사용됩니다.
    • 표준화된 절차를 사용하여 구성할 수 있습니다.
  • 적절한 경우, 보다 많은 속성 및 옵션을 사용하여 특수 구성이 필요합니다.
해당 플러그인과 관련된 노드의 features 속성 값에 따라 RTE의 기본 기능이 활성화되거나 비활성화됩니다.
다음 표에는 현재 플러그인이 표시되어 있습니다.
플러그인 ID
features
설명
편집
cut copy paste-default paste-plaintext paste-wordhtml
찾기 바꾸기
찾기 및 바꾸기
굵은 기울임꼴 밑줄
이미지
기본 이미지 지원(컨텐츠 또는 컨텐츠 파인더에서 드래그). 브라우저에 따라 작성자에 대한 지원에는 다른 동작이 있습니다
이 값을 정의하려면 탭 크기를 참조하십시오.
justfyleft justfycenter justifyright
단락 정렬을 참조하십시오.
modifylink 연결 해제 앵커
순서가 없는 들여쓰기 내어쓰기
이 플러그인은 들여쓰기 및 목록을 모두 제어합니다.중첩된 목록 포함
specialchars sourceedit
기타 도구를 사용하여 작성자는 특수 문자를 입력하거나 HTML 소스를 편집할 수 있습니다. 또한 목록을 정의하려는 경우 전체 범위의 특수 문자를 추가할 수 있습니다.
Paraformat
paraformat
기본 단락 형식은 단락, 머리글 1, 머리글 2 및 머리글 3( <p> , <h1> , <h2> <h3> )입니다. 단락 형식을 추가하거나 목록을 확장할 수 있습니다.
spellcheck
checktext
styles
styles
subsuperscript
subscript superscript
기본 포맷의 익스텐션, 하위 및 수퍼 스크립트 추가
표 제거 가능한 삽입표 제거 제거삽입열 제거열 삭제volumn 셀prop분할셀 선택열
표 스타일 표 스타일 구성 구성을 참조하십시오.
실행 취소
다시 실행 취소
실행 취소 및 재실행 작업의 기록 크기입니다.
대화 상자 모드에서는 전체 화면 플러그인이 지원되지 않습니다. 전체 화면 모드로 도구 모음을 구성하는 dialogFullScreen 설정을 사용합니다.

구성 경로 및 위치 이해

편집 모드
터치 UI 위치
클래식 UI 위치
인라인
cq:editConfig/cq:inplaceEditing
cq:editConfig/cq:inplaceEditing
전체 화면
cq:editConfig/cq:inplaceEditing
해당 사항 없음
대화 상자
cq:dialog
dialog
전체 화면 대화 상자
cq:dialog
해당 사항 없음
다음으로 노드 이름을 지정하지 cq:inplaceEditing 마십시오 config . 노드에서 다음 속성을 cq:inplaceEditing 정의합니다.
  • 이름 : configPath
  • 유형 : String
  • :실제 구성을 포함하는 노드의 경로
RTE 구성 노드의 이름을 config 다음으로 지정하지 마십시오. 그렇지 않으면 RTE 구성은 관리자만 적용되고 그룹의 사용자에 대해서는 적용되지 않습니다 content-author .
Touch UI의 대화 상자 편집 모드에 적용되는 다음 속성을 구성합니다.
  • useFixedInlineToolbar :RTE 노드(sling:resourceType= cq/gui/components/authoring/dialog/richtext 와 함께)에 정의된 이 부울 속성을 로 True 설정하면 부동 대신 RTE 도구 모음이 수정됩니다.
    이 속성이 true이면 Richtext 편집은 기본적으로 "foundation-contentloaded" 이벤트에서 시작됩니다.
    이를 방지하려면 속성을 customStart 로 설정하고 'rte-start' 이벤트를 True 트리거하여 RTE 편집을 시작합니다. 이 속성이 'true'이면 기본 동작인 클릭 시작이 작동하지 않습니다.
  • customStart :RTE 노드에 정의된 이 부울 속성을 True 설정하여 이벤트를 트리거하여 RTE를 시작할 시기를 제어합니다 rte-start .
  • rte-start :RTE 편집을 시작할 contenteditable-div 때 RTE에서 이 이벤트를 트리거합니다. 이 작업은 true로 설정된 경우에만 customStart 작동합니다.
터치 활성화 대화 상자에서 RTE를 사용하는 경우 문제를 방지하려면 속성을 true useFixedInlineToolbar 로 설정해야 합니다.

즉석 편집 사용자 정의

다음 속성을 구성하여 텍스트 편집기에서 시작하는 HTML 선택기를 정의할 수 있습니다.
  • editElementQuery - 에 정의된 cq:InplaceEditingConfig 이 속성은 텍스트 구성 요소에 대한 인라인 편집을 시작할 HTML 요소의 선택기를 지정하는 데 사용됩니다. 지정하지 않으면 인라인 편집이 텍스트 구성 요소 HTML에서 직접 시작됩니다.
  • textPropertyName - 에 정의된 cq:InplaceEditingConfig 이 속성은 텍스트 구성 요소의 HTML 값이 인라인 편집 후에 유지될 컨텐츠 노드에 저장되는 속성의 이름을 지정하는 데 사용됩니다.
대화 상자의 해당 속성은 입니다 name .

플러그인을 활성화하여 RTE 기능 활성화

RTE 기능은 여러 플러그인을 통해 제공되며 각 플러그인은 기능 속성을 갖습니다. 각 플러그인의 다양한 기능을 활성화하거나 비활성화하도록 기능 속성을 구성할 수 있습니다.
RTE 플러그인의 세부 구성에 대해서는 RTE 플러그인을 활성화하고 구성하는 방법을 참조하십시오 .
이 샘플 구성을 다운로드하여 RTE를 구성하는 방법을 이해합니다. 이 패키지에서 모든 기능이 활성화됩니다.
템플릿 편집자는 핵심 구성 요소 텍스트 구성 요소를 사용하여 사용자 인터페이스에 있는 많은 RTE 플러그인을 컨텐츠 정책으로 구성할 수 있으므로 기술 구성이 필요하지 않습니다. 컨텐츠 정책은 설명된 대로 RTE 사용자 인터페이스 구성과 함께 사용할 수 있습니다. 자세한 내용은 RTE 사용자 인터페이스 설정 및 컨텐츠 정책 , 페이지 템플릿 만들기 및 핵심 구성 요소 개발자 설명서를 참조하십시오.
참조용으로 기본 텍스트 구성 요소(표준 설치의 일부로 제공)는 다음 위치에서 찾을 수 있습니다.
  • /libs/wcm/foundation/components/text
  • /libs/foundation/components/text
고유한 텍스트 구성 요소를 만들려면 이러한 구성 요소를 편집하는 대신 위의 구성 요소를 복사하십시오.

RTE 도구 모음 구성

AEM에서는 다양한 편집 모드에 대해 리치 텍스트 편집기의 UI를 다르게 구성할 수 있습니다. 기본 설정은 아래에 제공됩니다. 요구 사항에 따라 이러한 기본값을 무시할 수 있습니다.
최상의 제작 환경을 위해:
  • 부동 대화 상자에서 부동 대화 상자의 크기가 작으므로 팝업이 없는 플러그인만 활성화합니다.
  • 전체 화면 대화 상자에서 모든 필수 플러그인을 사용할 수 있고 플러그인과 같이 더 큰 팝업이 있는 플러그인도 사용할 수 Paste 있습니다. 아래 설명된 dialogFullScreen 구성을 사용하십시오.
<uiSettings jcr:primaryType="nt:unstructured">
  <cui jcr:primaryType="nt:unstructured">
    <inline
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]">
      <popovers jcr:primaryType="nt:unstructured">
        <justify
          jcr:primaryType="nt:unstructured"
          items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
          ref="justify"/>
        <lists
          jcr:primaryType="nt:unstructured"
          items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
          ref="lists"/>
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </inline>
    <dialogFullScreen
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
      <popovers jcr:primaryType="nt:unstructured">
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </dialogFullScreen>
    <tableEditOptions
      jcr:primaryType="nt:unstructured"
      toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]">
    </tableEditOptions>
  </cui>
</uiSettings>

인라인 모드 및 전체 화면 모드에 서로 다른 UI 설정이 사용됩니다. toolbar 속성은 도구 모음의 단추를 지정하는 데 사용됩니다. 예를 들어 단추 자체가 기능인 경우(예: Bold ) PluginName#FeatureName (예: links#modifylink ) 로 지정됩니다. 단추가 팝오버(플러그인의 일부 기능 포함)인 경우 #PluginName (예: #format )로 지정됩니다. 구분 기호(| )을(를) '-'로 지정할 수 있습니다.
인라인 또는 전체 화면 모드 아래의 팝업 노드에는 사용 중인 팝오버 목록이 포함되어 있습니다. 노드 아래의 각 하위 노드의 이름은 popovers 플러그인(예: format )의 이름을 따릅니다. 여기에는 플러그인 기능 목록이 items 포함된 속성이 있습니다(예: format#bold ).

RTE 사용자 인터페이스 설정 및 컨텐츠 정책

관리자는 위에 설명된 대로 구성을 수행하는 대신 컨텐츠 정책을 사용하여 RTE 옵션을 제어할 수 있습니다. 컨텐츠 정책은 편집 가능한 템플릿의 일부로 사용할 때 구성 요소의 디자인 속성을 정의합니다. 예를 들어 RTE를 사용하는 텍스트 구성 요소가 편집 가능한 템플릿과 함께 사용되는 경우 컨텐츠 정책은 굵게 표시된 옵션을 사용할 수 있고 단락 서식 옵션을 사용할 수 있음을 정의할 수 있습니다. 컨텐츠 정책은 다시 사용할 수 있으며 여러 템플릿에 적용할 수 있습니다.
AEM 6.4 서비스 팩 3부터 사용자 인터페이스 구성에서 컨텐츠 정책으로 다운스트림되는 RTE 흐름의 사용 가능한 옵션입니다.
  • 사용자 인터페이스 구성 설정은 컨텐츠 정책에 사용할 수 있는 옵션을 정의합니다.
  • RTE의 사용자 인터페이스 구성이 제거되었거나 항목을 활성화하지 않으면 콘텐츠 정책에서 항목을 구성할 수 없습니다.
  • 작성자는 사용자 인터페이스 구성 및 컨텐츠 정책에 의해 사용 가능한 기능에만 액세스할 수 있습니다.
예를 들어 텍스트 코어 구성 요소 설명서를 볼 수 있습니다.

도구 모음 아이콘과 명령 간의 매핑 사용자 정의

RTE 도구 모음에 표시된 Coral 아이콘과 사용 가능한 명령 간의 매핑을 사용자 정의할 수 있습니다. Coral 아이콘 외에는 다른 아이콘을 사용할 수 없습니다.
  1. under icons 라는 노드를 uiSettings/cui 만듭니다.
  2. 아래에 개별 아이콘에 대한 노드를 만듭니다.
  3. 각 개별 아이콘 노드에서 Coral 아이콘 및 아이콘에 매핑할 명령을 지정합니다.
아래는 Bold 명령을 Coral 아이콘에 매핑하는 샘플 조각을 textItalic 제공합니다.
<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true"> 
    <rtePlugins jcr:primaryType="nt:unstructured"> 
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/> 
    </rtePlugins> 
    <uiSettings jcr:primaryType="nt:unstructured"> 
        <cui jcr:primaryType="nt:unstructured"> 
            <inline jcr:primaryType="nt:unstructured" 
                toolbar="[format#bold,format#italic,format#underline,links#modifylink,links#unlink]"> 
            </inline> 
            <icons jcr:primaryType="nt:unstructured"> 
                <bold jcr:primaryType="nt:unstructured" 
                    command="format#bold" 
                    icon="textItalic"/> 
            </icons> 
        </cui> 
    </uiSettings> 
</text>

CoralUI 2 리치 텍스트 편집기로 전환

페이지에서 CoralUI 2 RTE clientlib 또는 CoralUI 3 RTE clientlib을 포함할 수 있습니다. 기본적으로 리치 텍스트 편집기에는 CoralUI 3 RTE clientlib이 포함됩니다. CoralUI 2 RTE로 전환하려면 다음 단계를 수행하십시오.
Adobe는 우수 사례로 전환을 권장하지 않습니다. CoralUI 2 RTE로 마지막 수단으로 전환합니다. CoralUI 2 RTE용 사용자 정의 플러그인은 플러그인이 클래스와 같은 RTE 내부 기능에 종속되지 않는 경우 CoralUI 3 RTE에서 작동합니다. CoralUI 3 RTE용 사용자 정의 플러그인을 사용하는 경우 rte.coralui3 라이브러리를 사용하십시오.
  1. 노드를 /libs/cq/gui/components/authoring/editors/clientlibs/core 아래에 /apps 오버레이하고 다음을 수행합니다.
    • Replace rte.coralui3 with rte.coralui2 for the dependencies property.
    • Replace cq.authoring.editor.core.inlineediting.rte.coralui3 with cq.authoring.editor.core.inlineediting.rte.coralui2 for the embed property.
    • Replace cq.authoring.rte.coralui3 with cq.authoring.rte.coralui2 for the embed property.
  2. 노드를 /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3 오버레이하고 /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2 아래에 /apps 오버레이합니다.
    카테고리를 cq.authoring.dialog 제거하고 /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3 에 추가합니다 /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2 .
  3. 페이지에 포함되는 다른 종속성을 rte.coralui3 에서 rte.coralui2 으로 변경합니다. 예를 들어, 아래의 노드를 오버레이한 /libs/mcm/campaign/components/touch-ui/clientlibs/rte /apps 그에 대한 종속성을 rte.coralui3 에서 rte.coralui2 로 변경합니다.
  4. Overlay the node cq/ui/widgets under /apps . 노드의 종속성을 cq.rte 다음으로 /apps/cq/ui/widgets cq.coralui2.rte 바꿉니다.
CoralUI 2 RTE는 플러그인 대화 상자에 handlebars 템플릿을 사용합니다. 따라서 CoralUI 2 RTE clientlib은 handlebars clientlib에 대한 종속성을 가졌습니다. CoralUI 3 RTE는 handlebars 템플릿을 사용하지 않으며 연관된 종속성이 없습니다. 사용자 정의 플러그인이 handlebars 템플릿을 사용하는 경우 웹 페이지에 handlebars clientlib을 포함시키십시오.

추가 정보

RTE 구성에 대한 자세한 내용은 AEM Widget API 참조를 참조하십시오 .
특히, 사용 가능한 플러그인 및 관련 옵션을 보려면:
  • CQ .form.RichText 구성 요소는 스타일이 지정된 텍스트 정보(리치 텍스트)를 편집하는 양식 필드를 제공합니다. 리치 텍스트 양식에 사용할 수 있는 모든 매개 변수를 알려면 구성 옵션을 참조하십시오.
  • RichText 구성 요소는 CQ.form.rte.plugins. Plugin 아래에 나열된 플러그인을 사용하여 다양한 기능을 제공합니다 . 각 플러그인의 경우:
    • 활성화(또는 비활성화)할 수 있는 기능에 대한 자세한 내용은 기능을 참조하십시오.
    • 해당 플러그인의 세부 구성에 사용할 수 있는 모든 매개 변수에 대한 구성 옵션을 참조하십시오.
  • 링크에 대한 HTML 규칙에 대한 자세한 정보도 사용할 수 있습니다.
위의 옵션을 사용하여 고유한 RTE를 확장하고 사용자 정의할 수 있습니다. 예를 들어 링크를 만들 때 페이지에서 사용할 수 있는 앵커를 나열하려면 자체 구현을 제공할 수 LinkPlugin 있습니다.

알려진 제한 사항

AEM RTE 기능에는 다음과 같은 제한 사항이 있습니다.
  • RTE 기능은 AEM 구성 요소 대화 상자에서만 지원됩니다. RTE는 마법사 또는 터치가 활성화된 UI의 페이지 속성 스캐폴딩과 같은 기본 양식에서는 지원되지 않습니다.
  • AEM은 하이브리드 장치에서 작동하지 않습니다.
  • RTE 구성 노드의 이름을 지정하지 마십시오 config . 그렇지 않으면 RTE 구성은 관리자에게만 적용되고 그룹의 사용자에 대해서는 적용되지 않습니다 content-author .
  • RTE는 컨텐츠를 포함할 인라인 프레임 또는 iframe을 지원하지 않습니다.