CKEditor와 CKFinder의 최신 버전은 공식 웹사이트(http://cksource.com)에서 다운로드할 수 있습니다.
위 두 리소스를 웹사이트의 루트 디렉터리에 넣으세요: /CKEditor(버전 3.6.2에서는 _Samples\ckeditor 폴더를 압축된 폴더에 넣어야 함)과 /CKFinder(대소문자 구분 없음, 폴더를 바로 여기에 넣을 수 있음). )
참고로, 여기서는 때때로 생성에 오류가 발생하기도 합니다. 예를 들어, AssemblyTitle 유형 태그가 중복되어 있는데, 이는 웹사이트에 다운로드된 파일을 삭제할 수 있는 여러 AssemblyInfo.cs이 있기 때문입니다. 아니면 _source 폴더를 삭제하세요. 여기서 궁금한 점이 있으시면 저에게 연락해 주세요: 제 QQ: 515072775
페이지에서 CKEditor를 사용하기:
<textarea cols="80" id="prcontent" name="content" rows="50"> 안녕하세요, 사용이 성공했습니다! </textarea>
<scrip remove ttype="text/javascrip remove t" >
CKEDITOR.replace('content', { height:200, width: 520 });
. .</scrip去掉t> .
CKEditor에는 업로드 기능이 없으니 CKFinder로 업로드해야 합니다
1단계: 웹사이트가 CKFinder의 dll (디렉토리: /CKFinder/bin/Release/CKFinder.dll)을 참조해야 합니다.
2단계: CKEDITOR.editorConfig 함수에서 CKEditor의 config.js(디렉터리: /CKEditor/config.js)를 설정하면 불필요한 함수를 제거할 수 있습니다
CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; "~/ckfinder/..." 또는 "/ckfinder/..."라고 쓰지 마세요.
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? Type=Images';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html? Type=Flash';
config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
config.filebrowserWindowWidth = '800'; 브라우즈 서버 팝업의 크기 설정
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '.. /ckfinder/'); ckfinder의 경로는 실제 배치와 일치한다는 점에 유의하세요
CKFinder의 구성:
사용자 제어 config.ascx에서 "ckfinder\"를 열고 BaseUrl 경로를 변경하세요:
BaseUrl = "~/ckfinder/userfiles/"; 또는 BaseUrl = "ckfinder/userfiles/";
추가 팁: IIS에서 테스트하는 것이 유용합니다. 그렇지 않으면 업로드가 실패하면 설정에 문제가 있다고 생각할 수 있습니다.
CKEditor는 설정 완료 후 업로드 기능이 있지만, 이미지 파일이 원래 이미지 이름이고 임의의 파일 이름으로 바꾸고 싶다면 어떻게 해야 하나요? 그다음 세 번째 단계를 보세요.
3단계: CKFinder의 소스 코드를 수정합니다. CKFinder는 자체 소스 코드인 디렉터리를 제공합니다: /CKFinde/_source
VS에서 CKFinde/_source/CKFinder.Net.sln로 현재 프로젝트를 새로 생성하세요. 여기서 다운로드한 솔루션 파일이 VS2008에서 열리지 않을 수 있습니다. 새 프로젝트를 추가하거나 최신 버전의 VS를 사용해 열어도 됩니다.
1) /Settings/ConfigFile.cs 파일을 엽니다
27개의 행을 찾고 속성 추가: public bool RandomReName; 무작위로 이름 변경
67개의 행을 찾아서 방금 속성에 값을 할당합니다: RandomReName = true; 기본값은 참입니다
닫힌 파일을 저장하세요
2) /Connector/Config.cs 파일을 엽니다
62개의 행을 찾아서 속성을 추가하세요:
public bool RandomReName
{
get { returnSettings.ConfigFile.Current.RandomReName; }
}
닫힌 파일을 저장하세요
3) /Connector/CommandHandlers/FileUploadCommandHandler.cs 파일을 엽니다
64행을 찾아 판결 코드를 추가하세요:
if ( Config.Current.RandomReName) // 임의 이름을 사용하세요
sFileName =DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." +sExtension;
닫힌 파일을 저장하세요
4) 프로젝트를 재생성하고, /ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll 덮어쓰거나 이전에 추가된 웹사이트 프로젝트의 참조를 제거하고 CKFinder.Net 프로젝트에서 dll을 다시 제거한다
마지막 단계: /ckfinder/config.ascx 열어
40줄을 찾아 속성을 추가하세요: (사실 기본값이 설정되어 있었지만 원래 이름을 사용할 때는 false로 설정해야 하므로 추가하거나 하지 않을 수도 있습니다)
//上传完毕后使用随机文件名
RandomReName = true;
저장 종료
이제 설정이 성공했으니 CKEditor에 업로드 기능이 있을 수 있습니다. 다른 기능들의 설정은 시간이 있을 때 계속 연구할 거예요~
한 가지 더 상기시키자면: CKEditor와 CKFinder 폴더에는 불필요한 요소들이 많아요. 예를 들어 밑줄이 붙은 이름 같은 것들, .net 프로젝트는 php, asp가 필요 없어요.
파일 업로드에 오류가 있을 경우: 보안상의 이유로 파일을 볼 수 없습니다. 시스템 관리자에게 연락하시고 CKFinder 프로필을 확인해 주세요.
config.ascx 파일을 수정해야 합니다
공개 오버라이드 Bool CheckAuthentication()
{
거짓 되돌리기;
}
수정:
공개 오버라이드 Bool CheckAuthentication()
{
형태 검증
returnRequest.IsAuthenticated;
}
3. 페이지에 CKEditor 제어 적용 [두 가지 방법, a와 b]
[A: 압축 패키지의 INSTALL.html 인용]
CKEditor를 ASP.NET 페이지에 통합하고 싶다면, 아래에 제시된 단계를 따라 하세요.
1. 공식 CKEditor 다운로드 사이트에 접속하여 CKEditor 3.x와 ASP.NET 제어용 CKEditor의 최신 버전을 모두 다운로드하세요.
2. 두 설치 패키지를 원하는 위치로 압축 해제하기. n을 제거.
3. 웹사이트에 ASP.NET 제어용 CKEditor 참조를 추가하세요.
Visual Studio에서 Add Reference 명령을 사용하고, 압축 해제된 CKEditor for ASP.NET 설치 패키지에서 bin\Release\CKEditor.NET.dll 파일로 탐색하세요. 또한 DLL 파일을 애플리케이션의 bin 폴더에 수동으로 복사할 수도 있습니다.
4. CKEditor 3.x 설치 패키지에서 압축 해제된 편집기 파일을 복사하여 웹사이트의 애플리케이션 디렉터리에 붙여넣으세요.
5. 귀하의 페이지에서 ASP.NET 컨트롤을 위한 CKEditor를 등록하세요:
<%@ Register assembly="CKEditor.NET" 네임스페이스="CKEditor.NET" 태그프리픽스="CKEditor" %>
6. 페이지 본문에 CKEditor 인스턴스를 삽입합니다:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
[b]
1. <head>해당 js 참조를 페이지에 추가:
<scrip remove t type="text/javascrip remove t" language="javascrip remove t" src="ckfinder/ckfinder.js"></scrip去掉t>
<scrip remove t type="text/javascrip remove t" language="javascrip remove t" src="ckeditor/ckeditor.js"></scrip去掉t>
2. 그 다음, <body>컨트롤을 배치해야 하는 위치에 다음 코드를 추가하면 다음과 같은 사용 방법이 있습니다:
(1) 지정된 클래스 속성을 컨트롤에 추가합니다
<textarea id="textarea1" name="editor1" class="ckeditor">안녕하세요!</textarea>
서버 제어:
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
(2) js 코드를 주입 - 여기서 js 코드는 컨트롤 뒤에 또는 그 안에 작성하는 것이 가장 좋습니다 <head>
<textarea id="textarea1" name="editor1">안녕하세요!</textarea>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('editor1', { height:400, width:800 });
. .</scrip去掉t> .
서버 제어:
<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('<%=mckeditor. ClientID %>');
. .</scrip去掉t> .
=============================================================================================================
두 번째 참고문헌:
asp.net ckeditor 3.0.1과 ckfinder_aspnet_1.4.1.1의 구성 방법
http://ckeditor.com.cn/docs/ 의 안내에 따르면 CKEditor는 웹페이지에서 설정되어 있고, 브라우저에서 보면 인터페이스가 정말 아름답다고 느꼈지만, 이미지 업로드 기능을 시도해보고 싶었을 때 이미지 업로드 버튼을 못했습니다.
온라인 검색을 계속해보니 "CKEditor 자체에는 업로드 기능이 없으며, 업로드 기능을 구현하려면 CKFinder와 통합되어야 한다"는 결론이 나왔습니다.
그 다음 Asp.net 용 CKFinder 1.4.1.1을 다운로드하고 압축을 풀고, ckfinder 폴더를 프로젝트의 루트 디렉터리에 넣으세요. 인터넷상의 많은 출처에서 CKEditor와 CKFinder를 같은 레벨 디렉터리에 두는 것이 가장 좋다고 하니까요. 이렇게 해서 우리 프로젝트에 이유 없이 두 개의 폴더가 더 생기게 됩니다. 저도 코드의 청결에 집착하는 것 같아요, 아마도요,
작가에 대한 존경의 표시로 폴더를 남겨두면 충분할 거예요. 두 마리를 키우면 매우 불편할 것 같아요.
CKFinder를 CKEditor에 통합하기 전에 CKFinder를 약간 설정해야 합니다. 똑똑한 친구라면 파일 업로드용 플러그인이기 때문에 설정해야 할 대부분의 것이 업로드 경로라고 쉽게 생각할 거예요.
CKFinder의 기본 업로드 경로는 자체 디렉터리의 userfiles 폴더이지만, 저는 CKEditor 폴더에 CKFinder를 넣었습니다. 이미지를 userfiles에 저장하면 시스템이 파일이나 이미지를 찾기 위해 3층 폴더를 우회해야 하므로, 프로젝트의 루트 디렉터리에 있는 upFile 폴더에 이미지를 업로드할 계획입니다.
이 기능을 구현하려면 CKFinder의 config.ascx 파일을 수정하여 BaseUrl = "/ckfinder/userfiles/"를 BaseUrl = "~/upFile/"로 변경해야 합니다. 그 다음, CKFinder/bin 폴더에서 CKFinder.dll 파일을 시스템 프로젝트의 bin 폴더로 잘라내세요. 또는 참고 문헌을 추가해 프로젝트에 CKFinder.dll 도입할 수도 있습니다.
다음으로, 파일 업로드와 함께 CKEditor를 사용할 수 있습니다:
CKFinder 폴더를 CKEditor 폴더에 넣고, 페이지 내에서 두 개의 js 파일을 가져오세요:
<scrip remove tsrc="http://www.cnblogs.com/ckeditor/ckeditor.js" type="text/javascrip remove t"></scrip去掉t>
<scrip remove t src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js" type="text/javascrip remove t"></scrip去掉t>
에디터를 컨트롤에 참조하는 방법은 두 가지가 있습니다:
하나는 클라이언트 제어 텍스트 영역을 사용하는 것입니다:
<textarea rows="20" cols="40" name="txtContent" id="txtContent"></textarea>
<scrip remove t type="text/javascrip remove t" >
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor(편집자, 'http://www.cnblogs.com/ckeditor/ckfinder/');
. .</scrip去掉t> .
두 번째는 서버 측 제어 텍스트박스를 사용하는 것입니다:
<asp:TextBox id="txtContent" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor(편집자, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</scrip去掉t>개인적으로는 asp.net 프로그램이니 서버 쪽 제어를 사용하는 게 낫다고 생각합니다. 클라이언트 제어보다 약간 느리게 실행되지만, 개발 속도는 조금 더 빠릅니다. 그리고 프로그래머로서 우리는 항상 마음에 드는 것을 선택하기 전에 모든 가능성을 시도해보고 싶어 합니다.
사실, Text='<%# Bind("info") %>' 없이 컨트롤에 값을 할당할 수도 있고, 백코드 내에서 직접 사용할 수도 있습니다
this.txtContent.Text="초기 값"
그럴 수도 있죠. 다음 코드를 직접 사용하여 값을 얻을 수도 있습니다:
CKFinder와 CKEditor 코드. 에디터로 직접 실행하면 컴파일러가 다음과 같은 오류를 뜹니다:
문자열 콘텐츠=this.txt콘텐츠.텍스트
참고: TextMode="MultiLine" 속성이 필수이며, 그렇지 않으면 값이 null이 됩니다.
프로그램 디버깅 전에 간소화하지 않았습니다
타입 또는 네임스페이스 이름 "ControlDesigner"는 네임스페이스 "System.Web.UI.Design"에 존재하지 않습니다(어셈블리 참조가 누락된 건가요?)
실수는 ckeditor\ckfinder\_source\FileBrowserDesigner.cs 19번째 라인에 있으니, 파일을 간단히 단순화하세요:
첫 번째 단계는 ckeditor를 간소화하는 것입니다: _samples와 _source 폴더를 삭제하고, 랭 디렉토리에는 세 개의 언어 파일만 저장할 수 있습니다: en.js, zh.js, zh-cn.js;
두 번째 단계는 ckfinder를 간소화하는 것입니다: _samples와 _source 폴더를 삭제하고, en.js, zh.js, zh-cn.js 언어 파일만 lang 디렉터리에 남깁니다.
여기 두 번째 줄의 js 코드를 주목하세요: CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/'); 여기서 "http://www.cnblogs.com/ckeditor/ckfinder/"는 ckfinder가 현재 페이지로 가는 상대적 경로입니다.
코드를 직접 복사해 붙여넣기 하지 마세요. 그렇지 않으면 이미지 업로드 시 다음과 같은 오류가 발생할 수 있습니다:
설명: HTTP 404. 찾고 계신 리소스(또는 그 의존성 중 하나)가 삭제되었거나, 이름이 변경되었거나, 일시적으로 사용할 수 없게 되었을 수 있습니다. 아래 URL을 확인하시고 철자가 정확한지 확인해 주세요.
요청 URL: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
그래서 저처럼 ckfinder를 ckeditor 폴더에 넣고 싶지 않아도 괜찮습니다. 여기서 경로 변경을 올바르게 채우기만 하면 됩니다.
이게 전부 작업으로 간주될 줄 알았는데, 이미지를 업로드하니 다음 프롬프트가 떴어요:
보안상의 이유로 해당 파일은 볼 수 없습니다. 시스템 관리자에게 연락하시고 CKFinder 프로필을 확인해 주세요.
속담처럼 좋은 음식은 먹기 어렵다는 말이 없습니다. 최고의 선생님, 바이두에게 부탁할 수밖에 없어요. 위 안내 정보를 바이두 검색창에 복사해 보면, 차에 들어가 보니 PHP 통합 ckeditor에 관한 글을 찾았습니다. 방법은 다음과 같습니다:
CKFinder 아래의 config.ascx 파일을 수정하여 공개 오버라이드 CheckAuthentication() 함수의 반환값을 return false에서 return true로 변경하세요.
다시 테스트했더니 이미지가 성공적으로 업로드되었습니다! |
게시됨 2015. 4. 18. 오후 7:11:55
|
|
|
