텍스트 에디터 설정.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

편집자가 DXPR Builder에서 텍스트를 클릭하면 툴바가 나타납니다. Styles 목록을 브랜드 스타일(리드 문단, 강조 구 등)로 채울 수 있습니다. 역할마다 표시되는 버튼도 고를 수 있습니다. 편집자는 크기와 색상을 직접 설정하는 대신 한 번의 클릭으로 브랜드 모양을 적용합니다. 글꼴은 테마에서 가져옵니다. 자세한 내용은 Custom fonts 문서를 참고하세요.

시작하기 전에

  • 스타일을 편집하려면 Administer DXPR Builder configuration 권한이 필요합니다.
  • 툴바 버튼을 편집하려면 Administer dxpr builder profile 권한이 필요합니다.
  • 모든 스타일에는 뒤에 CSS가 필요합니다. lead 같은 Bootstrap 5 클래스는 페이지에 Bootstrap 5가 불러와질 때 작동합니다. 직접 만든 클래스는 테마의 규칙이 필요합니다. 자세한 내용은 Custom CSS 문서를 참고하세요.

설정

  1. 다음으로 이동하세요: DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings).
  2. 다음을 펼치세요: Text Editor. Custom styles 상자에는 DXPR Builder에 포함된 스타일이 한 줄에 하나씩 이미 나열되어 있습니다.
  3. 다음 형식으로 스타일마다 한 줄씩 추가하고, 필요 없는 줄은 삭제하세요: Label=element.class.
  4. 이제 Save settings(을)를 클릭하세요.
  5. 빌더에서 페이지를 열거나(열려 있으면 새로고침) 텍스트를 클릭하세요.
  6. 툴바에서 Styles(을)를 클릭하고 스타일을 고르세요.

다음 줄은 네 가지 스타일을 추가합니다:

Lead=p.lead
Event date=span.text-primary.fw-semibold
Callout=p.border-start.border-primary.border-4.ps-3
Sassy Title=h1.sassy-title

각 줄은 세 부분으로 구성됩니다:

  • 목록에서 편집자에게 표시되는 이름은 다음 앞에 있습니다: label (= 앞).
  • 스타일 범위를 정하는 요소는 다음 뒤에 있습니다: element (= 뒤). p, h2, blockquote 같은 블록 요소는 문단이나 제목 전체에 스타일을 적용합니다. span, mark, code 같은 인라인 요소는 선택한 단어만 감쌉니다.
  • 각 항목은 점을 뒤따릅니다: class. 위의 Callout처럼 점을 더해 클래스를 더 추가하세요.

요소 이름은 문자와 숫자만 사용합니다. 클래스 이름은 문자, 숫자, 하이픈, 밑줄을 사용합니다. 제공 목록으로 되돌리려면 상자를 비우고 저장하세요.

역할별 툴바 버튼

  1. 다음으로 이동하세요: DXPR Studio > DXPR Builder > User Profiles (/admin/dxpr_studio/dxpr_builder/profile). 역할의 프로필 옆에 있는 Edit(을)를 클릭하세요.
  2. 다음을 펼치세요: Text editor buttons (inline editing). 페이지에서 편집하는 텍스트용 버튼을 선택하세요.
  3. 다음을 펼치세요: Text editor buttons (modal editing). 설정 대화상자의 텍스트 상자용 버튼을 선택하세요.
  4. 이제 Save(을)를 클릭하세요.

인라인 편집은 Text, Alert, Blockquote 요소를 다룹니다. 사용자 지정 스타일을 표시하려면 두 그룹에 모두 Font style(을)를 선택된 상태로 두세요. 프로필에서 Styles 목록을 가리키는 이름입니다. 그룹의 모든 버튼을 선택 해제하면 해당 툴바는 기본 제공 세트로 돌아갑니다. User profiles 문서에 어떤 프로필이 누구에게 적용되는지 설명되어 있습니다.

표시되는 내용

Styles(을)를 클릭하면 두 그룹의 패널이 열립니다. Block styles에는 문단과 제목 전체용 스타일이, Text styles에는 선택한 단어용 스타일이 있습니다. 스타일을 고르면 버튼에 이름이 표시되며, 여러 개가 적용되면 Multiple styles(이)가 표시됩니다.

Styles 버튼에 Lead가 표시된 Text 요소의 텍스트 툴바. 위에는 캐럿이 있는 문단이 더 큰 Lead 스타일로 설정되어 있으며 아래에는 일반 문단

에디터는 요소와 클래스를 페이지 HTML에 저장하므로 방문자에게도 같은 모양이 표시됩니다. 블록 스타일은 자체 요소에서만 활성화됩니다. Sassy Title 항목은 Heading 1에 커서가 있어야 합니다.

설정

36개 버튼이 두 그룹에 모두 표시됩니다. 새 프로필은 다음이 선택된 상태로 시작합니다:

버튼 머신 네임 인라인 기본값 모달 기본값
AI Assistant, AI Tone of Voice aiAgentButton, aiAgentToneButton 예 예
Bold, Italic bold, italic 예 예
Underline, Strike through underline, strikethrough 예
Superscript, Subscript superscript, subscript 예
Remove format removeFormat 예 예
Text color fontColor 예 예
Background color fontBackgroundColor
Font size fontSize 예 예
Font family fontFamily
HTML block format heading 예 예
Font style (Styles 목록) style 예 예
Align left, Center, Align right, Justify alignment:left, alignment:center, alignment:right, alignment:justify 예 예
Insert/Remove Bullet list bulletedList 예 예
Insert/Remove Numbered list numberedList 예
Outdent, Indent outdent, indent 예
Block quote blockQuote 예
Link, Image, Table link, insertImage, insertTable 예 예
Horizontal rule, Character map horizontalLine, specialCharacters 예
Source code, Show blocks sourceEditing, showBlocks 예
Select all, Replace, Accessibility help selectAll, findAndReplace, accessibilityHelp
Undo, Redo undo, redo 예 예

사용 상태인 프로필과 맞는 역할이 없으면 기본 툴바가 제공됩니다. 인라인은 다음과 같습니다: Bold, Italic, Remove format, HTML block format, Font style, 두 목록, Link, Image, Table, Undo 및 Redo. 모달 툴바에는 밑줄, 취소선, 스크립트, 정렬, 들여쓰기, 색상, 크기 버튼이 추가됩니다. Block quote, Horizontal rule, Character map, Source code, Show blocks(도)도 추가됩니다. AI가 켜져 있으면 둘 다 AI 버튼 2개가 추가됩니다.

Font family(은)는 CKEditor의 표준 웹 안전 글꼴을 제공하며 테마의 글꼴이 아닙니다.

스타일이 표시되지 않는 경우

  • Styles 목록에 제공 스타일만 표시됩니다. 한 줄이 형식을 깨뜨리거나 두 스타일 사이에 빈 줄이 있어 DXPR Builder가 전체 목록을 무시합니다. 다음 아래에서 고친 뒤 저장하세요: Text Editor (/admin/dxpr_studio/dxpr_builder/settings에서).
  • 스타일이 회색으로 표시됩니다. 블록 스타일은 자체 요소에서만 작동합니다. h1.sassy-title 항목은 Heading 1(이)가 필요합니다. 먼저 제목 목록으로 블록을 바꾸거나 p용으로 스타일을 정의하세요.
  • 툴바에 Styles 버튼이 없습니다. 에디터의 프로필에 Font style 선택이 해제되어 있습니다. /admin/dxpr_studio/dxpr_builder/profile의 두 버튼 그룹에서 선택하세요.
  • 스타일은 적용되지만 텍스트가 똑같아 보입니다. 테마에 해당 클래스의 CSS가 없거나 Bootstrap 5가 불러와지지 않습니다. 테마에 규칙을 추가하거나 Sideload Bootstrap files(을)를 Bootstrap 5(으)로 설정하세요. 위치: General Settings 페이지의 Bootstrap.
  • 편집자에게는 스타일이 표시되지만 방문자에게는 표시되지 않습니다. Text Filters 아래에서 Apply text format filters to frontend content 항목이 켜져 있어 필드의 텍스트 형식이 class 속성을 제거합니다. 옵션을 끄거나 클래스를 유지하는 형식을 필드에 지정하세요. 자세한 내용은 Visitors see something different 문서를 참고하세요.

다음 단계

  • Custom CSS: 스타일 클래스 뒤의 테마 규칙을 작성합니다.
  • Utility classes: HTML classes 목록에서 요소 전체용 클래스를 제공합니다.
  • User profiles: 프로필이 제어하는 다른 모든 항목입니다.