바 이 두 UEditor 편집기 사용 튜 토리 얼 및 사용 방법(그림)
첫째:바 이 두 UEditor 편집기 의 공식 다운로드 주소
ueditor 공식 주소:http://ueditor.baidu.com/website/index.html
개발 문서 주소:http://ueditor.baidu.com/website/document.html
다운로드 주소:http://ueditor.baidu.com/website/download.html (여 기 는 개발 판 또는 MINI 판 을 선택 할 수 있 습 니 다)
두 번 째:바 이 두 UEditor 편집기 의 기능 버 전 선택
바 이 두 UEditor 편집기 홈 페이지 에 들 어가 다운로드 옵션 을 클릭 한 후에 우 리 는 모두 두 가지 버 전 을 선택 할 수 있 습 니 다.하 나 는 UBuilder 이 고 하 나 는 개발 판 입 니 다.아래 에 설명 한 빨간색 작은 글 자 를 통 해 UBuilder 와 개발 판 의 차 이 를 알 수 있 습 니 다.일반적으로 우 리 는 UBuilder 버 전 을 선택 하면 된다.
UEditor 는 기 존 에 소프트웨어 를 다운로드 하 는 방식 과 달리 선택 적 으로 다운로드 합 니 다.먼저 보 이 는 기능 의 선택 입 니 다.모두 기본,삽입,포맷,표 4 대 그룹 이 있 습 니 다.각 그룹 아래 에 몇 가지 기능 버튼 이 있 습 니 다.우 리 는 자신의 수요 에 따라 선택 할 수 있 습 니 다.만약 에 4 대 그룹 을 더 블 클릭 하면 이 그룹 단 추 를 선택 하 는 것 을 표시 합 니 다.선택 한 버튼 이 마음 에 들 지 않 으 면 비우 기 선택 을 누 를 수 있 습 니 다.한 가지 힌트 는 비우 기 선택 을 누 르 면 원래 했 던 모든 선택 을 알 수 있 습 니 다.
다음은 숨겨 진 기능,언어,서버 버 전의 선택 입 니 다.숨겨 진 기능 은 기본적으로 전체 선택 입 니 다.필요 하지 않 으 면 변경 하지 않 는 것 이 좋 습 니 다.언어 옵션 은 모두 중국어 와 영어 두 가지 로 나 뉘 는데 기본 적 인 것 은 중국어 언어 팩 만 다운로드 하 는 것 입 니 다.영어 가 필요 하 다 면 영어 가방 도 추가 할 수 있 습 니 다.서버 버 전 은 현재 PHP,.NET,JSP 등 세 가지 가 제공 되 고 있 습 니 다.선택 이 끝나 면 자원 팩 을 다운로드 하려 면 클릭 할 수 있 습 니 다.
세 번 째:바 이 두 UEditor 편집기 의 설정 방법
1.홈 페이지 에서 전체 소스 패 키 지 를 다운로드 하여 임의의 디 렉 터 리 로 압축 을 풀 고 압축 을 푼 소스 디 렉 터 리 구 조 는 다음 과 같다.
_examples:편집기 전체 예제 페이지
dialogs:팝 업 대화 상자 에 대응 하 는 자원 과 JS 파일
themes:스타일 이미지 와 스타일 파일 php/jsp/.net:서버 에서 작 동 하 는 배경 파일 과 관련 되 어 있 습 니 다.선택 한 배경 버 전에 따라 여기 도 다 를 수 있 습 니 다.여기 서 phop 을 선택 하 겠 습 니 다.
타 사:제3자 플러그 인(코드 하 이 라이트,소스 코드 편집 등 구성 요소 포함)
editor_all.js：_src 디 렉 터 리 에 있 는 모든 파일 의 패키지 파일(버 전 발표 에 사용)
editor_api.js:API 인터페이스 프로필(개발 버 전)
editor_all_min.js：editor_all.js 파일 의 압축 판 은 정식 배치 할 때 사용 하 는 것 을 권장 합 니 다.
editor_config.js:편집기 설정 파일,편집기 실례 화 페이지 와 같은 디 렉 터 리 에 두 는 것 을 권장 합 니 다
2.편집기 의 실례 화 페이지,편집기 에 필요 한 세 개의 입구 파일 을 가 져 옵 니 다.예제 코드 는 다음 과 같 습 니 다.
3.그리고 편집기 의 예화 페이지 에 편집기 인 스 턴 스 와 DOM 용 기 를 만 듭 니 다.예제 코드 는 다음 과 같 습 니 다.
var editor = new UE.ui.Editor();
editor.render("myEditor");
//1.2.4 이후 코드 실례 화 편집 기 를 사용 할 수 있 습 니 다
//UE.getEditor('myEditor')
4、editorconfig.js 에서 URL 변수 설정 편집기 가 프로젝트 의 경 로 를 찾 습 니 다.
홈 페이지 예제:
//이러한 방식 으로 절대 경로 설정 을 하 는 것 을 강력 히 추천 합 니 다.
URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";
내 설정:
(function () {
/**
*편집기 자원 파일 루트 경로.편집기 실례 화 페이지 를 현재 경로 로 하고 편집기 자원 파일(즉 dialog 등 폴 더)의 경 로 를 가리 키 는 것 을 의미 합 니 다.
*많은 학생 들 이 편집 기 를 사용 할 때 발생 하 는 여러 가지 경로 문 제 를 감안 하여'사이트 루트 디 렉 터 리 에 비해 상대 적 인 경로'를 사용 하여 설정 하 는 것 을 강력 히 권장 합 니 다.
*'사이트 루트 디 렉 터 리 에 대한 상대 경로'즉'/my Project/umeditor/'와 같은 슬 래 쉬 로 시작 하 는 경로 입 니 다.
*사이트 에 같은 단계 에 있 지 않 은 페이지 가 여러 개 있 으 면 예제 편집기 가 필요 하고 같은 UEditor 를 참조 할 때 이 URL 은 각 페이지 의 편집기 에 사용 하기에 적합 하지 않 을 수 있 습 니 다.
*따라서 UEditor 는 서로 다른 페이지 의 편집기 에 대해 따로 설정 할 수 있 는 루트 경 로 를 제공 합 니 다.구체 적 으로 는 예제 편집기 가 필요 한 페이지 맨 위 에 다음 코드 를 쓰 면 됩 니 다.물론 이 곳 의 URL 을 대응 하 는 설정 과 같 게 해 야 합 니 다.
* window.UMEDITOR_HOME_URL = "/xxxx/xxxx/";
*/
/**
* @author wusuopubupt
* @date 2013-10-24
*
* set window.UMEDITOR_HOME_URL = "/ueditor/";
*
* */
window.UMEDITOR_HOME_URL = "/ueditor/"; // ！
var URL = window.UMEDITOR_HOME_URL || (function(){
function PathStack() {
/**
*
*/
(function (){
var paths = [
'editor.js',
'core/browser.js',
'core/utils.js',
'core/EventBase.js',
'core/dtd.js',
'core/domUtils.js',
'core/Range.js',
'core/Selection.js',
'core/Editor.js',
'core/filterword.js',
'core/node.js',
'core/htmlparser.js',
'core/filternode.js',
'plugins/inserthtml.js',
'plugins/image.js',
'plugins/justify.js',
'plugins/font.js',
'plugins/link.js',
'plugins/print.js',
'plugins/paragraph.js',
'plugins/horizontal.js',
'plugins/cleardoc.js',
'plugins/undo.js',
'plugins/paste.js',
'plugins/list.js',
'plugins/source.js',
'plugins/enterkey.js',
'plugins/preview.js',
'plugins/basestyle.js',
'plugins/video.js',
'plugins/selectall.js',
'plugins/removeformat.js',
'plugins/keystrokes.js',
'plugins/dropfile.js',
'ui/widget.js',
'ui/button.js',
'ui/toolbar.js',
'ui/menu.js',
'ui/dropmenu.js',
'ui/splitbutton.js',
'ui/colorsplitbutton.js',
'ui/popup.js',
'ui/scale.js',
'ui/colorpicker.js',
'ui/combobox.js',
'ui/buttoncombobox.js',
'ui/modal.js',
'ui/tooltip.js',
'ui/tab.js',
'ui/separator.js',
'ui/scale.js',
'adapter/adapter.js',
'adapter/button.js',
'adapter/fullscreen.js',
'adapter/dialog.js',
'adapter/popup.js',
'adapter/imagescale.js',
'adapter/autofloat.js',
'adapter/source.js',
'adapter/combobox.js'
],
/**
* @author wusuopubupt
* @date 2013-10-24
*
* modified baseURL = '/ueditor/src/';
*/
baseURL = '/ueditor/src/';
for (var i=0,pi;pi = paths[i++];) {
document.write('<script type="text/javascript" src="'+ baseURL + pi +'"></script>');
}
})();
6.파일 업로드 문제:
ueditor.config.js 를 열 면 다음 설정 을 볼 수 있 습 니 다.
그림 업로드 설정 영역
,imageUrl:URL+"php/imageUp.php"/사진 업로드 제출 주소
//,imagePath:URL+"php/"//이미지 수정 주소,fixedImagePath 참조,특별한 수요 가 있 으 면 자체 설정 가능
,imagePath:"http://test.mathandcs.com/"
,imageFieldName:"upfile"//그림 데이터 의 key 를 수정 하려 면 배경 에 대응 하 는 파일 에서 대응 하 는 파 라 메 터 를 수정 해 야 합 니 다.
이 곳 의 imageURL 은 이미지 업로드 에 호출 된 phop 파일 의 주소 이 고,imagePath 는 새로 업로드 한 이미지 에 생 성 된 이미지 주소 의 host 부분 입 니 다.
ueditor/php/의 imageUp.php 파일 을 열 면 다음 과 같은 설정 이 있 습 니 다.
$config = array(
"savePath" => "/var/www/store/upload/" , //
"maxSize" => 1000 , // ， KB
"allowFiles" => array( ".gif" , ".png" , ".png" , ".jpeg" , ".bmp" ) //
);
//
//$Path = "upload/";
$Path = "/var/www/store/upload/"; 상대 경로 와 절대 경로 의 문제 로 인해 생 성 된 주소 가 틀 릴 수 있 습 니 다.이때 이미지 URL 을 생 성 하 는 JS 파일 을 hack 해 야 합 니 다.
ueditor/dialogs/image/image.js 에서 수정:
/**
* @author wusuopubupt
* @date 2013-10-24
* @return url modified
* */
var reg = /\/var\/www\/test\/upload\//;
url = url.replace(reg,"");
var $img = $("
$item = $("
").append($img);
이곳 의 정규 규칙 은 구체 적 인 상황 에 따라 정 해 야 한다!
이로써 Ueditor 는 내 환경 에서 설정 에 성공 했다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
hdu 2460 poj 3694 (더 블 연결 + LCA)제 시 된 두 점 에 한 쪽 을 더 하고 남 은 다리 의 수량 을 구하 세 요. LCA 온라인 이 아니 라 가장 일반적인 것 을 사 용 했 습 니 다. 먼저 Tarjan 쌍 연결 점 을 축소 한 다음 에 축 소 된 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
