웹페이지 편집기 ckeditor 및 ckfinder 구성 단계 공유_기본 지식

1. 사용 방법:
1. ckeditor.js를 페이지
4. 구성 편집기는 다음과 같습니다. 기본값) )
ckeditor의 구성은 ckeditor/config.js 파일에 집중되어 있습니다. 다음은 일반적으로 사용되는 구성 매개변수입니다.
// 인터페이스 언어, 기본값은 'en'입니다.
config.언어 = 'zh-cn';// 너비 및 높이 설정
config.width = 400;
config.height = 400;// 세 가지 편집기 스타일이 있습니다(기본값) ), 'office2003' , 'v2'
config.skin = 'v2';
// 배경색
config.uiColor = '#FFF'
// 툴바(기본'기본' , 다재다능한 'Full', 맞춤)plugins/toolbar/plugin.js
config.toolbar = 'Basic';
config.toolbar = 'Full'
다음과 일치합니다.
config .toolbar_Full = [
['소스','-','저장','새 페이지','미리 보기','-','템플릿'],
['잘라내기','복사',' Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace ','-' ,'SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton' , 'HiddenField'] ,
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
[ 'NumberedList',' BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
[ '링크',' 연결 해제','앵커'],
['이미지','Flash','테이블','HorizontalRule','Smiley','SpecialChar','PageBreak'],
' /',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor']
]//툴바를 사용할 수 있는지 여부 축소
config.toolbarCanCollapse = true;
//툴바 위치
config.toolbarLocation = 'top';//옵션: 하단
//툴바 기본 확장 여부
config.toolbarStartupExpanded = true ;
//"드래그하여 크기 변경" 기능 취소 플러그인/resize/plugin.js
config.resize_enabled = false
//크기의 최대 높이 변경
config.resize_maxHeight = 3000;
//크기의 최대 너비 변경
config.resize_maxWidth = 3000
//크기의 최소 높이 변경
config.resize_minHeight = 250 ;
//크기의 최소 너비 변경
config.resize_minWidth = 750;
// 이 편집기가 포함된 양식을 제출할 때 요소의 데이터를 자동으로 업데이트할지 여부
config.autoUpdateElement = true;
// 절대 디렉터리 또는 상대 디렉터리를 사용할지 설정합니다. 비어 있으면 상대 디렉터리를 의미합니다.
config.baseHref = ''
// 편집기의 z-index 값
config.baseFloatZIndex = 10000;
//바로가기 키 설정
config .keystroks = [
[ CKEDITOR.ALT 121 , 'toolbarFocus' ], //포커스 가져오기
[ CKEDITOR.ALT 122 , 'elementsPathFocus' ], // 요소 포커스
[ CKEDITOR.SHIFT 121 , ' contextMenu' ], //텍스트 메뉴
[ CKEDITOR.CTRL 90 , 'undo' ], //Undo
[ CKEDITOR.CTRL 89 , 'redo' ] , //다시 실행
[ CKEDITOR.CTRL CKEDITOR.SHIFT 90 , '다시 실행' ], //
[ CKEDITOR.CTRL 76 , 'link' ], //링크
[ CKEDITOR.CTRL 66 , ' 굵은 글씨' ], //굵게
[ CKEDITOR.CTRL 73 , '기울임꼴' ], //기울임꼴
[ CKEDITOR.CTRL 85 , '밑줄' ], //밑줄
[ CKEDITOR.ALT 109 , 'toolbarCollapse' ]
]
//설정된 바로가기 키는 브라우저 바로가기 키인plugins/keystroks/plugin.js와 충돌할 수 있습니다.
config.blockedKeystroks = [
CKEDITOR.CTRL 66 ,
CKEDITOR .CTRL 73 ,
CKEDITOR.CTRL 85
]
//plugins/colorbutton/plugin.js 편집에서 요소의 배경색 값을 설정합니다.
config.colorButton_backStyle = {
element : 'span',
styles : { 'ground-color' : '#(color)' }
}
//전경색 값 설정plugins/colorbutton/plugin.js
config.colorButton_colors = '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DAA520,
006400,40E0D0,0000CD,800080,80808 0,F00,FF8C00,FFD700,008000,0FF , 00F,EE82EE,
A9A9A9,FFA07A ,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,FFF0F5,
FAEBD7,FFFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF'
// 색상 선택 시 "다른 색상" 옵션 표시 여부 플러그인/colorbutton/plugin.js
config.colorButton_enableMore = false
//블록 전경색의 기본값 설정plugins/colorbutton/plugin.js
config.colorButton_foreStyle = {
element : 'span',
styles : { 'color' : '#(color)' }
}//필요한 CSS 파일을 추가합니다. 여기에 웹사이트의 상대 경로와 절대 경로를 사용할 수 있습니다.
config.contentsCss = './contents.css'
//텍스트 방향
config.contentsLangDirection = 'rtl'; 왼쪽에서 오른쪽으로
//CKeditor 구성 파일을 구성하지 않으려면 공백으로 두세요.
CKEDITOR.replace( 'myfiled', { customConfig : './config.js' }; 'white' //기본값
//배경의 불투명도 값은 0.0~1.0 사이여야 합니다.plugins/dialog/plugin.js
config.dialog_BackgroundCoverOpacity = 0.5
//이동 또는 변경 시 테두리 요소 흡착 거리 단위: pixelplugins/dialog/plugin.js
config.dialog_magnetDistance = 20;
//로컬 맞춤법 검사 및 프롬프트를 거부할지 여부는 현재 Firefox 및 Safari에서만 지원됩니다./ wysiwygarea/plugin.js
config.disableNativeSpellChecker = true
//행이나 열 추가와 같은 테이블 편집 기능은 현재 firefox 플러그인/wysiwygarea/plugin.js에서만 지원됩니다.
config.disableNativeTableHandles = true; //기본값은 활성화되어 있지 않습니다.
//이미지 및 테이블의 크기 조정 기능을 활성화할지 여부 config.disableObjectResizing = true
config.disableObjectResizing = false //기본값은 활성화입니다.
// HTML 문서 유형
config.docType = '"http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"' ;
//편집 영역을 렌더링할지 여부plugins/editingblock/plugin.js
config.editingBlock = true;
//캐리지 리턴에 의해 생성된 레이블 편집기
config.enterMode = CKEDITOR.ENTER_P ; //선택 사항: CKEDITOR.ENTER_BR 또는 CKEDITOR.ENTER_DIV
//출력에 HTML 엔터티를 사용할지 여부 플러그인/엔터티/plugin.js
config.entities = true;
//추가 엔터티 정의plugins/entities/plugin.js
config.entities_additional = '#39'; //여기서 #은 &
을 대체합니다//표시하기 어려운 일부 문자를 변환할지 여부 해당 HTML 문자로 플러그인/entities/plugin.js
config.entities_greek = true
//일부 라틴 문자를 HTML로 변환할지 여부 플러그인/entities/plugin.js
config.entities_latin
//일부 특수 문자를 ASCII 문자로 변환할지 여부 예를 들어 "This is Chinese: 汉语."는 "This is Chinese: 中文."으로 변환됩니다.
plugins/entities/plugin.js
config. 엔터티_processNumerical = false;
//새 구성 요소 추가
config .extraPlugins = 'myplugin'; //기본값이 아닌 예시만
//검색 플러그인/find/plugin.js 사용 시 색상 강조 표시
config.find_highlight = {
요소 : 'span',
styles : { '배경색' : '#ff0', 'color' : '#00f' }
}// 기본 글꼴 이름plugins/font/plugin.js
config.font_defaultLabel = 'Arial';
//글꼴 편집 시 문자 집합에 자주 사용되는 한자 추가 가능: Song, Kai, Hei 등 플러그인 /font/plugin.js
config.font_names = 'Arial;Times New Roman ;Verdana'
//텍스트 기본 스타일 플러그인/font/plugin.js
config.font_style = {
요소: 'span',
스타일: { 'font-family': ' #(family)' },
재정의: [ { 요소: 'font', 속성: { 'face': null } } ]
};
//기본 글꼴 크기plugins/font/plugin.js
config.fontSize_defaultLabel = '12px'
//글꼴 편집 시 선택적인 글꼴 크기plugins/font/plugin.js 🎜>config.fontSize_sizes
='8/8px;9/9px ;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px; 24/24px;26/26px;28/28px;36/36px;48 /48
px;72/72px'
//글꼴 크기를 설정할 때 사용되는 스타일 플러그인/font/plugin.js
config .fontSize_style = {
요소: 'span',
스타일: { 'font-size': '#(size)' },
재정의: [ { 요소: 'font', 속성: { ' size' : null } } ]
}; / /복사된 콘텐츠를 강제로 제거할지 여부plugins/pastetext/plugin.js
config.forcePasteAsPlainText =false //제거하지 않음
//"&"를 강제로 대체할지 여부plugins/htmldataprocessor/plugin.js
config.forceSimpleAmpersand = false
//주소 태그 형식을 지정합니다.plugins/format/plugin.js
config; format_address = { 요소 : '주소', 속성 : { 클래스 : 'styledAddress' } }
//DIV 태그 자동 형식 지정 플러그인/format/plugin.js
config.format_div = { 요소 : 'div', 속성 : { 클래스 : 'normalDiv' } }
//H1 태그 자동 형식 지정plugins/format/plugin.js
config.format_h1 = { 요소 : 'h1', 속성 : { 클래스 : 'contentTitle1' } };
//자동으로 H2 태그 형식 지정 플러그인/형식/plugin.js
config.format_h2 = { 요소: 'h2', 속성: { 클래스: 'contentTitle2' } }//자동으로 형식 H3 태그 플러그인/형식 /plugin.js
config.format_h1 = { 요소 : 'h3', 속성 : { 클래스 : 'contentTitle3' } }
//H4 태그 플러그인/형식/플러그인을 자동으로 포맷합니다. js
config.format_h1 = { 요소: 'h4', 속성: { 클래스: 'contentTitle4' } }
//H5 태그 자동 포맷 플러그인/format/plugin.js
config.format_h1 = { 요소: 'h5', 속성: { 클래스: 'contentTitle5' } }
//H6 태그 자동 형식 지정plugins/format/plugin.js
config.format_h1 = { 요소: 'h6', 속성: { class : 'contentTitle6' } }
//P 태그 자동 형식 지정plugins/format/plugin.js
config.format_p = { element : 'p', attribute : { class : 'normalPara' } };
//PRE 태그 자동 형식 지정plugins/format/plugin.js
config.format_pre = { element : 'pre', attribute : { class : 'code' } }// 태그 이름 구분 툴바에 표시할 세미콜론으로 플러그인/format/plugin.js
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div'
//여부 전체 HTML 편집 모드를 사용하려면 소스 코드에 및 기타 태그가 포함됩니다.
config.fullPage = false; //문단의 빈 문자를 무시할지 여부. 무시하지 않으면 문자는 ""로 표시됩니다.plugins/wysiwygarea/plugin.js
config.ignoreEmptyParagraph =
//링크 속성을 지울 때; 이미지 속성 상자 양쪽에서 동시에 태그를 지울지 여부.plugins/image/plugin.js
config.image_removeLinkByEmptyURL = true
//쉼표로 구분된 태그 이름 집합, 왼쪽 하단 /menu/plugin.js의 계층적 중첩 플러그인에 표시됩니다.
config.menu_groups
='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash ,checkbox,radio,te
xtfield, hidefield,imagebutton,button,select,textarea';
//하위 메뉴 표시 시 지연, 단위: ms 플러그인/menu/plugin.js
config.menu_subMenuDelay = 400 ;
//실행시 " New" 명령어 생성시 에디터의 내용이plugins/newpage/plugin.js
config.newpage_html = '';
//Word에서 텍스트를 복사할 때 , 텍스트 서식을 지정하고 플러그인을 제거할지 여부/pastefromword/plugin.js
config.pasteFromWordIgnoreFontFace = true; //기본값은 형식을 무시하는 것입니다.
//

< h2> 단어 문서에서 붙여넣은 내용을 수정하거나 교체하려면 플러그인/pastefromword/plugin.js
config.pasteFromWordKeepsStructure = false
//단어 플러그인/pastefromword/plugin에서 내용을 붙여넣을 때 형식을 제거할지 여부. js
config.pasteFromWordRemoveStyle = false;
// 배경 언어 유형에 따라 출력 HTML 콘텐츠의 형식을 지정합니다. 기본값은 비어 있습니다.
config.protectedSource.push( //g ); // PHP 코드
config.protectedSource.push( //g ); // ASP 코드
config.protectedSource.push( /(] >[s|S]*? [^>] >)| (] />)/gi ); // ASP.Net 코드
//입력 시 태그 삽입: Shift Enter
config.shiftEnterMode = CKEDITOR .ENTER_P; //선택 사항: CKEDITOR.ENTER_BR 또는 CKEDITOR.ENTER_DIV
//선택적 표현식 대체 문자 플러그인/smiley/plugin.js.
config.smiley_descriptions = [
':)', ':( ', ';)', ': D', ':/', ':P',
'', '', '', '', '', '',
'', ' ;(', '', '' , '', '',
'', ':kiss', '' ];
//해당 표현식 이미지plugins/smiley/plugin.js
config .smiley_images = [
' Regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif',
'embaressed_smile.gif ','omg_smile.gif', 'whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_
smile.gif',
'devil_smile.gif','cry_smile.gif' ,'lightbulb.gif',' Thumbs_down.gif','thumbs_up.gif','heart.gif',
'broken_heart.gif','kiss.gif','envelope.gif']
//이모티콘 주소 플러그인/smiley /plugin.js
config.smiley_path = 'plugins/smiley/images/'
//페이지 로드 시 편집 상자가 즉시 포커스를 받을지 여부plugins/editingblock /plugin.js 플러그인/editingblock/plugin.js .
config.startupFocus = false;//소스 코드 및 WYSIWYG "source" 및 "wysiwyg" 편집 방법
config.startupMode ='wysiwyg';
//plugins/showblocks/plugin.js 로드 시 프레임 테두리 표시 여부
config.startupOutlineBlocks = false
//스타일 파일 로드 여부 플러그인/stylescombo /plugin.js.
config.stylesCombo_stylesSet = 'default';
//다음은 선택사항입니다
config.stylesCombo_stylesSet = 'mystyles'; editorstyles/styles .js';
config.stylesCombo_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js'
//시작 인덱스 값
config.tabIndex = 0 ;
//사용자가 TAB을 입력하면 편집기에서 전달된 공백 수, ( ) 값이 0이면 포커스가 편집 상자 플러그인/tab/plugin.js
config 밖으로 이동합니다. tabSpaces = 0;
//기본 플러그인/templates/plugin.js에서 사용되는 템플릿
config.templates = 'default'
//쉼표로 구분된 템플릿 파일plugins/templates/plugin.js .
config.templates_files = [ 'plugins/templates/templates/default.js' ]
//템플릿 사용 시 '수정된 내용이 대체됩니다' 체크박스 체크 여부plugins/templates/plugin.js
config.templates_replaceContent = true ;
//테마
config.theme = 'default'; 🎜>// CKEditor에는 CKFinder가 통합되어 있습니다. ckfinder의 올바른 경로 선택에 주의하세요.
//CKFinder.SetupCKEditor(null, '/ckfinder/')
2. 몇 가지 사용 팁
1. 페이지에서 편집기를 즉시 설정합니다

3. 단순화된 ckeditor
웹 서버에 배포할 때 다음 폴더와 파일을 삭제할 수 있습니다. /_samples: 샘플 폴더;
/_source:
/lang 폴더에 있는 zh-cn.js 및 en.js 이외의 파일(필요에 따라 다른 언어 파일 유지); 🎜> 루트 디렉토리에 변경사항.html(업데이트 목록), install.html(설치 포인터), 라이센스.html(라이센스 사용)
/skins 디렉토리에 불필요한 스킨, 일반적으로 V2(단순, 일반)를 사용합니다. V2만 유지한다면 config.js에서 스킨을 지정해야 합니다.
fckeditor와 비교하면 fckdetior.dll 클래스 라이브러리에 대한 참조를 저장하고 페이지에서 직접 js를 사용하면 됩니다! . . . . . . . 그런데 이때
업로드 기능을 사용할 수 없다는 걸 발견했어요! fckefitor는 이전 기능을 ckeditor와 ckfinder의 두 부분으로 통합하고 분할한 것으로 나타났습니다. 후자는 기능을 업로드하는 데 비용이 필요합니다! ! 그러다가
온라인에서 검색해서 해결책을 찾았어요. ckfinder를 다운로드해서 프로젝트 루트 디렉터리에 넣어두었어요! !
, 업로드하세요. 오류 페이지! 그런 다음 많은 문제가 발생했습니다.
ckfinder/config:
public override bool CheckAuthentication()
{
return true;
}
ckeditror/config.js 추가됨:
CKEDITOR .editorConfig = function( config )
{
// 여기에서 기본 구성에 대한 변경 사항을 정의합니다. 예:
// config.언어 = 'fr'// config.uiColor = '# AADC6E';
config.filebrowserBrowseUrl = location.hash '../ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = location.hash '../ckfinder/ckfinder.html?Type=Images' ;
config.filebrowserFlashBrowseUrl = location.hash '../ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = location.hash '../ckfinder/core/connector/aspx/connector. aspx?
command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = location.hash '../ckfinder/core/connector/aspx/connector.aspx?
command=QuickUpload&type=Images'; >config .filebrowserFlashUploadUrl = location.hash '../ckfinder/core/connector/aspx/connector.aspx?
command=QuickUpload&type=Flash'
// config.filebrowserWindowWidth = '800'; // config.filebrowserWindowHeight = '500';
};
색칠된 부분은 처음에는 넣지 않았네요..(루트 디렉토리)
로그인 후, 당신은 여기에 나타날 것입니다. 계속 오류가 나서 추가했는데... 앞에는 프로젝트 루트 디렉터리에서 시작한다는 뜻입니다.오류가 해결되었습니다! ! 마지막으로
크랙입니다.
다음은 크래킹 단계에 대한 간략한 설명입니다. (다른 사람에서 발췌)
1. FF 브라우저에서 Firebug 플러그인을 사용합니다.
2. browser 에서 ckfinder.html 파일이 호출된 것을 발견했습니다.
3. ckfinder.html에서 이 셀에 core/pages/ckffiles.html ;
4. 계속해서 iframe 노드를 엽니다. tr> id가 없어야 합니다. 돈은 여기 있습니다~
5. core/pages/ckffiles.html 소스 파일을 열고 및 이는 이 가 코드에 의해 생성되었음을 나타냅니다.
6. 다음으로 CKfinder의 js에서 답을 찾을 수 있습니다. 다행히 FCKeditor는 상대적으로 이전에 익숙하므로 ckfindercorejs 폴더로 직접 이동하여 찾을 수 있습니다.
7. 이 폴더 아래 두 개의 j 중 하나는 IE용이고 다른 하나는 FCKeditor용입니다.
8. ckfinder_gecko.js를 열고 "qu"를 검색하면 곧 eF =B.getElementById('qu');이 문장을 찾을 수 있습니다.
9. =(dK.indexOf(ab.bW.substr(1,1))) % 5) &&window.top[qC '143141x74x69157x6E'][qF '163x74'].toLowerCase
().replace(s4,"" )!=ab.eo.replace(s4,""))||ab.bW.substr(3,1)!=dK.substr(((dK.indexOf(ab.bW.substr(0,1)) dK.indexOf
(ab.bW.substr(2,1)))*9 ) % (dK.length-1),1)){en.call(window,qo);};eF.appendChild( D);
이 단락의 마지막 추가~가 거의 완료되었습니다.
10. 위에서 언급한 여러 조건 중 en.call(window,qo)만 실행됩니다.
11. en.call(window,qo); 또는 * en.call( window,qo); *를 삭제하고 다시 새로 고쳐서 없어졌는지 확인하세요~
12. ckfinder_ie.js를 수정하세요. 동일합니다.
CKfinder 전체가 쉽게 깨질 수 있어요~ 이게 사용하기 쉽다고 생각하시면 돈을 내고 일련번호를 구매하시는 게 좋을 것 같아요. 담당자가 기술적인 도움도 드리고 시간도 많이 절약할 수 있어요