웹모아
웹모아[손님] 검색 로그인   


 
php와 웹서버
 


CKEDITOR 설치 및 설정
  2014-06-13 08:11:24 댓글:(0)   조회:5008


CKEDITOR 설치 및 설정



A. 설치법.

먼저 http://ckeditor.com/ 에서 CK에디터를 다운로드 받습니다.

FTP를 이용해 자신의 계정에 ckeditor 폴더를 업로드 합니다.

사용할 페이지의 <head>와 </head> 사이에 아래 소스코드를 추가합니다.





<script type="text/javascript" src="/업로드폴더/ckeditor.js"></script>



에디터를 사용할 텍스트에리어에 ID나 CLASS 어트리뷰트 값을 이용해 아래와 같이 적용할 수 있습니다.

1. ID를 이용한 방법.





<textarea id="editor1" name="editor1" style="width:100%;height:200px;"></textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1' );
//]]>
</script>




2. CLASS를 이용한 방법.





<textarea name="editor2" class="ckeditor" style="width:100%;height:200px;"></textarea>



예제 :: http://coterie.hosting.paran.com/ckeditor/

B. 기본 설정법.설정법.

1. 스킨





<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',{
skin:'스킨폴더명'
});
//]]>
</script>




※ CKeditor 에서는 3가지 스킨을스킨을 기본적으로 포함하고 있습니다. (kama,office2003,v2)

예제 : http://coterie.hosting.paran.com/ckeditor/index2.html

2. 인터페이스 컬러

CKEditor 기본스킨을 사용할 시 위지윅 에디터의 인터페이스 UIUI 컬러를 설정할 수 있습니다.





<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',{
uiColor: '#14B8C4'
});
//]]>
</script>




예제 : http://coterie.hosting.paran.com/ckeditor/index3.html

3. 언어

ckeditor는 기본적으로 페이지의 언어에 맞춰맞춰 설정해 주지만 그렇지 않은경우 아래와 같이 가능합니다.





<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor2',{
language : 'english'
});
//]]>
</script>




예제 : http://coterie.hosting.paran.com/ckeditor/index4.html

4. 엔터 모드

엔터나 시프트+엔터를 누를때의 입력되는 소스를 결정합니다.

1 = <p></p>

2 = <br />

3 = <div></div>





<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',{
enterMode:'2'
shiftEnterMode:'3'
});
//]]>
</script>




예제 : http://coterie.hosting.paran.com/ckeditor/index5.html

5. 툴바

툴바에 출력할 아이콘을 설정할 있습니다.





<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',{
toolbar:
[
['Bold','-', 'Italic'],
['NumberedList']
]
});
//]]>
</script>




예제 : http://coterie.hosting.paran.com/ckeditor/index6.html

기본 툴바는 아래와 같습니다. 원하는 것만 선택해서선택해서 사용하시면 됩니다.

['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','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'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']

C. 커스텀컨피그 파일 사용법.

자신이 설정한 config 파일을파일을 통해 ckeditor를 커스터마이징 할 수 있습니다.





<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',{
customConfig : '커스텀설정js파일위치',
width: '100%',
height: 300
});
//]]>




아래는 전에 제가 사용하던 커스텀 설정입니다.





CKEDITOR.editorConfig = function( config ){
config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22%3E'">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'</A>;
config.font_defaultLabel = 'Gulim';
config.font_names = 'Gulim/Gulim;Dotum/Dotum;Batang/Batang;Gungsuh/Gungsuh;Arial/Arial;Tahoma/Tahoma;Verdana/Verdana';
config.fontSize_defaultLabel = '12px';
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/48px;';
config.language = "ko";
config.resize_enabled = false;
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;
config.startupFocus = true;
config.uiColor = '#EEEEEE';
config.toolbarCanCollapse = false;
config.menu_subMenuDelay = 0;
config.toolbar = [['Bold','Italic','Underline','Strike','-','Subscript','Superscript','-','TextColor','BGColor','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','Link','Unlink','-','Find','Replace','SelectAll','RemoveFormat','-','Image','Flash','Table','SpecialChar'],'/',['Source','-','ShowBlocks','-','Font','FontSize','Undo','Redo','-','About']];
};
API 문서 : http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html



 댓글 (0)


php와 웹서버
페이지: 1 / 2   

 

  서브도메인 자동셋팅 Rewrite(리눅스 BIND,
서브도메인 자동셋팅 Rewrite(리눅스 BIND, 아파치설정)대량의 서브도메인 생성이 매번 DNS서버와 아파치서버를 설정하고 재실행 그것도 양이 많아지지만 끊기는 현상이 발생합니다. 특히나 자동화 계정및 자동 서브도메인부분에서는... 다차원 서브도메인지원 클럽을 만들면서 클럽이 서브도메인에 생성되기때문에 서버를 자동셋팅조회(2631)          




  HTML에서 한글이 깨진다
HTML에서 한글이 깨진다 HTML에서 한글이 깨질 때 다음 코드를 HTML 코드 맨 위에다가 쓰시면 해결이 됩니다. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d조회(1221)          




  html문서에 한글 인코딩 지정 방법
linux의 아파치 서버에서 html 파일을 하나 만들었는데 익스플로러에 열어보면 한글이 깨져보입니다. (인코딩을 한글로 인식하지 못하는 문제로 물론 익스플로러에서 인코딩을 한글로 지정해주면 잘보이지면 페이지를 열때마다 그럴 수는 없는 노릇이구요. ) 어딘가에서 읽은대로 meta로 charset=euc-kr을 지정해도 익스플로러에서 화면을 열때 en조회(1542)          




  PHP 한글 깨짐현상 해결하기(html, mysql
PHP를 사용하여 개발하다보면, 한글로 된 값이 나올때도 있을 수 있습니다. 그런데 PHP를 통하면 DB에 깨져서 들어간다던지, 아니면 html 값이 깨질 때도 있습니다.&#65279; PHP 한글 깨짐현상 해결하기(html, mysql) PHP를 통했을때 한글이 깨지는 현상 해결하는 방법엔 여러가지가 있습니다. 먼저 한글 깨지는 조회(2339)          




  CKEDITOR 설치 및 설정
CKEDITOR 설치 및 설정 A. 설치법. 먼저 http://ckeditor.com/ 에서 CK에디터를 다운로드 받습니다. FTP를 이용해 자신의 계정에 ckeditor 폴더를 업로드 합니다. 사용할 페이지의 <head>와 </head> 사이에 아래 소스코드를 추가합니다. <script조회(5009)          




  FCKeditor 설치법 정리
Amen http://holyqt.com/xe/277 FCK데모보기  http://www.fckeditor.net/Demo/FCK에디터다운로드   http://www.fckeditor.net/  1. 다운받아 자신의 계정에 업로드한다. (bbs 폴더 아래에 풀었음)2. 설치할 스킨 write.조회(14828)          






  브라우저 기반의 위지윅(WYSIWYG) 에디터(ED
브라우저 기반의 위지윅(WYSIWYG) 에디터(EDITOR) 총집합 브라우저 기반의 위지윅(WYSIWYG) 에디터(EDITOR) 총집합 FCKeditor http://sourceforge.net/projects/fckeditor/ IE의 Editor Object 를 이용하여 제작 jsp, php, asp에 대응하는 이미지 업조회(2977)          




    FCKeditor Version 2.1 간단설치
FCKeditor 프로그램을 받아서 / 홈 밑에 통채로 카피해서 넣는다 (서버홈이 아니고 예: /home/narasarang.co.kr/public_html/FCKeditor 여기) <?php include("../FCKeditor/fckeditor.php") ; // Automatically calculates the editor ba조회(2060)          




      FCK 에디터 설치, 그리고 기본 설정 (FCK E
FCK Editor v2.4.3   복사만으로 간단하게 설치가 되지만, 그대로는 사용할 수가 없다. 설치후에 기본적으로 설정해야 하는 것들을 정리해 본다.     FCKeditor_2.6.4.1.zip         1. 환경 설정하기 fck조회(2136)          




  Tinymce 설치
Tinymce 설치 Posted on 4월 21, 2012 작성자: ch7895   가장 많이 쓰는 에디터인듯. 여기 워드프레스도 Tinymce 이고, 저작권은 LGPL. 설치방법은 나름 쉬움. 웹공부 한지 얼마 안되고, 에디터도 처음 써봐서 헤멜뻔 했는데, 괜히 겁먹었음;;    1.  조회(3552)          




≪ [1]  [2]   ≫

복수단어 검색은 공백(space)로 구분해 주세요.



 
최근 글
[손님]
48
53
214
359
594
345
389
230
340
3617
903
937
1161
950
4244
 
인기 글
[손님]
4612
4859
3717
3373
3274
3369
3552
3196
10295
3362
3442
3175
3372
3143
4255