php UEditor 바 이 두 편집기 설치 및 사용 방법 공유

1.홈 페이지 에서 전체 소스 패 키 지 를 다운로드 하여 임의의 디 렉 터 리 에 압축 을 풀 고 압축 을 푼 소스 디 렉 터 리 구 조 는 다음 과 같다.
_examples:편집기 전체 예제 페이지
_demos:편집기 의 다양한 사용 사례
dialogs:팝 업 대화 상자 에 대응 하 는 자원 과 JS 파일
themes:스타일 그림 과 스타일 파일
server:서버 쪽 에서 작 동 하 는 PHP,JSP 등 파일
제삼자:제3자 플러그 인
editor_all.js：_src 디 렉 터 리 에 있 는 모든 파일 의 압축 파일
editor_all_min.js：editor_all.js 파일 의 압축 판 은 정식 배치 할 때 사용 하 는 것 을 권장 합 니 다.
editor_config.js:편집기 설정 파일,편집기 실례 화 페이지 와 같은 디 렉 터 리 에 두 는 것 을 권장 합 니 다
2.UEditor 를 실제 프로젝트(UEtest)에 배치 하 는 절차:

첫 번 째 단계:프로젝트 의 모든 폴 더 에 UEditor 관련 자원 과 파일 을 저장 할 디 렉 터 리 를 만 듭 니 다.프로젝트 루트 디 렉 터 리 에 ueditor 라 는 이름 을 붙 입 니 다.
두 번 째 단계:원본 패키지 의 dialogs,themes,third-party,editor 복사all.js 와 editorconfig.js 가 ueditor 클립 에 있 습 니 다.그 중에서 ueditor 디 렉 터 리 를 제외 한 나머지 파일 은 모두 구체 적 인 프로젝트 파일 로 여기 열 거 된 것 은 예시 일 뿐이다.
세 번 째 단계:간단하게 보기 위해 루트 디 렉 터 리 의 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" >

네 번 째 단계:그리고 index.php 파일 에 편집기 인 스 턴 스 와 DOM 용 기 를 만 듭 니 다.구체 적 인 코드 예 시 는 다음 과 같다.

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

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

<script type="text/javascript">
 window.UEDITOR_HOME_URL='ueditor/';//  ueditor          
</script>

위 에 있 는 것 은 상대 적 인 경 로 를 사용 하고 사이트 루트 디 렉 터 리 에 대한 절대적 인 경 로 를 사용 할 수 있 습 니 다.예 를 들 어:

<script type="text/javascript">
 window.UEDITOR_HOME_URL='/uc/ueditor/';//  ueditor           
</script>

사이트 루트 디 렉 터 리 에 대한 절대적 인 경 로 를 사용 하 는 것 을 권장 합 니 다.
이로써 완전한 편집기 인 스 턴 스 가 우리 프로젝트 에 배치 되 었 습 니 다!
마지막 단 계 는 다음 과 같은 부분 을 수정 하여 실현 할 수 있다(js 를 모 르 는 사람 이 사용 하 는 것 을 권장 하지 않 음).
/UEtest/ueditor/editorconfig.js 에서"URL=window.UEDITOR"찾기HOME_URL||"해당 경로 로 변경 합 니 다.물론 여 기 를 수정 하면 window.UEDITORHOME_URL 은 인 스 턴 스 페이지 에 설정 하지 않 아 도 됩 니 다.

//                 
URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";

3.구체 적 인 사용
1.편집기 내용 을 백 엔 드 로 제출
필드 1:편집기 가 있 는 Form 에 제출 단추 가 존재 합 니 다.제출 동작 은 이 단 추 를 누 르 면 완 료 됩 니 다.
이 장면 은 가장 일반적인 장소 에 적용 되 고 큰 문제 가 없 으 며 세 가지 설명 만 할 수 있다.
1)기본적으로 백 엔 드 에 제출 된 폼 의 이름 은"editor Value"입 니 다.editorconfig.js 에서 설정 할 수 있 습 니 다.매개 변 수 는 textarea 입 니 다.
2)용기 태그(즉 script 태그)에 name 속성 을 설정 하여 editor 를 덮어 쓸 수 있 습 니 다.config.js 의 기본 설정 입 니 다.인 스 턴 스 코드 는 다음 과 같 습 니 다.이 곳 의 my Content 는 새로운 제출 폼 이름 이 될 것 입 니 다.

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

3)백 엔 드 수신 기 는 편집기 의 부 텍스트 내용 을 다음 과 같은 몇 가지 방식 으로 가 져 올 수 있 습 니 다.

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

장면 2:편집기 가 있 는 Form 에 제출 단추 가 존재 하지 않 습 니 다.제출 동작 은 외부 이벤트 에 의 해 실 행 됩 니 다.
이 장면 은 사이트 전단 의 상호작용 이 많은 장소 에 적용 되 며 주의해 야 할 사항 은 form 제출 동작 을 실행 하기 전에 편집기 내용 동기 화 작업 을 수행 하 는 것 입 니 다.일반적인 코드 모드 는 다음 과 같다.

//              ，  editor      
if(editor.hasContent()){ //       
 editor.sync();  //    
 someForm.submit(); //  Form
}

편집기 인 스 턴 스 대상 입 니 다.
장면 3:편집기 가 그 어떠한 Form 에 도 없습니다.제출 동작 은 외부 이벤트 에서 실 행 됩 니 다.
이 장면 은 많이 사용 되 지 않 지만 특별한 시기 에 필요 할 수 있 습 니 다.UEditor 도 대응 하 는 처리 방안 을 제공 합 니 다.기본 논 리 는 장면 2 와 같 습 니 다.동기 화 작업 을 수행 할 때 editor.sync(my FormID)와 같은 form 을 제출 하 는 id 를 입력 하면 됩 니 다.기타 동일 장면 2.
2.데이터베이스 에서 내용 읽 기

<script type="text/plain" id="editor">
 //                
</script>

편집기 용기 대상 으로 script 라벨 을 사용 하고 일반 텍스트 형식 을 설정 하여 태그 내부 JS 코드 가 실행 되 는 것 을 피 하 는 동시에 일부 학생 들 이 전통 적 인 textarea 라벨 을 용기 로 사용 하 는 데 가 져 온 추가 코드 문 제 를 해결 합 니 다.
3.편집기 내용 초기 화(즉,편집기 에 부 텍스트 설정)
새 글 쓰기,편집기 에 알림,인사 등 을 미리 설정 합 니 다.
에디터config.js 파일 에서 initialContent 인 자 를 찾 아 필요 한 알림 이나 인사말 로 설정 하면 됩 니 다.예 를 들 어 initialContent:'UEditor 사용 을 환영 합 니 다!'
4.사진 업로드
새 사이트 라면 그림 경 로 는 편집기 자체 의 경 로 를 사용 합 니 다.변경 할 필요 가 없습니다.오래된 사이트 에 자신의 그림 폴 더 가 있다 면 다음 과 같은 ueditor/phop 폴 더 의 파일 을 변경 해 야 합 니 다.