리치 텍스트 편집기 구성 configure-the-rich-text-editor

리치 텍스트 편집기(RTE)는 작성자가 텍스트 컨텐츠를 편집하는 다양한 기능을 제공합니다. 아이콘, 선택 상자, 도구 모음 및 메뉴는 WYSIWYG 텍스트 편집 환경을 위해 제공됩니다.

작성을 위해 RTE 기능을 사용하는 방법은 를 참조하십시오. 작성을 위해 리치 텍스트 편집기 사용. RTE는 작성 구성 요소에서 사용할 수 있는 기능을 활성화, 비활성화 및 확장하도록 구성할 수 있습니다. 다음 워크플로우는 Experience Manager에서 RTE 구성 작업을 완료하는 권장 순서를 보여줍니다.

그림: 리치 텍스트 편집기를 구성하는 일반적인 워크플로우

터치 지원 UI 및 클래식 UI 이해 understand-touch-enabled-ui-and-classic-ui

터치 지원 UI는 AEM에 대한 표준 UI입니다. Adobe에서 Touch UI를 도입했습니다. 반응형 디자인 작성 환경의 경우 버전 5.6에서 지원됩니다. Touch UI는 터치 및 데스크톱 장치용으로 설계되었습니다. UI는 원래 클래식 UI와 상당히 다릅니다.

그림: 터치 지원 UI의 리치 텍스트 편집기 도구 모음

그림: 클래식 UI의 리치 텍스트 편집기 도구 모음

다양한 편집 모드 editingmodes

작성자는 다양한 구성 요소 모드를 사용하여 AEM에서 텍스트 컨텐츠를 만들고 편집할 수 있습니다. 컨텐츠 작성 및 서식 지정을 위한 도구 모음 옵션과 다른 편집 모드에서 RTE 지원 구성 요소의 사용자 경험은 RTE 구성에 따라 달라집니다.

인라인 편집 inline-editing

느린 두 번 클릭/탭으로 열리면 페이지 내에서 컨텐츠를 편집할 수 있습니다. 기본 옵션이 포함된 작은 도구 모음이 표시됩니다.

그림: 터치 지원 UI에서 기본 도구 모음을 사용하여 인라인 편집

클래식 UI에서 구성 요소를 느리게 두 번 클릭하면 인라인 편집할 수 있고 주황색 윤곽선이 컨텐츠를 강조 표시합니다. 컨텐츠 파인더가 열려 있으면 사용 가능한 RTE 서식 옵션이 있는 도구 모음이 창 맨 위에 표시됩니다. 컨텐츠 파인더가 열려 있지 않으면 서식 옵션이 표시되지 않고 기본 텍스트만 편집할 수 있습니다.

전체 화면 편집 full-screen-editing

AEM 구성 요소는 페이지 컨텐츠를 숨기고 사용 가능한 화면을 차지하는 전체 화면 보기에서 열 수 있습니다. 가장 많은 편집 옵션을 제공하므로 인라인 편집의 세부 버전을 전체 화면 편집해 보십시오. 클릭하여 열 수 있습니다 인라인 편집 모드를 사용할 때 작은 도구 모음에서 를 클릭합니다.

대화 상자 전체 화면 모드에서는 대화 상자 모드에서 사용할 수 있는 세부 RTE 도구 모음, 옵션 및 구성 요소가 제공됩니다. 이 변수는 다른 구성 요소와 함께 RTE가 포함된 대화 상자에만 적용할 수 있습니다.

그림: 터치 지원 UI에서 전체 화면 모드로 편집할 때 세부 RTE 도구 모음

대화 상자 편집 dialog-editing

클래식 UI에서 구성 요소를 두 번 클릭하면 컨텐츠를 편집할 수 있는 대화 상자가 열립니다. 대화 상자가 기존 페이지 맨 위에 열립니다. 일부 특정 시나리오에서는 대화 상자가 팝업 창으로 열립니다. 예를 들어 텍스트 구성 요소가 다중 열 페이지 레이아웃의 열에 속하고 대화 상자에 사용할 수 있는 영역은 더 작아집니다.

그림: 터치 지원 UI의 대화 상자 편집 모드

그림: 편집을 위한 세부 도구 모음이 포함된 클래식 UI의 대화 상자

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

기능은 각 플러그인을 통해 사용할 수 있으며, 각 플러그인은 다음과 같습니다.

RTE의 기본 기능은 features 적절한 플러그인과 관련된 노드의 속성입니다.

다음 표에는 현재 플러그인이 표시되어 있습니다.

구성 경로 및 위치 이해 understand-the-configuration-paths-and-locations

다음 RTE 편집 모드(및 UI) 작성자에게 제공할 내용은 구성 세부 정보의 위치를 결정합니다 RTE 플러그인 활성화:

Touch UI의 대화 상자 편집 모드에서만 적용되는 다음 속성을 구성합니다.

터치 사용 대화 상자에서 RTE를 사용하면 속성을 설정합니다 useFixedInlineToolbar true는 문제를 방지하기 위해 필수입니다.

즉석 편집 사용자 지정 customizing-in-place-editing

다음 속성을 구성하여 텍스트 편집기가 시작되는 HTML 선택기를 정의할 수 있습니다.

대화 상자 모드에 해당하는 속성은 다음과 같습니다 name.

플러그인을 활성화하여 RTE 기능 활성화 enable-rte-functionalities-by-activating-plug-ins

RTE 기능은 각각 기능 속성이 있는 일련의 플러그인을 통해 사용할 수 있습니다. 각 플러그인의 다양한 기능을 활성화하거나 비활성화하도록 기능 속성을 구성할 수 있습니다.

RTE 플러그인의 자세한 구성은 을(를) 참조하십시오. RTE 플러그인을 활성화하고 구성하는 방법.

이 샘플 구성을 다운로드하여 RTE를 구성하는 방법을 이해합니다. 이 패키지에는 모든 기능이 활성화됩니다.

파일 가져오기

RTE 도구 모음 구성 dialogfullscreen

AEM에서는 다른 편집 모드에 대해 리치 텍스트 편집기의 UI를 다르게 구성할 수 있습니다. 기본 설정은 아래에 제공됩니다. 요구 사항에 따라 이러한 기본값을 대체할 수 있습니다.

최상의 작성 환경:

<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 설정이 사용됩니다. 도구 모음 속성은 도구 모음의 단추를 지정하는 데 사용됩니다. 예를 들어 단추 자체가 기능인 경우(예: Bold), 로 지정됩니다. PluginName#FeatureName (예: links#modifylink). 단추가 플러그인의 일부 기능을 포함하고 있는 팝오버인 경우 다음과 같이 지정됩니다. #PluginName (예: #format). 구분 기호( | ) 단추 그룹 사이에 '-'를 지정할 수 있습니다.

인라인 또는 전체 화면 모드 아래의 팝업 노드에는 사용 중인 팝오버 목록이 포함되어 있습니다. 아래에 있는 각 하위 노드 popovers 노드의 이름은 플러그인(예: format). 그것은 재산이 있다 items 에는 플러그인의 기능 목록(예: format#bold).

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

관리자는 위에서 설명한 대로 구성을 수행하는 대신 컨텐츠 정책을 사용하여 RTE 옵션을 제어할 수 있습니다. 컨텐츠 정책은 구성 요소의 일부로 사용할 때 구성 요소의 디자인 속성을 정의합니다 편집 가능한 템플릿. 예를 들어 RTE를 사용하는 텍스트 구성 요소를 편집 가능한 템플릿에 사용하는 경우 컨텐츠 정책에 따라 굵게 옵션을 사용할 수 있고 몇 가지 단락 서식 옵션을 사용할 수 있음을 정의할 수 있습니다. 컨텐츠 정책은 재사용이 가능하며 여러 템플릿에 적용할 수 있습니다.

AEM 6.4 서비스 팩 3 부터 사용자 인터페이스 구성에서 컨텐츠 정책으로의 다운스트림으로 RTE 흐름의 사용 가능한 옵션.

예를 들어 텍스트 코어 구성 요소 설명서.

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

RTE 도구 모음에 표시되는 Coral 아이콘과 사용 가능한 명령 간의 매핑을 사용자 지정할 수 있습니다. 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 리치 텍스트 편집기로 전환 switch-to-coralui-rich-text-editor

페이지에서 CoralUI 2 RTE clientlib 또는 CoralUI 3 RTE clientlib을 포함할 수 있습니다. 기본적으로 리치 텍스트 편집기에는 CoralUI 3 RTE clientlib이 포함됩니다. CoralUI 2 RTE로 전환하려면 다음 단계를 수행하십시오.

추가 정보 further-information

RTE 구성에 대한 자세한 내용은 AEM 위젯 API 참조.

특히 사용 가능한 플러그인 및 관련 옵션을 보려면 다음을 수행하십시오.

위의 옵션을 사용하여 고유한 RTE를 확장 및 사용자 지정할 수 있습니다. 예를 들어 링크를 만들 때 페이지에서 사용할 수 있는 앵커를 나열하려면 고유한 구현 을 제공할 수 있습니다 LinkPlugin.

알려진 제한 사항 known-limitations

AEM RTE 기능에는 다음과 같은 제한 사항이 있습니다.