위지윅

X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X WYSIWYG 필드 wordpress 가 수년 동안 출하 한 것과 동일한 리치 텍스트 편집기 인 전체 TinyMCE 편집기를 사용자 정의 위젯 패널에 삭제합니다. 편집자는 굵게,기울임꼴, 목록,링크, 제목 및 이미 알고있는 시각적/텍스트 탭 스위치를 얻습니다. 위젯은 인쇄 할 준비가 된 형식의 HTML 을받습니다. 마스터 애드온 내부 위젯 빌더는, 평야가 있는 콘텐츠 영역에 대한 필드입니다 텍스트 영역 텍스트의 형식을 평평하게 만듭니다.

WYSIWYG 필드가 지원합니다 조건 다른 모든 컨트롤과 마찬가지로 해당 콘텐츠도 다음을 통해 렌더링됩니다 나뭇가지 구문 템플릿 엔진. WYSIWYG 값은 자동으로 안전한 HTML을 유지하므로 HTML이 거의 필요하지 않습니다 |raw 필터. 두 가이드 모두 세부 사항과 제한 사항을 설명합니다.

연결은 하나의 토큰입니다. 인쇄 {{ your_field_name }} HTML 패널과 거기에 저장된 마크업 렌더링이 필터링됩니다 wp_kses_post안전하지 않은 태그가 벗겨지는 동안 형식이 유지됩니다. 추가 필터도 없고 체조도 빠져나가지 않습니다.

WYSIWYG 필드가 하는 일 #

• 위젯의 Elementor 패널에서 TinyMCE 서식 있는 텍스트 편집기를 시각적 및 텍스트 탭과 함께 렌더링합니다.
• 편집기의 출력을 HTML 문자열로 저장합니다.
• 해당 HTML을 인쇄합니다 {{ your_field_name }}를 통과했습니다 wp_kses_post 출력에.
• 서식을 그대로 유지합니다: 단락, 굵게, 기울임꼴, 목록, 링크 및 제목이 모두 렌더링됩니다.
• 동적 값을 지원하므로 설정에서 제공하는 동적 태그에서 콘텐츠를 가져올 수 있습니다.

첫 위젯? The 위젯 빌더 개요 이 페이지의 기본 편집기를 다룹니다.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 WYSIWYG 필드가 명명 된 팀원 카드 위젯입니다 member_bio 각자의 형식화된 전기를 들고.

WYSIWYG 필드를 추가하는 방법 #

드래그하세요 위지윅 필드 패널에서 아래 섹션으로 필드 콘텐츠 탭, 긴 형식의 콘텐츠에 대한 자연 집. 그것의 옵션은 착륙하면 왼쪽에 열려.

WYSIWYG 필드 옵션 설명 #

편집기 자체가 복잡성을 전달하기 때문에 옵션 목록은 작게 유지됩니다:

• 라벨: 엘리멘터에서 편집기 위에 표시된 텍스트, 예를 들어 “회원 바이오”.
• 이름: 템플릿이 참조하는 고유 식별자입니다. 예를 들어 문자,숫자 및 밑줄만 표시됩니다 member_bio.
• 기본값: 시작 콘텐츠, 그리고 그것은 마크업을 포함 할 수 있습니다 짧은 형식의 단락은 편집자에게 지역이 무엇을위한 것인지 보여주고 포맷이 작동 함을 증명합니다.
• 동적: 필드는 동적 값을 허용하므로 콘텐츠를 손으로 입력하는 대신 동적 태그에 연결할 수 있습니다.

WYSIWYG 필드를 토큰과 연결합니다 #

WYSIWYG 필드는 토큰 필드입니다. HTML 패널의 한 토큰은 전체 콘텐츠 영역을 배치합니다:

<article class="tm-card">
  <h3 class="tm-name">{{ member_name }}</h3>
  <div class="tm-bio">
    {{ member_bio }}
  </div>
</article>

출력 시 값이 통과합니다 wp_kses_post는, 필터 워드 프레스는 게시물 콘텐츠에 적용됩니다. TinyMCE가 생산하는 태그, 단락, 강한 및 em, 목록, 링크, 제목, 이미지는, 허용 목록에 모두, 그래서 어떤 편집기 형식이 렌더링하는 것과 같은 텍스트 탭을 통해 몰래 안전하지 않은 모든 <script>는, 벗겨집니다.

조심하세요: 추가하지 마십시오 |raw 습관적으로 WYSIWYG 토큰으로. 일반 토큰은 이미 포맷을 렌더링합니다. 왜냐하면 wp_kses_post 마크업을 허용합니다 TinyMCE write; |raw 일반 바이오의 모습을 변경하지 않고 안전 필터만 제거합니다. 출력이 렌더링되지 않고 이스케이프된 것처럼 보이면 원인은 누락된 필터가 아닌 다른 곳에 있습니다.

예제에서와 같이 클래스가 있는 컨테이너에서 토큰을 래핑하고 CSS 패널에서 영역의 스타일을 지정합니다:

.tm-bio p { margin: 0 0 0.75em; }
.tm-bio a { color: inherit; text-decoration: underline; }

Elementor에서 WYSIWYG 컨트롤을 사용하세요 #

Elementor 의 페이지에 사용자 정의 위젯을 추가하거나 페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 필드는 패널에서 전체 TinyMCE 편집기로 렌더링됩니다: 상단의 도구 모음,모서리의 시각적 및 텍스트 탭,설정이 허용하는 미디어 추가.

편집자는 게시물에서와 같이 정확하게 작성하고 포맷합니다: 텍스트를 선택하고,굵게 표시하고,링크를 추가하고,목록을 시작합니다. 미리보기는 입력할 때 업데이트되며 위젯의 CSS 에 의해 스타일이 지정된 콘텐츠를 보여줍니다.

바이오가 이상하게 렌더링되면 위젯을 비난하기 전에 텍스트 탭을 확인하십시오. Word 또는 Google Docs 에서 붙여 넣은 콘텐츠는 종종 길 잃은 스팬과 인라인 스타일을 전달하며 모두 거기에 표시됩니다. 텍스트 탭에서 마크 업을 청소하면 일반적으로 레이아웃이 그 자리에서 수정됩니다.

일반적인 사용 사례 #

• 바이오스와 프로필 팀, 작성자 및 스피커 위젯에서.
• 긴 설명 제목이나 목록이 텍스트 내부에 속하는 서비스, 제품 및 기능 카드.
• 증언 기관 강조가 필요하고 줄 바꿈이 보존되어야 합니다.
• 각주 및 면책 조항 정책에 대한 인라인 링크가 있습니다.
• 모든 클라이언트 편집 텍스트 영역 서식이 중요하고 클라이언트가 HTML을 절대 볼 수 없는 곳.

WYSIWYG 분야와 함께 일하기 위한 팁 #

• 일반 토큰을 인쇄합니다. {{ member_bio }} 형식을 있는 그대로 렌더링합니다; |raw 여기에 기능을 추가하지 않고도 위험을 추가합니다.
• 래퍼 클래스를 통한 스타일. 타겟 .tm-bio p, .tm-bio ul그리고 편집기 출력이 사전 스타일로 도착하기를 바라기보다는 CSS 패널의 친구들입니다.
• 포맷된 Default 를 설정합니다. 굵은 이름과 하나의 링크가있는 약력은 필드가 지원하는 것의 실제 예제로 두 배가됩니다.
• 콘텐츠 지역당 하나의 WYSIWYG. 편집자에게 한 편집기 내에서 두 필드를 모두 관리하도록 요청하는 대신 소개와 작은 글씨를 별도의 필드에 제공하세요.
• 가능할 때 더 가벼운 필드를 선택하십시오. 형식화되지 않은 단일 줄이 텍스트 필드에 속함; 단락, 목록 또는 링크가 실제로 콘텐츠의 일부인 경우 WYSIWYG에 도달합니다.
• 출력에 대한 kses를 기대합니다. 포스트 내용 허용된 명부의 이상으로 주문 꼬리표는,디자인에 의하여,생존하지 않을 것입니다. 풀칠할 수 있는 익지않는 조각은 the 코드 필드's 직업.

자주 묻는 질문 #

감싸는 #

위젯 빌더 WYSIWYG 필드는 편집자에게 이미 알고있는 쓰기 경험을 제공하고 마크 업에 배치 할 수있는 단일 sanitized 토큰을 제공합니다. 콘텐츠 사람들은 시각적으로 바이오 및 설명을 포맷; 위젯은 안전하게 렌더링하고 자신의 CSS 를 통해 스타일. 붙여 넣기 원시 조각의 경우 를 사용합니다 코드 필드및 형식화된 블록을 반복하기 위해 WYSIWYG를 결합합니다 리피터 필드. 나머지 부분을 탐색하세요 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.