텍스트 구성 요소(v1)

텍스트 구성 요소는 즉석 편집을 제공하는 리치 텍스트 편집 및 구성 요소입니다.

사용량

텍스트 구성 요소는 전체 화면 형식뿐만 아니라 간소화된 인라인 편집기에서 손쉽게 텍스트를 편집할 수 있는 강력한 리치 텍스트 편집기를 제공합니다.

편집 대화 상자는 전체 화면 편집 대화 상자에서 사용할 수 있는 모든 기능을 갖춘 제한된 옵션을 사용하여 인라인 편집을 제공합니다. 디자인 대화 상자를 사용하면 내용 작성자를 위한 템플릿에 머리글, 특수 문자 및 단락 스타일과 같은 텍스트 서식 옵션을 구성할 수 있습니다.

버전 및 호환성

이 문서에서는 AEM 6.3의 핵심 구성 요소 릴리스 1.0.0에 처음 소개된 텍스트 구성 요소의 v1에 대해 설명합니다.

다음 표는 텍스트 구성 요소의 v1 호환성을 보여줍니다.

AEM 버전 텍스트 구성 요소 v1
6.3 호환 가능
6.4 호환 가능
주의

이 문서에서는 텍스트 구성 요소의 v1에 대해 설명합니다.

텍스트 구성 요소의 현재 버전에 대한 자세한 내용은 텍스트 구성 요소 문서를 참조하십시오.

샘플 구성 요소 출력

다음은 We.Retail에서 가져온 샘플입니다.

스크린샷

HTML

<div class="cmp cmp-text aem-GridColumn aem-GridColumn--default--12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porttitor ante a tortor volutpat maximus. Donec eu porta eros. Aenean sit amet eleifend arcu, eu vestibulum magna. Fusce eget nisi tincidunt, tristique felis quis, tincidunt est. Aliquam consequat aliquam quam non eleifend. Phasellus ut magna luctus, aliquam risus eget, fermentum augue. Aliquam lobortis accumsan magna, quis efficitur enim dictum eu. Pellentesque iaculis felis eget felis commodo, non euismod dolor euismod. Quisque nec arcu rutrum, mollis tortor non, sollicitudin odio. Sed dictum nulla mauris, eu pretium dui vulputate a. Maecenas lacus massa, egestas vitae tincidunt eu, interdum et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend ex lacus, in consectetur nunc interdum et. Donec interdum mi vitae dolor pretium mattis. In quis arcu sapien. Phasellus at metus vitae nisi tincidunt varius.<br />
</p>
</div>

JSON

"text": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porttitor ante a tortor volutpat maximus. Donec eu porta eros. Aenean sit amet eleifend arcu, eu vestibulum magna. Fusce eget nisi tincidunt, tristique felis quis, tincidunt est. Aliquam consequat aliquam quam non eleifend. Phasellus ut magna luctus, aliquam risus eget, fermentum augue. Aliquam lobortis accumsan magna, quis efficitur enim dictum eu. Pellentesque iaculis felis eget felis commodo, non euismod dolor euismod. Quisque nec arcu rutrum, mollis tortor non, sollicitudin odio. Sed dictum nulla mauris, eu pretium dui vulputate a. Maecenas lacus massa, egestas vitae tincidunt eu, interdum et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend ex lacus, in consectetur nunc interdum et. Donec interdum mi vitae dolor pretium mattis. In quis arcu sapien. Phasellus at metus vitae nisi tincidunt varius.</p>\n",
              "richText": true,
              ":type": "weretail/components/content/text"
            }
노트

핵심 구성 요소에서 JSON 내보내기를 사용하려면 핵심 구성 요소의 릴리스 1.1.0이 필요합니다. 자세한 내용은 핵심 구성 요소 v1🔗에 대한 호환성 정보를 참조하십시오.

편집 대화 상자

편집 대화 상자는 사용자가 텍스트를 작성할 때 사용할 표준 서식 지정 도구를 제공합니다.

  • 굵게

    선택한 텍스트에 굵게 서식을 적용하거나 커서 뒤에 입력한 텍스트에 굵게 서식을 지정하는 데 사용됩니다.

    Ctrl+ Bcan을 키보드 단축키로 사용할 수 있습니다.

  • 기울임체

    선택한 텍스트에 기울임꼴 서식을 적용하거나 커서 뒤에 입력한 텍스트를 기울임꼴로 만드는 데 사용됩니다.

    Ctrl+ Ick를 키보드 단축키로 사용할 수 있습니다.

  • 밑줄

    선택한 텍스트에 밑줄 서식을 적용하거나 커서 뒤에 입력한 텍스트에 밑줄 서식을 적용하는 데 사용됩니다.

    Ctrl+ Ucan을 키보드 단축키로 사용할 수 있습니다.

  • 아래 첨자

    커서 뒤에 입력한 텍스트 또는 텍스트의 서식을 하위 스크립트로 지정하는 데 사용됩니다.

  • 위 첨자

    커서 뒤에 입력한 텍스트 또는 텍스트의 서식을 위 첨자로 지정하는 데 사용됩니다.

  • 텍스트로 붙여넣기

    복사한 텍스트를 서식 없이 일반 텍스트로 붙여넣을 수 있습니다.

    이 옵션을 선택하면 텍스트를 텍스트에 삽입하기 전에 미리 보기로 서식을 지정하지 않고 일반 텍스트로 붙여넣을 수 있는 창이 열립니다. 체크 표시를 탭하거나 클릭하고, x를 탭하거나 클릭하여 취소합니다.

  • Word에서 붙여넣기

    이 옵션을 선택하면 텍스트를 텍스트에 삽입하기 전에 미리 보기로 서식을 그대로 유지하면서 텍스트를 붙여넣을 수 있는 창이 열립니다. 체크 표시를 탭하거나 클릭하고, x를 탭하거나 클릭하여 취소합니다.

  • 하이퍼링크

    이 옵션을 사용하여 선택한 텍스트를 하이퍼링크로 변환하거나 이미 정의된 링크를 수정합니다. 이 옵션은 텍스트가 이미 선택되어 있고 링크 설정에 대한 추가 옵션이 있는 창을 여는 경우에만 활성화됩니다.

    • 위치 입력

      • [선택 영역 열기] 대화 상자를 사용하여 AEM에서 패스를 선택합니다.
      • 링크가 AEM 내에 없으면 절대 URL을 입력합니다(절대 경로가 아닌 경로는 AEM에 상대적인 것으로 해석됨).
    • 링크에 대한 대체 설명 텍스트 입력

    • 링크 동작 선택

      • 타겟
      • 동일한 탭
      • 새 탭
      • 상위 프레임
      • 상위 프레임

    확인란을 탭하거나 클릭하여 링크를 적용하거나 취소할 x를 클릭합니다.

  • 연결 해제

    선택한 텍스트에 이미 적용된 링크를 제거하려면 이 옵션을 사용합니다. 이 옵션은 링크가 이미 선택된 경우에만 활성화됩니다.

  • 찾기

    텍스트를 검색하여 지정된 텍스트 문자열을 찾습니다. 이 옵션을 선택하면 검색 옵션을 지정하는 창이 열립니다.

    검색할 텍스트를 입력하고 찾기​를 탭하거나 클릭하여 검색을 시작합니다. 취소하려면 x를 탭하거나 클릭합니다.

    대/소문자를 정확하게 일치시키려면 검색을 시작하기 전에 대/소문자 일치 옵션을 선택합니다.

    일치 항목이 발견되면 강조 표시되고 검색 대화 상자가 흐리게 표시됩니다. 흐리게 표시된 대화 상자에서 찾기 단추를 다시 탭하거나 클릭하여 다음 항목을 검색합니다.

    추가 항목이 없으면 메시지가 표시되고 텍스트 처음부터 검색이 다시 시작됩니다.

  • 바꾸기

    이 옵션을 사용하여 지정된 텍스트 문자열 발생 텍스트를 검색하고 일치 항목을 다른 문자열로 바꿀 수 있습니다. 이 옵션을 선택하면 검색 및 바꾸기 옵션을 지정하는 창이 열립니다.

    검색할 텍스트와 바꿀 텍스트를 입력합니다.

    찾기​를 탭하거나 클릭하여 검색을 시작합니다. 취소하려면 x를 클릭하거나 탭하십시오.

    대/소문자를 정확하게 일치시키려면 검색을 시작하기 전에 대/소문자 일치 옵션을 선택합니다.

    일치 항목이 발견되면 강조 표시되고 검색 대화 상자가 흐리게 표시됩니다. 흐리게 표시된 대화 상자에서 찾기 단추를 다시 클릭하여 다음 항목을 검색하거나 바꾸기 단추를 선택하여 강조 표시된 일치 텍스트를 대체합니다. 바꾸기 단추는 일치한 번만 활성화됩니다.

    텍스트 항목을 한 번에 모두 바꾸려면 모두 바꾸기​를 선택합니다.

  • 왼쪽으로 텍스트 정렬

    텍스트를 왼쪽 여백에 정렬하는 데 사용됩니다.

  • 텍스트를 가운데로

    텍스트를 가운데에 정렬하는 데 사용됩니다.

  • 오른쪽으로 텍스트 정렬

    텍스트를 오른쪽 여백에 정렬하는 데 사용됩니다.

  • 글머리 기호

    선택한 텍스트의 서식을 글머리 기호 목록으로 지정하거나 커서 뒤에 글머리 기호 목록을 삽입하기 시작하는 데 사용됩니다.

    글머리 기호 목록을 종료하려면 글머리 기호 단추를 다시 누르거나 클릭하거나 두 개의 캐리지 리턴을 입력합니다.

  • 번호 매기기

    선택한 텍스트의 서식을 번호 매기기 목록으로 지정하거나 커서 뒤에 번호 매기기 목록을 삽입하기 시작하는 데 사용됩니다.

    번호 매기기 목록을 끝내려면 번호 매기기 단추를 다시 누르거나 클릭하거나 두 개의 캐리지 리턴을 입력합니다.

  • 내어쓰기

    커서 뒤에 입력한 선택한 텍스트나 텍스트의 들여쓰기 수준을 줄이는 데 사용됩니다.

    선택한 텍스트 또는 커서의 위치가 이미 들여쓰기된 경우에만 활성화됩니다.

  • 들여쓰기

    커서 뒤에 입력한 선택한 텍스트나 텍스트의 들여쓰기 수준을 높이는 데 사용됩니다.

  • 텍스트를 삽입할 때 사용됩니다. 이 옵션을 선택하면 테이블의 세부 사항을 지정하는 창이 열립니다.

    • - 표의 열 수(필수)

    • - 표의 행 수(필수)

    • - 표의 폭입니다.

    • 높이 - 표의 높이입니다.

    • ​패딩 - 셀 내용 주위의 공백

    • 셀 간격 - 셀 사이의 간격

    • 테두리 - 표의 테두리 선의 두께

    • 표의 헤더에 대해 다음을 수행합니다.

      • 첫 번째 행을 사용해야 합니다.
      • 첫 번째 열을 사용해야 합니다.
      • 첫 번째 행과 첫 번째 열을 사용해야 합니다.
      • 또는 헤더를 사용하지 않아야 합니다.
    • 캡션 - 표의 캡션

  • 맞춤법 검사

    텍스트 내용의 맞춤법을 검사하는 데 사용됩니다. 맞춤법이 틀린 빨간색 선으로 밑줄이 그어진 것 같습니다.

  • 특수 문자

    텍스트에 특수 문자를 삽입하는 데 사용됩니다. 이 옵션을 선택하면 사용 가능한 문자가 표시되는 창이 열립니다.

    원하는 문자를 탭하거나 클릭하여 커서 뒤에 있는 텍스트에 삽입합니다. 여러 문자를 삽입할 수 있습니다. x를 탭하거나 클릭하여 선택 창을 닫습니다.

  • 소스 편집

    텍스트의 HTML 소스를 보고 수정하는 데 사용됩니다.

    원본 HTML을 보려면 소스 편집 아이콘을 탭하거나 클릭합니다. 이 모드에서는 다른 모든 서식 옵션이 비활성화됩니다. 소스 편집 아이콘을 다시 탭하거나 클릭하여 서식이 지정된 보기로 돌아갑니다.

    주의

    Raw HTML에 대한 액세스 권한이 있는 경우 항상 소스 편집 옵션을 사용할 때 주의해야 합니다.

    소스 편집​을(를) 통해 입력한 HTML이 XSS 위험에 대해 스캔되고 삽입된 스크립트는 제거되고 결과 페이지에 나타나지 않습니다. 그러나 소스 편집​에 입력된 HTML의 형식이 잘못되어 페이지의 템플릿이 중단되거나 예기치 않은 서식이 지정되거나 결과 페이지를 사용할 수 없는 것으로 렌더링할 수 있습니다.

  • 단락 형식

    선택한 텍스트 또는 커서 뒤에 삽입된 텍스트에 단락 서식을 적용하는 데 사용됩니다. 이 옵션을 선택하면 단락 서식이 선택된 드롭다운이 열립니다.

텍스트 구성 요소는 한 줄로도 편집할 수 있지만 공간 제한으로 인해 모든 서식 지정 옵션을 한 줄에서만 사용할 수 있는 것은 아닙니다. 모든 옵션을 보려면 전체 화면 모드로 전환합니다.

디자인 대화 상자

템플릿 작성자는 디자인 대화 상자를 사용하여 컨텐츠 작성자가 사용할 수 있는 텍스트 서식 옵션을 정의할 수 있습니다.

기능

구성 요소에 대해 다음 기능을 활성화하거나 비활성화할 수 있습니다.

  • 일반 텍스트 붙여넣기
  • 이전 단어
  • 찾기 및 바꾸기
  • 맞춤법 검사기
  • 소스 편집

서식

구성 요소에 대해 다음 서식 옵션을 활성화하거나 비활성화할 수 있습니다.

  • 목록
  • 정렬
  • 굵게, 기울임체, 밑줄
  • 링크
  • 아래/위 첨자

단락 스타일

구성 요소에 대해 단락 스타일을 활성화하거나 비활성화할 수 있습니다. 활성화하면 허용되는 형식을 정의할 수 있습니다.

  • 추가 단추를 탭하거나 클릭하여 새 스타일을 삽입합니다.
  • 스타일 코드와 편집 대화 상자에 표시할 설명을 입력합니다.
  • 스타일을 제거하려면 삭제 단추를 탭하거나 클릭합니다.
  • 형식 순서를 재정렬하려면 핸들을 탭하거나 클릭하고 드래그합니다.

특수 문자

특수 문자 삽입 옵션은 구성 요소에 대해 활성화하거나 비활성화할 수 있습니다. 활성화하면 허용되는 문자를 정의할 수 있습니다.

  • 추가 단추를 탭하거나 클릭하여 새 문자를 삽입합니다.
  • 문자의 HTML 코드와 편집 대화 상자에 표시할 설명을 입력합니다.
  • 문자를 제거하려면 삭제 버튼을 탭하거나 클릭합니다.
  • 문자 순서를 재정렬하려면 핸들을 탭하거나 클릭하고 드래그합니다.

기술 세부 정보

텍스트 구성 요소 에 대한 최신 기술 문서는 GitHub에서 찾을 수 있습니다.

전체 핵심 구성 요소 프로젝트를 GitHub에서 다운로드할 수 있습니다.

핵심 구성 요소 개발에 대한 자세한 내용은 핵심 구성 요소 개발자 설명서에서 확인할 수 있습니다.

이 페이지에서는

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now