무료 오픈 소스 바 이 두 편집기(UEditor)사용 방법

UEditor 효과 도
프로필
UEditor 는 오픈 소스 무료 편집기 로 바 이 두 웹 전단 연구 개발 부가 개발 한 부 텍스트 웹 편집기 로 경 량,맞 춤 형 제작 가능,사용자 체험 중시 등 특징 을 가지 고 있 으 며 오픈 소스 는 BSD 프로 토 콜 을 바탕 으로 자 유 롭 게 코드 를 사용 하고 수정 할 수 있 습 니 다.
공식 홈 페이지:http://ueditor.baidu.com/
2.다운로드 주소
공식 다운로드:http://ueditor.baidu.com/website/download.html
홈 페이지 에서 전체 소스 패 키 지 를 다운로드 하여 임의의 디 렉 터 리 에 압축 을 풀 고 압축 을 푼 소스 디 렉 터 리 구 조 는 다음 과 같다.    _examples:편집기 전체 예제 페이지    dialogs:팝 업 대화 상자 에 대응 하 는 자원 과 JS 파일    themes:스타일 그림 과 스타일 파일    php/jsp/.net:서버 에서 작 동 하 는 배경 파일 입 니 다.선택 한 배경 버 전에 따라 여기 도 다 를 수 있 습 니 다.여 기 는 jsp,php,.net 이 어야 합 니 다.    타 사:제3자 플러그 인(코드 하 이 라이트,소스 코드 편집 등 구성 요소 포함)    editor_all.js：_src 디 렉 터 리 에 있 는 모든 파일 의 압축 파일    editor_all_min.js：editor_all.js 파일 의 압축 판 은 정식 배치 할 때 사용 하 는 것 을 권장 합 니 다.    editor_config.js:편집기 설정 파일,편집기 실례 화 페이지 와 같은 디 렉 터 리 에 두 는 것 을 권장 합 니 다
혹은 인터넷 에서 다른 사람 이 설정 한 인 스 턴 스 를 검색 하면 자신 이 괴 롭 히 지 않 아 도 된다.내 가 직접 했 는데,결국 오랫동안 괴 롭 혔 는데,하마터면 포기 할 뻔 했다!
저 는 개발 판[1.2.5.1.Net 버 전]을 다운 받 았 습 니 다.  2013 년 4 월 27 일 최신 버 전.
3.배치 방법
코드 구성 도
첫 번 째 단계:프로젝트 의 모든 폴 더 에 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>

네 번 째 단계:그리고 index.php 파일 에 편집기 인 스 턴 스 와 DOM 용 기 를 만 듭 니 다.구체 적 인 코드 예 시 는 다음 과 같다.
마지막 단계:재/UEtest/ueditor/editorconfig.js 에서 URL 변수 설정 편집기 가 프로젝트 에 있 는 길 을 찾 습 니 다.

<textarea name="     key" id="myEditor">          </textarea>
<script type="text/javascript">
    var editor = new UE.ui.Editor();
    editor.render("myEditor");
    //1.2.4                
    //UE.getEditor('myEditor')
</script>

이로써 완전한 편집기 인 스 턴 스 가 우리 프로젝트 에 배치 되 었 습 니 다!브 라 우 저 에 입력http://localhost/UETest UE 의 강력 한 기능 을 실행 해 보 세 요!
주의사항
1.editor 를 인용 중config.js 시 editor 보다 먼저all.js 로드,그렇지 않 으 면 특정 상황 에서 오류 가 발생 할 수 있 습 니 다.2.편집기 에 초기 값 을 부여 하려 면examples 파일 의 예 코드 나 공식 적 으로 제 시 된 문서 설명 을 읽 습 니 다.3.주의해 야 할 것 은 편집기 자원 파일 루트 경로 입 니 다.편집기 실례 화 페이지 를 현재 경로 로 하고 편집기 자원 파일(즉 dialog 등 폴 더)의 경 로 를 가리 키 는 것 을 의미 합 니 다.많은 학생 들 이 편집 기 를 사용 할 때 발생 하 는 여러 가지 경로 문 제 를 감안 하여'사이트 루트 디 렉 터 리 에 비해 상대 적 인 경로'로 설정 하 는 것 을 강력 히 권장 합 니 다."사이트 루트 디 렉 터 리 의 상대 경로 에 비해'즉,슬 래 쉬 로 시작 하 는'/UEtest/ueditor/'와 같은 경로 입 니 다.
또한"ueditor/"(도표 1 경로 구조 에 비해)상대 경 로 를 사용한다 면 사이트 에 같은 등급 에 있 지 않 은 페이지 가 여러 개 있 으 면 예제 편집기 가 필요 하고 같은 UEditor 를 참조 할 때 각 페이지 의 편집기 에 적합 하지 않 을 수 있 습 니 다.따라서 UEditor 는 서로 다른 페이지 의 편집기 에 대해 따로 설정 할 수 있 는 루트 경 로 를 제공 합 니 다.구체 적 으로 는 예제 편집기 가 필요 한 페이지 맨 위 에 다음 코드 를 쓰 면 됩 니 다.물론 이 곳 의 URL 을 대응 하 는 설정 과 같 게 해 야 합 니 다.window.UEDITOR_HOME_URL ="/xxxx/xxxx/";예 를 들 어 도표 1 의 디 렉 터 리 구조 에 따라
index.aspx 에서 편집 기 를 사용한다 면 editorconfig.js 의 맨 위 에 있 는 var URL 을 var URL 로 바 꿉 니 다="/UEtest/ueditor/"
5.흔히 볼 수 있 는 문제
1.인 코딩 이 성공 적 으로 실행 되 고 인 코딩 이 발생 하면 인 코딩 방식 을 확인 하 십시오.UEditor 가 인용 한 스 크 립 트 는 인 코딩 방식 과 meta 탭 을 가지 고 있 습 니 다.제 가 다운로드 한 것 은 utf-8 버 전 입 니 다.실행 하기 시작 하면 어 지 러 운 코드 가 발생 합 니 다.제 가 인용 한 스 크 립 트 의 charset="utf-8"을 제거 하면 문제 가 없습니다.
2.사진 을 올 리 는 중 오류 가 발생 했 습 니 다.사진 을 올 리 면 빨간색 포크 가 나타 나 거나 반 으로 올 리 면 반응 이 없습니다.net 폴 더(PHP 언어 는 php,JSP 언어 는 jsp)아래 웹.config 를 삭제 합 니 다.그 이 유 는.net 4.0 설정 을 사용 하고 3.5 와 이하 버 전 은 문제 가 있어 삭제 에 영향 을 주지 않 기 때 문 입 니 다.
6.마지막 으로 제 코드 를 동봉 합 니 다.

//                 （  ：   UETest       ）
URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";