|
|
게시됨 2015. 4. 17. 오후 4:20:20
|
|
|
이틀 후, Ckeditor와 Ckfinder는 마침내 이미지 업로드 기능을 통합했습니다.
여기서는 제 경험을 쓰고자 합니다.
뉴스 편집 모듈을 구현하기 위해 형이 Ckeditor를 소개해 주었습니다.
먼저, http://ckeditor.com/ 에서 Ckeditor의 .net 버전을 다운로드하세요. 저는 여기서 ckeditor_aspnet_3.6.4를 사용 중입니다.
다운로드 후 압축을 풀어 열어보세요. 하지만 여기 있는 모든 게 유용한 건 아니니까, 네가 넣어도 돼
여기서 샘플은 예시이고, 소스는 소스 파일
, 직접 삭제됨
, 목적은 편집기의 볼륨을 줄이는 것입니다. 그 다음 전체 폴더를 웹사이트의 루트 디렉터리로 직접 복사하세요. 인용문
ckeditro.net.dll
에디터 컨트롤을 사용해야 하는 페이지 헤더에서:
<scrip remove t src="/ckeditor/ckeditor.js" type="text/javascrip remove t" ></scrip去掉t>
<scrip remove t type="text/javascrip remove t" >
window.onload = 함수 () {
CKEDITOR.replace("txtContent");
}
. .</scrip去掉t> .
본문
：
<CKEditor:CKEditorControl ID="CKEditor1" BasePath="~/ckeditor/" runat="server">
</CKEditor:CKEditorControl>
배경 코드도 간단합니다:
기사. 기사 내용 = CKEditor1.텍스트; 이 과정에서 편집된 콘텐츠는 문서 모델 클래스의 ARTICLECONTENT 필드에 할당됩니다.
이로써 제 에디터가 성공적으로 완성되었습니다!
하지만 또 큰 문제가 발생했는데, Ckeditor가 이미지를 업로드할 수 없다는 점입니다. 정말 골치 아픈 문제입니다. 어떻게 해야 할까요? 바이두로 가.
온라인에 접속하자마자 해결 방법이 여러 가지가 있다는 걸 알게 됐어요. 어떤 사람들은 이미지를 에디터 외부에 업로드하는 기능을 만들고, 그 이미지를 서버에 전달할 때 그의 서버 링크 경로를 현재 커서에 전달한 뒤, 이를 구현하고 실행해보니 외부 업로드 이미지를 클릭하면 커서가 에디터에 전혀 없어지는 걸 알게 되는데, 어떻게 해야 할까요??? 생각해 보세요, 안타깝게도 지금의 지식으로는 할 수 없고, 포기할 수밖에 없습니다. (신이 아시면 메시지를 남겨주세요, 감사합니다); 어떤 사람들은 이 기능을 구현하기 위해 직접 JS를 작성한 뒤, 편집기에 입력해 완성하라고 하며, 이런 글들이 많이 있습니다:
1, http://www.cnblogs.com/lts8989/archive/2011/08/04/2127326.html
2, http://www.cnblogs.com/striiiiing/archive/2012/08/15/2640792.html
이 두 글은 꽤 괜찮다고 생각하지만, 제 JS 지식이 부족해서 작성해보려 했지만 여전히 성공적으로 구현하지 못했습니다.
그런데 Ckeditor는 Ckfinder와 통합하는 데만 가능한데, Ckfinder는 유료 상태라 쓰고 싶지 않았어요. 그게 좋지 않네요!! 그런데 왜 그래요, 공식 웹사이트 아래에 있지 않아서 다행이에요. 인터넷에서 바로 자료를 찾아봤는데, 드디어 아주 상세한 자료를 제공하는 곳을 찾았어요(여기서 형제들에게 감사 인사를 전하고 싶어요!!). 웹사이트: http://download.csdn.net/download/q8347901/3887066 (여기에서 Ckeditor와 Ckfinder에 대한 자세한 소개 기사도 있습니다, 매우 좋습니다!) ）
Ckfinder를 다운로드한 후 /bin 디렉터리에서 ckfinder.dll 파일을 사이트 bin 디렉터리로 복사하고, ckfinder 디렉터리를 사이트의 루트 디렉터리로 복사한 뒤(다른 경로를 선택할 수 있음), ckfinder.dll 참조하세요
이렇게 구성하세요:
만약 당신이 ckeditor를 하고 싶은 .aspx 페이지에 있다면, 다음과 같습니다:
CKEDITOR.replace('편집을 활성화하고자 하는 텍스트 박스',
{
filebrowserBrowseUrl:'/ckfinder/ckfinder.html',//启用浏览功能
filebrowserImageBrowseUrl:'/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl:'/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl:'/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
filebrowserImageUploadUrl:'/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl:'/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'
}
);
물론, 전역 구성 방법을 사용하세요
Ckeditor 플러그인 config.js에서 구성
config.filebrowserBrowseUrl="/ckfinder/ckfinder.html";
config.filebrowserImageBrowseUrl="/ckfinder/ckfinder.html? Type=Images";
config.filebrowserFlashBrowseUrl="/ckfinder/ckfinder.html? 타입=플래시";
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";
설정 후 ckfinder에서 config.ascx를 수정하세요
CheckAuthentication()에서 Return true, 그렇지 않으면 업로드되지 않고 검증이 필요합니다
SetConfig()에서 BaseUrl로 가는 경로는 업로드 경로입니다
또한 주의를 기울인 후에는 ckfinder에서 bll 파일을 참조하는 것도 잊지 마세요
자, 통합과 이미지 업로드는 성공적으로 완료되었습니다.
또는 이미지 패널에서 하이퍼링크와 고급 탭을 숨기고 싶다면, CKEditor의 플러그인/이미지/대화 image.js에서 할 수 있습니다
"id:'Link'와 "id:'advanced'에서 "Link"와 "advanced"를 검색하고 "hidden:true"를 추가하세요.
웹사이트의 외관을 개선하고 최적화하고 싶다면, 다음 글들을 참고해 보세요.
1, http://www.cnblogs.com/netec/archive/2009/11/02/ckeditor_ckfinder.html
2, http://blog.csdn.net/lulu_jiang/article/details/5532345
3, http://blog.csdn.net/hzq1074/article/details/5893475 |
이전의:asp.net 텍스트 편집기(FCKeditor)다음:SQL Server는 데이터베이스, 테이블, 컬럼, 뷰가 있는지 여부를 결정합니다
|
