Drupal 9 CKEditor 팝업 만들기 - 당신이 몰랐던 7가지 유용한 모듈
게시 됨: 2021-12-06콘텐츠 편집기는 기본적으로 CMS의 가장 중요한 기능입니다. 그리고 CKEditor와 같은 강력한 기능을 기본 서식 있는 텍스트 편집 도구로 사용하여 Drupal은 CKEditor 위젯 시스템 및 ACF(Advanced Content Filter)와 같은 Drupal 8/9의 몇 가지 새로운 기능으로 콘텐츠 관리 게임을 상당히 향상시켰습니다. 그래서, 예, 기본 기능을 가지고도 꽤 강력합니다... 그러나 기여한 모듈과 플러그인의 도움으로 CKEditor 게임을 실제로 향상시킬 수 있습니다. CKEditor의 기능과 유용성을 확장할 수 있는 가장 흥미롭고 최고의 애드온에 대한 정보를 얻으려면 계속 읽으십시오.
Drupal 9 CK에디터
첫째, Drupal을 처음 사용하는 사람들을 위해 CKEditor 4.5는 Drupal 8/9의 기본 WYSIWYG(What you see is what you get) 풍부한 편집기입니다. 웹 사이트 관리자가 웹 페이지에서 직접 콘텐츠를 작성하고 편집하는 데 도움이 되는 텍스트 편집기입니다. Drupal과 마찬가지로 CKEditor는 오픈 소스 프로젝트이며 최근에 계속해서 개선될 많은 강력한 새 기능으로 업그레이드되었습니다. Drupal 10 준비 이니셔티브의 일환으로 Drupal 기고자들은 Drupal 10에서 가장 최신의 최신 버전인 CKEditor 5를 구현하기 위해 노력하고 있습니다.
이제 기본적인 사항은 정리했으므로 업그레이드를 시작하겠습니다!
이 환상적인 Drupal 9 모듈로 CKEditor 확장
1. CK에디터 자세히 보기
독자에게 나머지 많은 양의 텍스트를 볼 수 있는 선택권을 주고 싶을 때를 아십니까? 이것이 CKEditor Read More 기능을 사용하라는 신호입니다. 이 기능은 사용자가 페이지를 간결한 레이아웃으로 유지하면서 "읽도록" 초대합니다. 이를 추가하기 위해 Drupal 9는 기여자 모듈을 설치한 후 더 읽기/간단히 보기 기능을 활성화하는 간단하고 쉬운 방법을 제공합니다.
모듈 구현:
이 모듈을 설치하면 몇 가지 설정을 구성해야 합니다.
- 기본 텍스트 형식을 편집하고 "허용되는 HTML 태그 제한"을 활성화합니다.
- "허용된 HTML 태그"에 <div data-readmore-less-text data-readmore-more-text data-readmore-type class=" ckeditor-readmore"> 를 추가합니다. "허용되는 HTML 태그 제한"을 비활성화하고 저장을 누르십시오.
- 이제 "더 읽기" 아이콘을 사용 가능한 버튼에서 활성 도구 모음으로 끌어다 놓고(위 이미지 참조) 저장을 누르십시오.
- 캐시를 지운 후 "선호하는 텍스트 형식"을 선택하면 텍스트 편집기에서 " 더 읽기 " 아이콘을 찾을 수 있습니다.
사용 방법:
콘텐츠 영역 내에서 " 텍스트 형식 " 아이콘을 클릭합니다. 이제 직사각형 상자를 얻을 수 있습니다. 사용자가 자세히 보기를 클릭한 후 표시할 나머지 콘텐츠를 추가합니다.
FAQ : 더 읽기 텍스트를 수정할 수 있습니까?
전적으로! "CKEditor 플러그인 설정"에서 "더 읽기 버튼" 탭을 클릭하고 텍스트를 변경하기만 하면 됩니다.
2. CKEditor 색상 버튼
기본적으로 CKEditor는 편집기 내에서 텍스트 색상을 변경할 수 있는 선택권을 제공하지 않습니다. 그러나 특정 텍스트의 색상을 변경하거나 다른 색상으로 텍스트를 강조하고 싶다면 Drupal 9 CKEditor Color Button 모듈이 목록에 있어야 합니다. 이 모듈을 사용하려면 패널 버튼 모듈도 설치해야 하며 이 두 모듈 모두 라이브러리, 색상 버튼 라이브러리 및 패널 버튼 라이브러리를 설치해야 합니다. 모듈을 설치하고 테마의 라이브러리 폴더에 라이브러리를 추가한 후 색상 버튼을 사용 가능한 버튼에서 원하는 텍스트 형식의 활성 도구 모음으로 이동할 수 있습니다.
FAQ: 사용자 지정 색상을 추가할 수 있습니까?
네! 이미 사용 가능한 기본 색상을 사용하지 않으려면 사용자 정의 색상도 설정할 수 있습니다. 색상 옵션을 활성화한 "텍스트 편집기 형식" 섹션에서 이 작업을 수행할 수 있습니다. "텍스트 편집기 형식"의 "CKEditor 플러그인 설정" 섹션에서 "CKEditor 색상 버튼"을 찾아 # 기호 없이 쉼표로 구분된 "텍스트 색상" 텍스트 영역에 색상을 추가합니다.
3. 씨케이에디터 유튜브
Drupal 9 CKEditor Youtube 모듈을 사용하면 긴 임베드 코드 없이 콘텐츠에 Youtube 비디오를 추가할 수 있습니다. Youtube 아이콘 형식을 설치 및 사용 가능 버튼에서 활성 도구 모음으로 이동한 후 텍스트 편집기에서 원하는 텍스트 형식으로 Youtube 아이콘을 찾을 수 있습니다. 이 모듈은 라이브러리에 따라 다릅니다.
이 모듈의 가장 좋은 점 중 하나는 유연성입니다. 위 스크린샷과 같이 너비와 높이를 지정하면서 "임베딩 코드 붙여넣기" 또는 Youtube URL을 붙여넣을 수 있습니다. 또한 "자동 재생", "(특정 시간)에 시작" 및 "플레이어 컨트롤 표시"와 같은 편리한 옵션이 있습니다.
4. CKEditor 템플릿 및 CKEditor 템플릿 사용자 인터페이스
웹사이트 페이지나 게시물에 동일한 콘텐츠 구조가 많이 있습니까? CKEditor 템플릿 및 CKEditor 템플릿 사용자 인터페이스 모듈은 쉽게 복제할 수 있는 티켓입니다. 두 모듈 모두 모듈 페이지의 지침에 따라 다운로드 및 설치할 수 있는 라이브러리에 따라 다릅니다. 이러한 라이브러리를 설치한 후 템플릿 아이콘을 아래 이미지와 같이 사용 가능한 버튼에서 활성 도구 모음으로 이동할 수 있습니다.
CKEditor 템플릿 모듈은 미리 정의된 템플릿이 있는 대화 상자 팝업을 제공합니다. 템플릿 아이콘(위 스크린샷 참조)을 클릭하면 미리 정의된 템플릿을 선택할 수 있는 팝업이 표시됩니다. 그런 다음 포함된 "텍스트 형식 및 스타일"과 함께 템플릿이 삽입됩니다.
CKEditor 템플릿 사용자 인터페이스 모듈은 CKEditor 템플릿 모듈에서 선택한 템플릿을 생성하는 데 사용하는 모듈입니다. 모듈을 활성화하면 Config > Content Authoring > CKEditor Templates 섹션에서 옵션을 찾을 수 있습니다.
구성에서 CKEditor 템플릿 을 클릭하면 CKEditor 구성 템플릿 페이지로 리디렉션됩니다. 이제 템플릿을 추가하거나 편집할 수 있습니다.
5. CK에디터 코드 스니펫
CKEditor CodeSnippet 모듈을 사용하여 콘텐츠 내에 "코드 콘텐츠"를 추가하여 강조 표시되고 형식이 잘 지정되도록 할 수 있습니다. 이 모듈은 highlight-js 라이브러리와 사용 가능한 모든 스타일을 사용합니다. 작곡가를 사용하여 이 모듈을 설치하면 라이브러리가 자동으로 설치됩니다. 이 모듈을 설치한 후 "코드 조각" 아이콘을 사용 가능 버튼에서 활성 도구 모음으로 이동할 수 있습니다.
이제 텍스트 형식의 CKEditor 플러그인 설정 에서 코드 조각 탭을 찾을 수 있습니다. 여기에서 지원되는 프로그래밍 언어를 확인/선택 취소할 수 있습니다.
자주하는 질문: 어떻게 사용합니까?
모듈을 설치하면 CKEditor에서 콘텐츠에 CodeSnippet 기능을 삽입할 수 있습니다. Code Snippet 아이콘을 클릭하면 팝업이 나타납니다. 여기에서 코드를 붙여넣고 코드 언어를 선택할 수 있습니다.
6. CKEditor 단어 수
그래서 당신은 단어/문자 제한으로 작업하고 있습니다... 이것은 동적 레이아웃이 있는 고도로 양식화된 사이트에서 일반적인 상황입니다. 그리고 동일한 콘텐츠에 대해 여러 사람이 작업하는 경우 특히 복잡해질 수 있습니다. 이러한 경우 편집기 자체의 바닥글에서 CKEditor의 문자 및 단어 수를 확인하는 것이 도움이 됩니다(MS Word에서와 같이). 그 때 CKEditor Wordcount 모듈을 설치합니다. 모듈 및 라이브러리를 설치한 후 텍스트 형식의 CKEditor 플러그인 설정 에서 "단어 수 및 문자 수"를 찾을 수 있습니다. 여기에서 요구 사항에 따라 기능을 선택/선택 취소할 수 있습니다. 또한 CKEditor의 오른쪽 하단 부분에 있는 카운터를 찾을 수 있습니다.
7. CKEditor 트윗 가능 텍스트
인터넷 포인트를 얻으려고 하시나요? CKEditor Tweetable Text 모듈을 사용하면 사용자가 단어나 구문을 클릭하여 특정 텍스트를 트윗할 수 있는 옵션을 제공할 수 있습니다. 모듈 페이지의 지침에 따라 모듈과 라이브러리를 설치하고 사용 가능 버튼에서 활성 도구 모음으로 트윗 가능한 텍스트 아이콘을 이동하기만 하면 됩니다. 그러면 텍스트 편집기에서 트윗 아이콘을 찾을 수 있습니다. 이 아이콘을 클릭하면 팝업이 열립니다. 여기에서 표시 텍스트 (트윗 아이콘을 추가하려는 단어)와 트윗 가능한 텍스트 (트윗에 표시될 텍스트 )를 추가할 수 있습니다. 사용자가 텍스트 표시를 클릭하면 트위터로 리디렉션되고 트윗 가능한 텍스트 가 표시됩니다.
