CKeditor 의 비주류 개성 응용 에 대한 설정

CKeditor,예전 에는 FCKeditor 라 고 불 렸 는데,이미 여러 해 동안 사용 해 왔 으 니,기능 은 자연히 말 할 필요 가 없다.최근 3.0 버 전 으로 업그레이드 되 어 코드 를 다시 쓴 것 같 아서 구축 방식 도 좀 달 라 졌 고 더 간단 해 졌 다 고 할 수 있 습 니 다.관련 주소:공식 홈 페이지:http://ckeditor.com/ 다운로드 주소:http://ckeditor.com/download CKfinder：http://ckfinder.com/ 업로드 에 사용 할 플러그 인(네 가지 언어 버 전,필요 에 따라 다운로드)배치:CKeditor 를 다운로드 하고 웹 사이트/ckeditor/아래(물론 이름 은 수정 할 수 있 습 니 다.새 경 로 를 설정 하려 면 해당 config 파일 을 수정 해 야 합 니 다)호출:페이지 의 head 에서을 호출 한 다음 편집기 가 필요 한 곳 에 코드 를 설치 하 십시오.

 
<textarea cols="80" id="Text" name="Text" rows="10">      ，            。html    HTMLEncode  </textarea> 
<script type="text/javascript"> 
var editor = CKEDITOR.replace('Text'); 
</script> 

이렇게 간단 합 니 다.CKEDITOR.replace('text')는 편집 기 를 만 드 는 코드 입 니 다.CKEDITOR.replace()방법 에 서 는 편집기 스타일 도 설정 할 수 있 습 니 다.다음 과 같이 설정 할 수 있 습 니 다

 
var editor = CKEDITOR.replace( 'Text', 
{ 
language:'zh-cn',//     
toolbar ://      
[ 
['Source'], 
'/', 
['Cut','Copy','Paste','PasteText','PasteFromWord'], 
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], 
['TextColor','BGColor'], 
] 
}); 

구체 적 인 설정 은 매우 많 습 니 다.구체 적 으로 그의 도움말 을 볼 수 있 습 니 다.http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html이 설정 은/ckeditor/config.js 에서 설정 할 수 있 습 니 다.이 설정 을 설정 한 후에 편집기 의 기본 기본 설정 을 수정 하 였 으 며,위 설정 은 현재 편집기 에 만 적 용 됩 니 다.구체 적 인 설정 방법 은 다음 과 같다

 
CKEDITOR.editorConfig = function( config ) 
{ 
// Define changes to default configuration here. For example: 
config.language = 'zh-cn'; //     
//config.uiColor = '#FFF'; //     
config.width = 500; //   
config.height = 400; //   
config.skin='v2'; //        ，         ，    v2     ，  、  。 
//    
config.toolbar = 
[ 
['Source'], 
'/', 
['Cut','Copy','Paste','PasteText','PasteFromWord'], 
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], 
['TextColor','BGColor'], 
] 
}; 

데 이 터 를 여기에 제출 하면 우 리 는 이미 기본적으로 설정 했다.호출 되면 배경 에서 request["text"]를 사용 하여 편집기 의 텍스트 를 가 져 올 수 있 습 니 다.fckeditor(Ver 2.0)에 서 는 웹 컨트롤 을 제공 하여 직접 사용 할 수 있 지만 3.x 에 서 는 제공 되 지 않 은 것 같 습 니 다.제 가 사용 하 는 Asp.net Mvc 때문에 있 는 지 없 는 지 는 저 에 게 아무런 문제 가 없습니다.위의 한 마디 를 언급 한 것 은 기본 asp.net 은 html 태그 가 있 는 텍스트 를 업로드 하 는 것 을 금지 하기 때 문 입 니 다.물론 페이지 설정 을 수정 하여 이 루어 질 수 있 지만 fckeditor(Ver 2.0)에서 데 이 터 를 제출 하기 전에 내용 을 HTMLEncode(&<>를 각각& 로 바 꾸 었 습 니 다.lt;>），asp.net 의 기본 설정 을 수정 할 필요 가 없 는 아주 좋 은 방법 입 니 다.그러나 CKeditor 에서 기본 적 으로 제출 하 는 것 은 원본 데 이 터 를 직접 post 하 는 것 입 니 다.나중에 이전 버 전의 코드 를 통 해 CKeditor 가 HTML 인 코딩 을 할 수 있 는 방법 을 제공 한 것 을 발 견 했 습 니 다.이것 은 바로 CKEDITOR.tools.htmlEncode(string)입 니 다.form 표 로 submit 를 작성 하면 실현 할 수 없 기 때문에 자바 스 크 립 트 로 제출 할 수 밖 에 없습니다.제 선택 은 jQuery 의 ajax 방식 으로 제출 하 는 것 입 니 다.코드 는 다음 과 같 습 니 다.

 
$(function(){ 
$("#btSubmit").click(function(){//$("#btSubmit")        ，         click   
var oEditor = CKEDITOR.instances.Text;//        
var text = oEditor.getData();//         
text = CKEDITOR.tools.htmlEncode(text);//  HTMLEncode   
$.post("PostUrl",{Text:text},callback);//    ，               jQuery    
function callback(data){}//     
}); 
}) 

서버 에 제출 하여 역방향 인 코딩 을 하면 됩 니 다.보안 은 위의 제출 을 통 해 좋 지만 시스템 의 기본 보안 방 어 를 피해 악성 코드 가 제출 되 기 쉬 우 므 로 서버 에서 안전 한 검증 이 필요 하 다.CKeditor 는 검 증 된 설정 방법 을 제 공 했 지만 저 는 테스트 에 성공 하지 못 했 습 니 다(Ver 2 시대 에 성공 하지 못 했 습 니 다).그 가 어떻게 작 동 했 는 지 모 르 겠 습 니 다.시간 이 있 으 면 잘 연구 해 보 겠 습 니 다.코드 는 다음 과 같 습 니 다.

 
// /ckeditor/config.js   CKEDITOR.editorConfig        
config.protectedSource.push( /<\s*iframe[\s\S]*?>/gi ) ; // <iframe> tags. 
config.protectedSource.push( /<\s*frameset[\s\S]*?>/gi ) ; // <frameset> tags. 
config.protectedSource.push( /<\s*frame[\s\S]*?>/gi ) ; // <frame> tags. 
config.protectedSource.push( /<\s*script[\s\S]*?\/script\s*>/gi ) ; // <SCRIPT> tags. 
config.protectedSource.push( /<%[\s\S]*?%>/g ) ; // ASP style server side code 
config.protectedSource.push( /<\?[\s\S]*?\?>/g ) ; // PHP style server side code 
config.protectedSource.push( /(<asp:[^\>]+>[\s|\S]*?<\/asp:[^\>]+>)|(<asp:[^\>]+\/>)/gi ) ; 

서버 측의 검증 항목 은 위 에서 언급 한 것 과 마찬가지 로 모두 태그 이름 에 따라 제출 을 허용 하 는 지 여 부 를 판단 합 니 다.파일 을 새 버 전에 업로드 하 는 방식 이 크게 바 뀌 었 다.이것 은 CKfinder 라 는 플러그 인 을 사용 하여 이 루어 집 니 다.먼저 CKfinder 를 다운로드 하여 사이트/KKfinder/아래 경 로 를 수정 할 수 있 습 니 다.수정 후 호출 코드,/KKfinder/config.ascx 파일,/KKfinder/ckfinder.js 파일/KKfinder/config.ascx 파일 은 BaseUrl="/새 폴 더 이름/userfiles/"를 수정 해 야 합 니 다.CKfinder/ckfinder.js 파일 을 수정 하려 면 CKFinder.DEPAULTBASEPATH='/새 폴 더 이름/';호출 방식:

 
<textarea cols="80" id="Text" name="Text" rows="10"></textarea> 
<script type="text/javascript"> 
var editor = CKEDITOR.replace( 'Text'); 
CKFinder.SetupCKEditor(editor, '/     （   ）/'); 
</script> 

현재 편집기 의 그림,링크,플래시 를 열 고 있 습 니 다.창 에 업로드 옵션 이 하나 더 있 습 니 다.업 로드 를 선택 할 수 있 고 탐색 기능 도 제공 합 니 다.폴 더 에 대한 접근 권한 과 관련 되 어 있 기 때문에 기능 이 제 사이트 의 요구 와 맞지 않 기 때문에 저 는 기본 업로드 로 그 를 수정 하지 않 았 습 니 다.업로드 방식 의 수정 나의 사진 서버 는 image.tiyu.cc 이 고 사이트 의 서버 는https://www.jb51.net/이 며,그것 이 제공 하 는 조회 기능 도 필요 하지 않 으 며,사진 업로드 외 에 다른 파일 을 업로드 할 수 없습니다.이렇게 하려 면 세 가지 수정 이 필요 합 니 다.1.기본 업 로드 를 수정 합 니 다.2.탐색 기능 을 취소 합 니 다.3.파일,플래시 업로드 기능 을 취소 합 니 다.CKeditor 의 업로드 경 로 는/KKfinder/ckfinder.js 에 설정 되 어 있 습 니 다.하나의 설정 은 CKFinder.SetupCKEditor 입 니 다.아래 코드 는 그림,파일,플래시 의 탐색 경로 와 업로드 경 로 를 설정 할 수 있 습 니 다.

 
//          
editorObj.config.filebrowserBrowseUrl = url ; 
//          
editorObj.config.filebrowserImageBrowseUrl = url + qs + 'type=' + ( imageType || 'Images' ) ; 
//  flash       
editorObj.config.filebrowserFlashBrowseUrl = url + qs + 'type=' + ( flashType || 'Flash' ) ; 
//           
editorObj.config.filebrowserUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector." 
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=Files" ; 
//           
editorObj.config.filebrowserImageUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector." 
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=" + ( imageType || 'Images' ) ; 
//  flash       
editorObj.config.filebrowserFlashUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector." 
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=" + ( flashType || 'Flash' ) ; 

CKeditor 는 업로드 경로 의 유 무 에 따라 해당 하 는 업로드 탭 을 표시 할 지 여 부 를 제어 하고 탐색 버튼 도 마찬가지 입 니 다.위의 요구 에 따라 다음 과 같이 설정 합 니 다.

 
//          
editorObj.config.filebrowserBrowseUrl = ""; 
//          
editorObj.config.filebrowserImageBrowseUrl = ""; 
//  flash       
editorObj.config.filebrowserFlashBrowseUrl = ""; 
//           
editorObj.config.filebrowserUploadUrl = ""; 
//           
editorObj.config.filebrowserImageUploadUrl = "   "; 
//  flash       
editorObj.config.filebrowserFlashUploadUrl = ""; 

편집기 의 해당 창 을 다시 열 면 그림 업로드 단 추 를 제외 한 다른 탐색 업로드 가 모두 숨겨 져 있 습 니 다.새로운 업로드 파일 을 만 드 는 구체 적 인 절 차 는 먼저 새로운 업로드 수신 파일 을 만 들 고 업로드 한 파일 을 받 아들 이 고 저장 한 다음 파일 의 경 로 를 편집기 에 피드백 하 는 것 입 니 다.편집기 의 수신 은 하나의 방법 으로 이 루어 집 니 다.구체 적 으로 다음 과 같 습 니 다.CKEDITOR.tools.callFunction(fnID,'FileUrl','Message');그 중에서 fnID 는 호출 된 실제 방법의 번호 이 고 브 라 우 저,CKeditor 는 서로 다른 방법 을 호출 합 니 다.우 리 는 위의 방법 만 호출 하면 됩 니 다.구체 적 으로 업로드 에 성공 한 후에 페이지 에 코드window.parent.CKEDITOR.tools.callFunction(fnID,'https://www.jb51.net/image.jpg','업로드 성공');FileUrl,Message,하나만 있 을 수도 있 고 동시에 존재 할 수도 있 습 니 다.Message 는 업로드 에 실 패 했 을 때의 알림 정보 에 주로 사 용 됩 니 다.fnID 에 대한 구체 적 인 설명 은 잘 모 르 겠 지만 코드 를 통 해 FF 브 라 우 저의 값 은 2 이 고 다른 브 라 우 저 는 1 이라는 것 을 알 수 있 습 니 다.이 를 통 해 CKeditor 에 어떤 방법 으로 업로드 피드백 정 보 를 받 아들 이 는 지 알 수 있 습 니 다.이 값 은 우리 자신의 프로그램 을 통 해 얻 을 수 있다.그러나 더 좋 은 방법 은 CKeditor 가 제공 하 는 값 입 니 다.editor Obj.config.filebrowser ImageUploadUrl="새 주소"를 설정 하면 CKeditor 는 자동 으로 몇 개의 url 인 자 를 추가 합 니 다.새 주소?CKEditor=Text&CKEditor FuncNum=2&lang Code=zh-cn 그 중에서 CKEditor FuncNum 은 우리 가 필요 로 하 는 fnID 입 니 다.우 리 는 직접 얻 은 다음 에 피드백 을 하면 됩 니 다.크로스 도 메 인 업 로드 를 선택 하면 현재 도 메 인(https://www.jb51.net/)GetFile.aspx 를 설정 합 니 다.그 는 fnID,FileUrl,Message 세 개의 값 을 받 아들 이 는 세 개의 인 자 를 가지 고 있 습 니 다.우리 의 editor Obj.config.filebrowser Image UploadUrl 에서 설정 합 니 다.http://Image.jb51.net/upfile.aspx?backUrl=https://www.jb51.net/GetFile.aspx...하면 돼 요...image.jb51.net 도 메 인 upfile.aspx 에서 파일 을 받 아들 이 고 처리 한 후에:

 
ImageUrl="http://image.jb51.net/UpFile/2009/11/1/2009111201346_695.jpg" 
Message="      ，  ，        " 
CKEditorFuncNum=request("CKEditorFuncNum") 
response.Redirect("https://www.jb51.net/GetFile.php?ImageUrl="+ ImageUrl + "&Message=" + Message + "&CKEditorFuncNum=" + CKEditorFuncNum) 

끝내 고 일 을 마치 고 잠 을 자고 좋 은 꿈 을 꾸 세 요.