PHPCMS에 어떤 편집기를 사용하고 있나요?
PHPCMS는 CKEditor 편집기를 사용합니다. CKEditor는 재개발된 버전인 이 편집기는 놀라운 성능과 확장성으로 인해 세계 최고의 웹 온라인 텍스트 편집기 중 하나입니다. 주요 웹사이트에서.
CKEditor 통합
CKEditor를 웹 페이지에 통합하는 방법에는 여러 가지가 있습니다. 가장 일반적인 구현 방법은 다음과 같습니다.
1단계: CKEditor 로드
CKEditor는 JavaScript 애플리케이션이므로 로드하려면 웹 페이지에 파일 참조만 포함하면 됩니다.
웹사이트의 "ckeditor" 디렉토리에 CKEditor를 설치한 경우 다음 예를 참조할 수 있습니다.
<head> ... <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head>
위의 방법으로 로드하면 CKEditor JavaScript API를 사용할 수 있습니다.
2단계: 편집기 인스턴스 만들기
CKEditor는 웹 페이지의 텍스트 영역(textarea)처럼 작동하며 간단하고 쓰기 쉬운 사용자 인터페이스, 레이아웃 및 서식 있는 텍스트 입력 영역을 제공합니다. 하지만 텍스트 영역에서는 동일한 효과를 얻기가 쉽지 않습니다. 사용자가 html 코드를 입력해야 합니다.
그러나 실제로 CKEditor는 여전히 텍스트 영역을 사용하여 데이터를 서버에 전달하며 이 텍스트 영역은 사용자에게 표시되지 않습니다. 따라서 인스턴스를 생성하고 편집해야 합니다. 먼저 인스턴스를 생성하세요:
<textarea id="editor1"></textarea>
데이터베이스에서 데이터를 읽는 등 일부 데이터를 편집기에 로드하려면 해당 데이터를 텍스트 영역에만 입력하면 됩니다. , 위의 예와 같습니다. 이 예에서는 텍스트 영역의 이름을 "editor1"로 지정했습니다. 이 이름은 POST 제출 데이터를 수신할 때 서버 작업에 사용됩니다. CKEditor Javascript API 사용을 시작하려면 편집기 인스턴스를 사용하여 이 일반 텍스트 영역(텍스트 영역)을 "대체"합니다. 이를 위해서는 다음 JavaScript 코드를 추가해야 합니다.
<script type="text/javascript"> CKEDITOR.replace( 'editor1' ); </script>
위 스크립트 블록은 웹에만 포함될 수 있습니다. 4750256ae76b6b9d804861d8f69e79d3 태그 뒤의 페이지 93f0f5c25f18dab9d176bd4f6de5d30e 태그 내에서 이 교체 프로세스를 실행할 수도 있지만 이 경우 DOM이 로드되었는지 확인해야 합니다. 이는 일반적으로 window.onload 이벤트에 기록될 수 있습니다(DOM은 다음 위치에 로드되어야 합니다). 이번에) :
<script type="text/javascript"> window.onload = function() { CKEDITOR.replace( 'editor1' ); }; </script>
3단계: 편집기 콘텐츠 데이터 저장
앞서 설명했듯이 편집기는 텍스트 영역처럼 작동하므로 편집기 인스턴스가 포함된 양식이 제출되면 그의 데이터도 데이터를 수신하기 위한 키로 텍스트 영역의 이름을 지정합니다. 예를 들어 위의 예에 따르면 PHP에서는 다음과 같이 데이터를 처리해야 합니다.
<?php $editor_data = $_POST[ 'editor1' ]; ?>
클라이언트 측 데이터 처리 일부 애플리케이션(예: ajax 애플리케이션)에서는 모든 데이터를 클라이언트 측에서 처리해야 합니다. 서버에 데이터를 보내기 위해 자체적으로 사용됩니다. 이 경우 CKEditor API를 사용하면 편집기 인스턴스에서 콘텐츠를 쉽게 가져올 수 있습니다. 예:
<script type="text/javascript"> var editor_data = CKEDITOR.instances.editor1.getData(); </script>
추천 튜토리얼: "PHPCMS Tutorial"
위 내용은 PHPCMS에는 어떤 편집기가 사용됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!