최신 버 전의 CKEditor 설정 방법 및 플러그 인(Plugin)예제 작성

FCKEditor 는 js 프레임 워 크 를 다시 쓰 고 CKEditor 로 이름 을 바 꿨 다.CKEditor 사이트 에서 demo 인터페이스 를 처음 봤 을 때 CKEditor 의 우호 적 인 인터페이스 와 강력 한 기능 에 충격 을 받 았 습 니 다.CKEditor 는 현재 인터넷 에서 가장 우수한 오픈 소스 멀티미디어 HTML 편집기 임 에 틀림없다.
이 글 은 CKEditor 프로 세 스 를 설정 하고 글 페이지 플러그 인 을 예 로 들 어 CKEditor Plugin 의 작성 과정 을 요약 합 니 다.홈 페이지http://ckeditor.com/download최신 버 전의 CKEditor 를 다운로드 하여 압축 을 풀다.
1.CKEditor 호출 방법
페이지 에 핵심 js 파일 을 불 러 옵 니 다:,일반적인 방식 으로 textarea 를 배치 합 니 다.예 를 들 어html 내용 초기 화
그리고 textarea 뒤에 js:CKEDITOR.replace('editor 1');
기타 호출 방식 참조 가능samples 디 렉 터 리 의 예제.
2.개성 화 된 도구 모음 설정
ckeditor 기본 도구 모음 에는 자주 사용 되 지 않 거나 중국어 에 적용 되 지 않 습 니 다.기본 도구 모음 설정 을 통 해 이 루어 질 수 있 습 니 다.가장 간결 한 방법 은 설정 파일 config.js 를 직접 수정 하 는 것 입 니 다.제 config.js 내용 은 다음 과 같 습 니 다.

CKEDITOR.editorConfig = function( config )
 {
 // Define changes to default configuration here. For example:
 // config.language = 'fr';
 config.uiColor = '#ddd';
 config.toolbar = 'Cms';
 config.toolbar_Cms =
 [
 ['Source','-'],
 ['Cut','Copy','Paste','PasteText','PasteFromWord','-'],
 ['Undo','Redo','-','Find','Replace','RemoveFormat'],['Link','Unlink','Anchor'],
 ['Image','Flash','Table','HorizontalRule', '-'],['Maximize'],
 '/',
 ['Bold','Italic','Underline','Strike','-'],
 ['FontSize'],['TextColor','BGColor'],
 ['NumberedList','BulletedList','-','Outdent','Indent','pre'],
 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
 ['PageBreak', 'Page']
 ];
 config.filebrowserUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
 config.fontSize_sizes = '10/10px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;28/28px;32/32px;48/48px;';
 config.extraPlugins = 'apage';
 };

3.편집기 안의 문 자 를 14px 로 변경 합 니 다(기본 12px,중국어 에 보기 좋 지 않 음)
1)시각 화 편집 에서 기본 글꼴 크기:루트 디 렉 터 리 의 contents.css 를 수정 하고 body 의 font-size:12px 를 font-size:14px 로 변경 합 니 다.
2)소스 코드 보기 글꼴 크기:skins\kama\\editor.css 를 수정 하고 마지막 으로'cke'를 추가 합 니 다.skin_kama textarea.cke_source { font-size:14px; }
4.플러그 인 작성 프로 세 스 와 인 스 턴 스 코드
1)plugins 디 렉 터 리 에 새 폴 더 apage 를 만 들 고 apage 에서 새 파일 을 만 듭 니 다:plugin.js 내용 은 다음 과 같 습 니 다.

CKEDITOR.plugins.add( 'apage',
 {
 init : function( editor )
 {
 // Add the link and unlink buttons.
 editor.addCommand( 'apage', new CKEDITOR.dialogCommand( 'apage' ) );
 editor.ui.addButton( 'Page',
 {
 //label : editor.lang.link.toolbar,
 label : “Page",
 //icon: 'images/anchor.gif',
 command : 'apage'
 } );
 //CKEDITOR.dialog.add( 'link', this.path + 'dialogs/link.js' );
 CKEDITOR.dialog.add( 'apage', function( editor )
 {
 return {
 title : '    ',
 minWidth : 350,
 minHeight : 100,
 contents : [
 {
 id : 'tab1',
 label : 'First Tab',
 title : 'First Tab',
 elements :
 [
 {
 id : 'pagetitle',
 type : 'text',
 label : '          <br />(           +    )'
 }
 ]
 }
 ],
 onOk : function()
 {
 editor.insertHtml("[page="+this.getValueOf( 'tab1', 'pagetitle' )+"]“);
 }
 };
 } );
 },
 requires : [ 'fakeobjects' ]
 } );

2)toolbar 에 Page 를 추가 하고 확장 플러그 인 config.extraPlugins='apage'를 설정 합 니 다.두 가지 방법 이 있 는데 하 나 는 config.js 에 직접 추가 하 는 것 이다.예 를 들 어 본 고의 config.js 예시 코드 를 보 여 준다.방법 2:CKEditor 를 참조 하 는 곳 에 설정 파 라 메 터 를 추가 합 니 다.예 를 들 어:

CKEDITOR.replace( 'editor1', { extraPlugins : 'examenLink', toolbar : [ ['Undo','Redo','-','Cut','Copy','Paste'], ['ExamenLink','Bold','Italic','Underline',], ['Link','Unlink','Anchor','-','Source'],['Page'] ] });

편집기 에 빈 단추 가 하나 더 있 는 것 을 보 았 을 것 이다.

공백 단 추 를 해결 하 는 방법 은 두 가지 가 있 습 니 다.
방법 1:플러그 인 코드,plugin 을 수정 하고 icon 을 존재 하 는 아이콘 으로 정의 합 니 다.
방법 2:레이 블 의 텍스트 를 편집 합 니 다.편집기 페이지 에 css 를 추가 해 야 합 니 다(주의:ckebutton_apage 의 이름 은 실제 와 일치 합 니 다.)

<style type="text/css">
 .cke_button_apage .cke_icon { display : none !important; }
 .cke_button_apage .cke_label { display : inline !important; }
 </style>

만약 당신 의 페이지 가 하나의 페이지 문자 만 삽입 해 야 한다 면,본문 처럼 제목 을 작성 할 필요 가 없다 면,더욱 간단 하고,플러그 인 코드 만 수정 하면 된다.홍 맥 소프트웨어 팀 위 키 에서 본 고 에서 언급 한 모든 코드 를 보십시오http://www.teamwiki.cn/js/ckeditor_config_plugin
CKEditor 설정 및 플러그 인 작성 예시
CKEditor 설정
config.js

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	config.uiColor = '#ddd';
 
	config.toolbar = 'Cms';
 config.toolbar_Cms =
 [
 ['Source','-'],
 ['Cut','Copy','Paste','PasteText','PasteFromWord','-'],
 ['Undo','Redo','-','Find','Replace','RemoveFormat'],['Link','Unlink','Anchor'],
	['Image','Flash','Table','HorizontalRule', '-'],['Maximize'],
 '/',
 ['Bold','Italic','Underline','Strike','-'],
	['FontSize'],['TextColor','BGColor'],
 ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
 ['PageBreak','-','Page']
 ];
 
	config.filebrowserUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
	config.fontSize_sizes = '10/10px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;28/28px;32/32px;48/48px;';
 
	config.extraPlugins = 'apage';
};

CKEditor 페이지 플러그 인 1:다음 페이지 의 글 제목 을 입력 하 십시오.

CKEDITOR.plugins.add( 'apage',
{
	init : function( editor )
	{
		// Add the link and unlink buttons.
		editor.addCommand( 'apage', new CKEDITOR.dialogCommand( 'apage' ) );
		editor.ui.addButton( 'Page',
			{
				//label : editor.lang.link.toolbar,
				label : "Page",
				//icon: 'images/anchor.gif',
				command : 'apage'
			} );
		//CKEDITOR.dialog.add( 'link', this.path + 'dialogs/link.js' );
		CKEDITOR.dialog.add( 'apage', function( editor )
		{		
			return {
				title : '    ',
				minWidth : 350,
				minHeight : 100,
				contents : [
					{
						id : 'tab1',
						label : 'First Tab',
						title : 'First Tab',
						elements :
						[
							{
								id : 'pagetitle',
								type : 'text',
								label : '          <br />(           +    )'
							}
						]
					}
				],
				onOk : function()
					{
						editor.insertHtml("[page="+this.getValueOf( 'tab1', 'pagetitle' )+"]");
					}
			};
		} );
	},
 
	requires : [ 'fakeobjects' ]
} );

CKEditor 페이지 플러그 인 2:페이지 문자 직접 삽입
편집기 의 기본 디 코딩 때문에 사용 과정 에서"page"의"page"를 제거 해 야 합 니 다.

CKEDITOR.plugins.add( 'apage',
{
	var cmd = {
		exec:function(editor){
			editor.insertHtml("[[『page』]]");
		}
	}
	init : function( editor )
	{
		// Add the link and unlink buttons.
		editor.addCommand( 'apage', cmd );
		editor.ui.addButton( 'Page',
			{
				//label : editor.lang.link.toolbar,
				label : "Page",
				//icon: 'images/anchor.gif',
				command : 'apage'
			} );		
	},
 
	requires : [ 'fakeobjects' ]
} );