리치 텍스트 편집기 구성

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

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

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

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

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

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

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

다양한 편집 모드

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

인라인 편집

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

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

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

전체 화면 편집

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

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

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

대화 상자 편집

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

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

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

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

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

• A features 속성:

  • 이 플러그인은 해당 플러그인의 기본 기능을 활성화하거나 비활성화하는 데 사용됩니다.
  • 표준화된 절차를 사용하여 구성할 수 있습니다.

• 적절한 경우 보다 많은 속성 및 옵션을 사용하여 별도의 구성이 필요합니다.

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

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

• API 설명서에 대한 링크가 있는 플러그인 ID입니다. ID는 플러그인 활성화.
• 에 대해 허용되는 값 features 속성을 사용합니다.
• 플러그인에서 제공하는 기능에 대한 설명입니다.

구성 경로 및 위치 이해

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

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

• useFixedInlineToolbar: RTE 노드에 정의된 이 부울 속성(sling:resourceType= 가 있는 속성)을 설정합니다. cq/gui/components/authoring/dialog/richtext) True를 눌러 부동 대신 RTE 도구 모음을 고정시킵니다.

  이 속성이 true면 Richtext 편집은 기본적으로 "foundation-contentloaded" 이벤트에서 시작됩니다.

  이를 방지하려면 속성을 설정합니다 customStart to True및 가 'rte-start' 이벤트를 트리거하여 RTE 편집을 시작합니다. 이 속성이 'true'이면 기본 동작인 클릭 시 rte 시작이 작동하지 않습니다.

• customStart: RTE 노드에 정의된 이 부울 속성을 로 설정합니다. True이벤트를 트리거하여 RTE를 시작할 시기를 제어합니다 rte-start.

• rte-start: 에서 이 이벤트 트리거 contenteditable-div RTE의 경우 편집할 시기를 고려합니다. 이 기능은 customStart 이 true로 설정된 경우에만 추적됩니다.

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

즉석 편집 사용자 지정

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

• editElementQuery - 정의 cq:InplaceEditingConfig로 지정하는 경우, 이 속성은 텍스트 구성 요소에 대한 인라인 편집을 시작할 HTML 요소의 선택기를 지정하는 데 사용됩니다. 지정하지 않으면 텍스트 구성 요소 HTML에서 인라인 편집이 직접 시작됩니다.
• textPropertyName - 정의 cq:InplaceEditingConfig로 지정하는 경우, 이 속성은 텍스트 구성 요소의 HTML 값이 인라인 편집 후 유지될 컨텐츠 노드에 저장할 속성의 이름을 지정하는 데 사용됩니다.

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

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

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

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

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

파일 가져오기

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 설정이 사용됩니다. 도구 모음 속성은 도구 모음의 단추를 지정하는 데 사용됩니다. 예를 들어 단추 자체가 기능인 경우(예: 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. 이름이 인 노드 만들기 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로 전환하려면 다음 단계를 수행하십시오.

1. 노드 오버레이 /libs/cq/gui/components/authoring/editors/clientlibs/core 아래에 /apps, 그리고 다음을 수행합니다.

   • 바꾸기 rte.coralui3 with rte.coralui2 종속성 속성입니다.
   • 바꾸기 cq.authoring.editor.core.inlineediting.rte.coralui3 with cq.authoring.editor.core.inlineediting.rte.coralui2 for the embed property.
   • 바꾸기 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 to rte.coralui2. 예를 들어, 노드를 오버레이한 후 /libs/mcm/campaign/components/touch-ui/clientlibs/rte 아래에 /apps에서 종속성 변경 rte.coralui3 to rte.coralui2.

4. 노드 오버레이 cq/ui/widgets 아래에 /apps. 종속성 바꾸기 cq.rte 노드 /apps/cq/ui/widgets with cq.coralui2.rte.

추가 정보

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

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

• 다음 CQ.form.RichText 구성 요소는 스타일이 지정된 텍스트 정보(리치 텍스트)를 편집하는 양식 필드를 제공합니다. 리치 텍스트 양식에 사용할 수 있는 모든 매개 변수를 확인하려면 구성 옵션 을 참조하십시오.

• RichText 구성 요소는 아래에 나열된 플러그인을 사용하여 광범위한 기능을 제공합니다 CQ.form.rte.plugins.Plugin. 각 플러그인에 대해:

  • 활성화(또는 비활성화)할 수 있는 기능에 대한 자세한 내용은 기능 을 참조하십시오.
  • 해당 플러그인의 세부 구성에 사용할 수 있는 모든 매개 변수에 대해서는 구성 옵션 을 참조하십시오.

• 링크의 HTML 규칙에 대한 자세한 정보도 사용할 수 있습니다.

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

알려진 제한 사항

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

• RTE 기능은 AEM 구성 요소 대화 상자에서만 지원됩니다. RTE는 마법사나 같은 Foundation 양식에서 지원되지 않습니다 페이지 속성 및 스캐폴딩 터치 지원 UI에서 사용.

• AEM에서 작동하지 않음 하이브리드 장치.

• RTE 구성 노드의 이름을 지정하지 마십시오 config. 그렇지 않으면 관리자에게만 적용되고 그룹의 사용자에게는 적용되지 않습니다 content-author.

• RTE는 컨텐츠를 포함하는 인라인 프레임 또는 iframe을 지원하지 않습니다.

Business.Adobe.com 리소스

Targeted Content Embedded Charts Responsive Forms Version History Web Content Management Dynamic Forms