ASP의 ckEditor에 대한 자세한 구성 요약

코드

<script type=text/javascript src=ckeditor/ckeditor.js></script>

2. 편집기가 사용되는 HTML 컨트롤 <textarea>를 삽입합니다.

<textarea id= TextArea1 cols= 20 행=2 class=ckeditor></textarea>

ASP.NET 환경인 경우 서버측 컨트롤 <TextBox>를 사용하여

다음과 같이 코드를 복사할 수도 있습니다.

<asp:TextBox ID=tbContent runat=server TextMode=MultiLine class=ckeditor></asp:TextBox>

class=ckeditor가 컨트롤에 추가됩니다.

컨트롤

을 편집기 코드로 교체합니다.

<script type=text/javascript>

CKEDITOR.replace('TextArea1')

//ASP.NET에서 사용되는 서버측 컨트롤인 경우 환경 <TextBox >

CKEDITOR.replace('tbContent');

//<TextBox> 컨트롤이 마스터 페이지에 있는 경우

CKEDITOR.replace('<%=tbContent.ClientID.Replace(_,$) %>')를

작성

4

.

code 코드는 다음과 같습니다.

ckeditor의 구성은 ckeditor/config.js 파일에 집중되어 있습니다. 다음은 일반적으로 사용되는 일부 구성 매개변수입니다.

// 인터페이스 언어, 기본값은 'en'

config.언어 = 'zh-cn

'

;

너비와 높이 설정

config.width = 400;

config.height = 400;

// 세 가지 편집기 스타일이 있습니다: 'kama'(기본값), 'office2003', 'v2'

config.skin = 'v2'

//

config.uiColor = '#FFF';

// 툴바(기본'기본', 종합'전체', 사용자 정의)plugins/toolbar/plugin.js

config.toolbar = '기본';

config.toolbar = 'Full';

이는 다음과 일치합니다:

config.toolbar_Full = [

['Source','-','Save','NewPage','Preview','-', '템플릿'],

['잘라내기','복사','붙여넣기','텍스트 붙여넣기','PasteFromWord','-','인쇄', 'SpellChecker', 'Scayt'],

['실행 취소','다시 실행','-','찾기','바꾸기','-','SelectAll','RemoveFormat'],

['양식', '체크박스 ', '라디오', 'TextField', 'Textarea', '선택', '버튼', 'ImageButton', 'HiddenField'],

'/',

['굵게','기울임꼴','밑줄','스트라이크','-','아래 첨자','위 첨자'],

['번호 매기기 목록','글머리 기호 목록','-','내어쓰기' ,'들여쓰기','인용부호'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

['링크','링크 해제','앵커'],

['이미지','플래시','테이블','HorizontalRule','Smiley','SpecialChar','PageBreak'],

'/',

[' 스타일','형식','글꼴','FontSize'],

['TextColor','BGColor']

];

//툴바 축소 가능 여부

config.toolbarCanCollapse = true;

//툴바 위치

config.toolbarLocation = 'top'; //옵션: 하단

//툴바 기본 확장 여부

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 /*F10*/, 'toolbarFocus' ], // 포커스 가져오기

[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //요소 포커스

[CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //텍스트 메뉴

[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], // 실행 취소

[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //다시 실행

[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, '다시 실행' ], //

[ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //링크

[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], // 굵게

[ CKEDITOR.CTRL + 73 /*I*/, 'italic' ] , //기울임꼴

[ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], // 밑줄

[ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]

]

//설정된 바로가기 키는 브라우저 바로가기 키 플러그인/keystroks/plugin.js와 충돌할 수 있습니다.

config.blockedKeystroks = [

CKEDITOR.CTRL + 66 /*B*/,

CKEDITOR.CTRL + 73 /*I* / ,

CKEDITOR.CTRL + 85 /*U*/

]

//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,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,

A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,FFF0F5,

FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF'

//색상 플러그인 선택 시 다른 색상 옵션을 표시할지 여부/색상버튼/ 플러그인 .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' } );

//인터페이스 편집 상자의 배경색 플러그인/dialog/plugin.js

config.dialog_BackgroundCoverColor = 'rgb(255, 254, 253)'; //참조용으로 설정 가능

config.dialog_BackgroundCoverColor = '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 = '<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22';

//편집 영역을 렌더링할지 여부plugins/editingblock/plugin.js

config.editingBlock

= true;

EnterMode = CKEDITOR.ENTER_P

에 의해 생성된 라벨

//출력에 HTML 엔터티를 사용할지 여부.plugins/entities/plugin.js

config.entities = true;

//추가 엔터티 정의plugins/entities/plugin.js

config.entities_additional = '#39' //여기서 #은 대체됩니다.

//표시하기 어려운 일부 문자를 해당 HTML 문자로 변환할지 여부plugins/entities/plugin.js

config.entities_greek = true;

//일부 라틴 문자를 HTML로 변환할지 여부 Plugins/entities/plugin.js

config.entities_latin = true;

//특수 문자를 다음과 같은 ASCII 문자로 변환할지 여부: 汉语.Convert to This is Chinese:

config.entities_processNumerical

= false ;

//새 구성요소 추가

config.extraPlugins = 'myplugin'; //기본값이 아닌 예시 전용

//plugins/find/plugin.js 검색 시 강조 색상 사용

config.find_highlight = {

element : 'span',

styles : { 'ground-color' : '#ff0', 'color' : '#00f' }

};

//기본 글꼴 이름 플러그인/font/plugin.js

config.font_defaultLabel = 'Arial';

//글꼴 편집 시 자주 사용하는 한자를 문자 세트에 추가할 수 있습니다: Song, Kai, Hei 등.plugins/font/plugin.js

config.font_names = 'Arial;Times New Roman;Verdana';

//기본 스타일 텍스트 플러그인/font/plugin.js

config.font_style = {

요소: 'span',

스타일: { 'font-family': '#(family)' },

재정의: [ { 요소: 'font', attribute : { 'face' : null } ]

};

//기본 글꼴 크기 플러그인/font/plugin.js

config.fontSize_defaultLabel = '12px'

//글꼴 편집 시 선택적인 글꼴 크기 플러그인/font /plugin .js

config.fontSize_sizes ='8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;2 0/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px'

//글꼴 크기를 설정할 때 사용되는 스타일 플러그인/font/plugin.js

config.fontSize_style = {

element : 'span',

styles : { 'font-size' : '#(size)' },

overrides : [ { element : ' 글꼴', 속성 : { 'size' : null } } ]

}

//복사된 콘텐츠를 강제로 플러그인/pastetext/plugin.js 형식으로 제거할지 여부

config.forcePasteAsPlainText =false //제거하지 않음

//&plugins/htmldataprocessor/plugin.js를 강제로 교체할지 여부

config.forceSimpleAmpersand = false;

//주소 태그 형식을 지정합니다.plugins/format/plugin.js

config.format_address = { element : 'address' , 속성 : { 클래스 : 'styledAddress' } }

//DIV 태그 자동 형식화plugins/format/plugin.js

config.format_div = { element : 'div', attribute : { class : 'normalDiv' } }

//H1 태그 형식을 자동으로 지정합니다.plugins/format/plugin.js

config.format_h1 = { element : 'h1', attribute : { class : 'contentTitle1' } };

//H2 태그 자동 형식화 플러그인/형식/plugin.js

config.format_h2 = { 요소 : 'h2', 속성 : { 클래스 : 'contentTitle2' } };

//H3 태그 자동 형식화plugins/format/plugin.js

config.format_h1 = { element : 'h3', attribute : { class : 'contentTitle3' } }

//H4 태그 형식화 플러그인/ format/plugin.js

config.format_h1 = { 요소 : 'h4', 속성 : { 클래스 : 'contentTitle4' } };

//H5 태그 자동 형식화plugins/format/plugin.js

config.format_h1 = { element : 'h5', attribute : { class : 'contentTitle5' } }

//H6 태그 자동 형식화plugins/format /plugin.js

config. format_h1 = { 요소 : 'h6', 속성 : { 클래스 : 'contentTitle6' } };

//P 태그의 형식을 자동으로 지정합니다.plugins/format/plugin.js

config.format_p = { element : 'p', attribute : { class : 'normalPara' } }

//PRE 태그의 형식을 자동으로 지정합니다.plugins/format /plugin.js

config.format_pre = { 요소 : 'pre', 속성 : { 클래스 : '코드' } };

//세미콜론으로 구분된 태그 이름은 툴바에 표시됩니다.plugins/format/plugin.js

config.format_tags

= 'p;h1;h2;h3;h4;h5;h6;pre;address;div';

전체 HTML 편집 모드를 사용하면 소스 코드에 <html><body></body></html> 및 기타 태그가 포함됩니다.

config.fullPage = false;

//문단의 빈 문자를 무시할지 여부. 무시하지 않으면 해당 문자는 플러그인/wysiwygarea/plugin.js로 표시됩니다.

config.ignoreEmptyParagraph = true

//<a>의 양쪽을 동시에 지울지 여부

이미지 속성 상자에서 링크 속성을 지울 때 태그 플러그인/image/plugin.js

config.image_removeLinkByEmptyURL = true;

//왼쪽 하단 모서리에 계층적 중첩으로 표시되는 쉼표로 구분된 태그 이름 집합입니다.plugins/menu/plugin.js.config.menu_groups

='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor, link ,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea'

//하위 메뉴 표시 시 지연, 단위: ms 플러그인/menu/plugin.js

config.menu_subMenuDelay = 400;

//새 명령어가 실행되면 에디터의 내용이 표시됩니다.plugins/newpage/plugin.js

config.newpage_html = '';

//워드에서 텍스트를 복사할 때. , 텍스트 형식을 지정하고 제거할지 여부 플러그인/pastefromword/plugin.js

config.pasteFromWordIgnoreFontFace = true; //기본값은 형식을 무시하는 것입니다

. //단어 문서에서 붙여넣은 내용을 수정하거나 대체하기 위해 <h1><h2>와 같은 태그를 사용할지 여부.plugins/pastefromword/plugin.js

config.pasteFromWordKeepsStructure = false

//When 단어에서 콘텐츠 붙여넣기 플러그인/pastefromword/plugin.js 형식을 제거할지 여부

config.pasteFromWordRemoveStyle = false;

//배경 언어 유형에 따라 출력 HTML 콘텐츠의 형식을 지정합니다. 기본값은 비어 있습니다.

config.protectedSource.push( /</?[/s/S]*?/?>/g ) // PHP 코드

config . protectedSource.push( //g ); // ASP 코드

config.protectedSource.push( /(]+>[/s|/S]*?</asp:[^/>]+>)|(] + //>)/기 ) // ASP.Net 코드

//입력 시 삽입되는 레이블: Shift+Enter

config.shiftEnterMode = CKEDITOR.ENTER_P; //선택 사항: CKEDITOR.ENTER_BR 또는 CKEDITOR.ENTER_DIV

//

선택적 표현 대체 문자 플러그인/smiley/plugin.

smiley_descriptions = [

':)', ':(', ';)', ':D', ':/', ':P',

'', '', '', ''

, '', '', '', ';(', '', '', '', '',

'', ':kiss' , '' ];

//해당 표현 이미지 플러그인/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','봉투 .gif'];

//이모티콘 플러그인 주소/smiley/plugin.js

config.smiley_path = 'plugins/smiley/images/';

//페이지 로드 시 편집 상자가 즉시 포커스를 받을지 여부plugins/editingblock/plugin.js.config.startupFocus

=

false;

소스 코드와 WYSIWYG 소스 및 wysiwyg 플러그인/editingblock/plugin.js를 편집하는 방법

config.startupMode ='wysiwyg';

//plugins/showblocks/plugin.js를 로드할 때 프레임 테두리를 표시할지 여부

config.startupOutlineBlocks = false;

//스타일 파일을 로드할지 여부plugins/stylescombo/plugin.js.config.stylesCombo_stylesSet

'

default';

다음은 선택 사항입니다

config.stylesCombo_stylesSet

= 'mystyles';

'mystyles:/editorstyles/styles.js';

config.stylesCombo_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';

//시작 인덱스 값

config.tabIndex

= 0;

사용자가 TAB, 편집기에서 전달한 공백 수, () 값이 0이면 포커스가 편집 상자 밖으로 이동합니다.plugins/tab/plugin.js

config.tabSpaces = 0;

//기본 템플릿plugins/templates/plugin.js.config.templates

= 'default';

//쉼표로 구분된 템플릿 파일plugins/templates/plugin.js

= [ 'plugins/ template/templates/default.js' ]

//템플릿 사용 시,plugins/templates/plugin.js 박스를 체크하면 편집 내용이 교체됩니다.

config.templates_replaceContent = true;

//테마

config.theme = 'default';

//기록 취소 단계 수plugins/undo/plugin.js

config.undoStackSize =20;

//CKEditor에 CKFinder 통합, 경로에 주의하세요. ckfinder의 선택이 정확합니다.

//CKFinder.SetupCKEditor(null, '/ckfinder/');