AEM에서는 두 가지 모두를 지원합니다.
컨텐츠 작성자는 페이지에 컨텐츠를 추가하는 동안 RTE의 기능을 사용하여 액세서빌러티 정보를 제공할 수 있습니다. 여기에는 제목 및 단락 요소를 통해 구조적 정보를 추가하는 작업이 포함될 수 있습니다.
구성 요소에 대해 RTE 플러그인🔗을(를) 구성하여 이러한 기능을 구성하고 사용자 지정할 수 있습니다. 예를 들어 paraformat
플러그인을 사용하면 기본적으로 제공되는 기본 H1
, H2
및 H3
외에 지원되는 제목 수준 수를 확장하는 등 블록 수준 의미 요소를 추가할 수 있습니다.
RTE는 터치 지원 UI와 클래식 UI 모두에서 다양한 구성 요소에서 사용할 수 있습니다. 그러나 RTE를 사용하기 위한 기본 구성 요소는 Text 구성 요소입니다.
AEM의 텍스트 구성 요소는 터치 지원 UI와 클래식 UI 모두에서 사용할 수 있습니다. 다음 이미지는 paraformat
을 포함하여 플러그인 범위가 활성화된 리치 텍스트 편집기를 보여줍니다.
터치 지원 UI의 Text 구성 요소:
클래식 UI의 텍스트 구성 요소:
클래식 UI에서 사용할 수 있는 RTE 기능과 터치 지원 UI에는 차이점이 있습니다. 자세한 내용은
RTE 구성에 대한 전체 지침은 리치 텍스트 편집기 구성 페이지에서 확인할 수 있습니다. 여기서는 주요 단계를 포함한 모든 문제를 다룹니다.
CRXDE Lite의 적절한 rtePlugins
하위 분기 내에 플러그인을 구성하면(다음 이미지 참조) 해당 플러그인에 대한 모든 또는 특정 기능을 활성화할 수 있습니다.
다음 방법으로 선택할 수 있는 새로운 시맨틱 블록 포맷이 제공될 수 있습니다.
RTE에 따라 구성 위치를 결정하고 이동합니다.
단락 선택 필드를 활성화합니다.플러그인 을 활성화하여 .
그런 다음 RTE의 선택 필드에서 컨텐츠 작성자가 단락 형식을 사용할 수 있습니다. 액세스 가능한 항목은 다음과 같습니다.
AEM에서는 단락 형식 옵션을 통해 RTE에서 구조적 요소를 사용할 수 있으므로 액세스 가능한 컨텐츠를 개발할 수 있는 좋은 기반을 제공합니다. 컨텐츠 작성자는 RTE를 사용하여 글꼴 크기 또는 색상 또는 기타 관련 속성의 서식을 지정할 수 없으므로 인라인 서식이 생성되지 않습니다. 대신 제목 등의 적절한 구조적 요소를 선택하고 스타일 옵션에서 선택한 전역 스타일을 사용해야 합니다. 이렇게 하면 고유한 스타일 시트와 올바르게 구조화된 컨텐츠를 찾아보는 사용자에게 더 나은 옵션과 깨끗한 마크업이 보장됩니다.
경우에 따라 컨텐츠 작성자는 RTE를 사용하여 만든 HTML 소스 코드를 검사하고 조정해야 합니다. 예를 들어 RTE 내에서 만들어진 컨텐츠는 WCAG 2.0을 준수하도록 추가 마크업이 필요할 수 있습니다. 이 작업은 RTE의 소스 편집 옵션을 사용하여 수행할 수 있습니다. misctools
플러그인🔗에 sourceedit
기능을 지정할 수 있습니다.
sourceedit
기능을 신중하게 사용하십시오. 입력 오류 및/또는 지원되지 않는 기능을 사용하면 더 많은 문제가 발생할 수 있습니다.
AEM의 액세스 가능성 기능을 추가로 확장하기 위해 RTE(예: 텍스트 및 표 구성 요소)를 기반으로 추가 요소 및 특성을 사용하여 기존 구성 요소를 확장할 수 있습니다.
다음 절차는 보조 기술 사용자에게 데이터 테이블에 대한 정보를 제공하는 Caption 요소로 Table 구성 요소를 확장하는 방법을 보여 줍니다.
TablePropertiesDialog
생성자에서 캡션을 편집하는 데 사용되는 추가 텍스트 입력 필드를 추가합니다. 해당 컨텐츠를 자동으로 처리하려면 itemId
을 caption
(즉, DOM 속성의 이름)로 설정해야 합니다.
Table에서는 DOM 요소에 속성을 명시적으로 설정하거나 DOM 요소에서 제거해야 합니다. 이 값은 config
개체의 대화 상자에 의해 전달됩니다. DOM 속성은 해당 CQ.form.rte.Common
메서드를 사용하여 설정/제거해야 합니다( com
는 CQ.form.rte.Common
의 바로 가기 임).
이 절차는 클래식 UI에만 적합합니다.
CRXDE Lite 시작. 예:http://localhost:4502/crx/de/
복사:
/libs/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
끝:
/apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
중간 폴더가 없는 경우 중간 폴더를 만들어야 할 수도 있습니다.
복사:
/libs/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
끝:
/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
.
편집할 다음 파일을 엽니다(두 번 클릭하여 열기).
/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
constructor
메서드에서 다음 줄 읽기 전에:
var dialogRef = this;
다음 코드를 추가합니다.
editItems.push({
"itemId": "caption",
"name": "caption",
"xtype": "textfield",
"fieldLabel": CQ.I18n.getMessage("Caption"),
"value": (this.table && this.table.caption ? this.table.caption.textContent : "")
});
다음 파일을 엽니다.
/apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
.
transferConfigToTable
메서드 끝에 다음 코드를 추가합니다.
/**
* Adds Caption Element
*/
var captionElement;
if (dom.firstChild && dom.firstChild.tagName.toLowerCase() == "caption")
{
captionElement = dom.firstChild;
}
if (config.caption)
{
var captionTextNode = document.createTextNode(config.caption)
if (captionElement)
{
dom.replaceNode(captionElement.firstChild,captionTextNode);
} else
{
captionElement = document.createElement("caption");
captionElement.appendChild(captionTextNode);
if (dom.childNodes.length>0)
{
dom.insertBefore(captionElement, dom.firstChild);
} else
{
dom.appendChild(captionElement);
}
}
} else if (captionElement)
{
dom.removeChild(captionElement);
}
모두 저장을 사용하여 변경 내용을 저장합니다
일반 텍스트 필드만 캡션 요소의 값에 대해 허용되는 입력 유형은 아닙니다. getValue()
메서드를 통해 캡션의 값을 제공하는 ExtJS 위젯을 사용할 수 있습니다.
추가 요소 및 속성에 대한 편집 기능을 추가하려면 다음을 모두 확인합니다.
itemId
속성은 적절한 DOM 속성(TablePropertiesDialog
)의 이름으로 설정됩니다.Table
).