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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:53 PM

ckeditor

1. 사용 방법:
1. ckeditor.js를 페이지

2. 편집기가 사용되는 곳에 HTML 컨트롤을 삽입합니다.

ASP.NET 환경인 경우 서버측 컨트롤

class="ckeditor"가 컨트롤에 추가됩니다.
3. 해당 컨트롤을 편집기 코드
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 = 'BR>"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; //기본값은 형식을 무시하는 것입니다.
//