PHP UEditor Baidu 편집기 설치 및 사용 방법에 대한 자세한 소개

이 글에서는 주로 UEditor Baidu를 소개합니다Editor설치 사용방법은 친구가 참고하시면 됩니다

1. 공식 홈페이지에서 전체 소스코드 패키지를 다운로드하고 압축을 푼 소스코드를 임의의 디렉토리에 풀어주세요디렉토리 구조은 다음과 같습니다.

_examples: 에디터 정식 버전의 예시 페이지
_demos: 에디터의 다양한 사용 사례
dialogs: 리소스 및 JS 팝업 대화 상자에 해당하는 파일
테마: 스타일 그림 및 스타일 파일
서버: PHP, JSP 및 서버 측 작업과 관련된 기타 파일
third-party: 타사 플러그인
editor_all.js: _src 디렉터리에 있는 모든 파일을 패키지화한 파일
editor_all_min.js: editor_all.js 파일의 압축 버전을 권장합니다.
editor_config.js는 정식 배포에만 사용하세요. 편집기 파일 구성, 편집기 인스턴스화 페이지

와 동일한 디렉터리에 배치하는 것이 좋습니다. 2. UEditor를 실제 프로젝트(UETest)에 배포하는 단계:

1단계: 프로젝트의 모든 폴더에 UEditor 관련 리소스 및 파일을 저장할 디렉터리를 만듭니다. 여기 프로젝트 루트 디렉터리에 생성하고 이름을
두 번째로 지정합니다. 2단계: 소스 코드 패키지의 대화 상자, 테마, 타사, editor_all.js 및 editor_config.js를 ueditor 폴더에 복사합니다. ueditor 디렉토리를 제외한 파일은 특정 프로젝트 파일이며 여기에 나열된 파일만 있습니다.
3단계: 단순화를 위해 루트 디렉토리의 index.php 페이지가 편집기의 인스턴스화 페이지로 사용됩니다. UEditor의 전체 버전을 표시하려면 index.php 파일에서 먼저 편집기에 필요한 세 개의 항목 파일을 가져옵니다. 샘플 코드는 다음과 같습니다.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑器完整版实例</title>
<script type="text/javascript" src="ueditor/editor_config.js"></script>
<script type="text/javascript" src="ueditor/editor_all.js"></script>
<link rel="stylesheet" href="ueditor/themes/default/ueditor.css" rel="external nofollow" >

4단계: 그런 다음 index.php 파일에 편집기 인스턴스와 해당 DOM 컨테이너를 만듭니다. 구체적인 코드는 다음과 같습니다.

<p id="myEditor"></p>
<script type="text/javascript">
 var editor = new baidu.editor.ui.Editor();
 editor.render("myEditor");
</script>

마지막 단계: 편집기 인스턴스 상단에 다음 코드를 추가합니다. >

<script type="text/javascript">
 window.UEDITOR_HOME_URL=&#39;ueditor/&#39;;//此为ueditor相对于实例页面的路径
</script>

위는 상대 경로입니다. 다음과 같이 웹사이트 루트 디렉터리에 대한 절대 경로를 사용할 수도 있습니다.

<script type="text/javascript">
 window.UEDITOR_HOME_URL=&#39;/uc/ueditor/&#39;;//此为ueditor相对于网站根目录的路径
</script>

루트 디렉터리에 대한 상대 경로를 사용하는 것이 좋습니다.

이제 완전한 편집기 인스턴스가 우리 프로젝트에 배포되었습니다!

다음 위치를 수정하여 마지막 단계를 수행할 수도 있습니다(js를 이해하지 못하는 사람에게는 권장되지 않음).
/UETest/ueditor/에서 "URL= window.UEDITOR_HOME_URL||"을 찾습니다. editor_config.js 그리고 해당 경로로 수정합니다. 물론 여기서 수정하면 인스턴스 페이지에서는 window.UEDITOR_HOME_URL을 설정할 필요가 없습니다.
rree

3. 특정 용도

1. 편집기 콘텐츠를 백엔드에 제출

시나리오 1: 양식에 제출이 있습니다. 편집자가 버튼에 위치해 있으며, 이 버튼을 클릭하면 제출 작업이 완료됩니다. 이 시나리오는 가장 일반적인 경우에 적합합니다. 주의해야 할 큰 문제는 없습니다.
1) 기본적으로 제출된 양식의 이름은 다음과 같습니다. background는 "editorValue"로, editor_config.js에서 설정 가능하며, 매개변수 이름은 textarea입니다.
2) 컨테이너 태그(즉, 스크립트 태그)에
속성 이라는 이름을 설정하여 editor_config.js의 기본 구성을 재정의할 수 있습니다. 예제 코드는 다음과 같습니다. 여기의 MyContent가 새로운 제출 양식 이름이 됩니다:

//强烈推荐以这种方式进行绝对路径配置
URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";

3) 백엔드 수신자 프로그램은 다음과 같은 방법으로 편집기에서 서식 있는 텍스트 콘텐츠를 얻을 수 있습니다.

<form action="" method="post">
 <script type="text/plain" id="editor" name="myContent">
 </script>
 <input type="submit" name="submit" value="提交">
</form>

시나리오 2: 편집자가 있는 양식에 제출 버튼이 없고 외부 이벤트에 의해 제출 작업이 트리거됩니다. 이 시나리오는 프런트 엔드 상호 작용이 많은 사이트에 적합합니다. 주의해야 할 주요 사항은 양식 제출 작업을 트리거하기 전에 편집기 콘텐츠 동기화 작업을 수행하는 것입니다. 일반적인 코드 패턴은 다음과 같습니다:

//PHP获取：
$_POST["myContent"]
   
//JSP获取：
request.getParameter("myContent");
   
//ASP获取：
request("myContent");
   
//NET获取:
context.Request.Form["myContent"];

여기서 editor는 편집기 인스턴스

객체 입니다.

시나리오 3: 편집자가 어떤 양식에도 없고 외부 이벤트에 의해 제출 작업이 트리거됩니다.

이 시나리오는 많이 사용되지는 않지만 특별한 상황에서는 필요할 수 있습니다. UEditor는 해당 처리 솔루션도 제공합니다. 동기화 작업을 수행할 때 editor.sync(myFormID)와 같이 제출된 양식의 ID를 전달해야 한다는 점을 제외하면 기본 논리는 시나리오 2와 동일합니다. 그 외 내용은 2장과 동일합니다.

2. 데이터베이스에서 콘텐츠 읽기

//满足提交条件时同步内容并提交，此处editor为编辑器实例
if(editor.hasContent()){ //此处以非空为例
 editor.sync();  //同步内容
 someForm.submit(); //提交Form
}

여기서 스크립트 태그는 편집기 컨테이너 개체로 사용되며 해당 유형은 일반 텍스트로 설정되어 태그 내에서 JS 코드가 실행되지 않습니다. 이는 일부 학생들이 기존 텍스트 영역 태그를 컨테이너로 사용하여 발생하는 추가 트랜스코딩 문제를 해결합니다.

3. 편집기 콘텐츠 초기화(예: 편집기에서 서식 있는 텍스트 설정)

편집기에서 새 기사와 미리 설정된 프롬프트, 인사말 및 기타 콘텐츠를 작성하세요.
editor_config.js 파일에서initialContent 매개변수를 찾아 해당 값을 필요한 프롬프트나 인사말로 설정하세요(예:initialContent: 'UEditor에 오신 것을 환영합니다!').

4. 이미지 업로드

새 사이트라면, 즉 이미지 경로가 에디터 자체의 경로를 사용한다면 변경할 필요가 없습니다. . 이전 사이트에 이미 자체 이미지 폴더가 있는 경우 ueditor/php 폴더의 다음 파일을 변경해야 합니다:

위 내용은 PHP UEditor Baidu 편집기 설치 및 사용 방법에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!