웹모아 
웹모아[손님] 검색 로그인   
웹모아
 
php와 웹서버
 


CKEDITOR 설치 및 설정
  2014-06-13 08:11:24 조회:4992


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서버와 아파치서버를 설정하고 재실행 그것도 양이 많아지지만 끊기는 현상이 발생합니다. 특히나 자동화 계정및 자동 서브도메인부분에서는... 다차원 서브도메인지원 클럽을 만들면서 클럽이 서브도메인에 생성되기때문에 서버를 자동셋팅조회(2629)          



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



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



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



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



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





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



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



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



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



  php-mysql 한글 깨짐 현상
오래전에 만들어 놓은 웹페이지를 열어보았더니 한글이 전부 깨어져 있네요. 찾아볼 자료가 있어 어떻게하던 해결응 해야 하는 입장이라 여러가지 검색도 하고 테스트도 해 보다 정상적으로 복구가 되어 혹 필요한 분이 있을까하여 자료를 남깁니다. [한글이 깨진 화면]참고로 본 자료는 리눅스에서의 작업이며 윈도우용으로 사용하시는 분도 대동소이합니다. 먼저 /조회(2547)          



  iis 서비스 설치
xp 에서 iis 서비스는 추가기능이므로 별도로 설치 해야합니다. 따라서 xp 시디나 이미지파일(ISO) 이 있어야 설치가 가능합니다. 윈도우의 시작 >> 설정 >> 제어판을 클릭하시고 제어판의 프로그램 추가제거 아이콘을 클릭합니다. 프로그램 추가/제거 창에서 좌측의 윈도우즈 구성요소 추가/제거 아이콘을 클릭합니다. 조회(3174)          



  윈도우용 mysql사용을 위한 환경설정
이번에는 설치한 mysql을 사용하기 위한 xp등 윈도우상의 제반설정이 됩니다. 먼저 윈도우 시작 -> 실행 -> 실행대화창에서 cmd를 입력하고 엔터를 칩니다. 그러면 통상 c:/Documnts and Settings 디렉토리가 보이면서 까만 도스창이 뜰 것입니다. 서버를 운용하시면 작업을 dos창에서 해야 하는 경우가 많으니 조회(3190)          



  윈도우용 mySql5 설치와 설정 1
다운로드 사이트 : http://dev.mysql.com/downloads/mysql/6.0.html 최신버젼을 받으시려면 위 제작사 사이트를 방문하십시요. 현재 설치할 버젼은 mySql5.0.22버젼입니다. 프로그램 용량이 40M 가까운 크기입니다. 제 블로그에서 파일이 다운로드 되지 않으시면 http://car.landmoa.net 으로 방조회(3270)          



  제1강 php의 개념과 웹상에 게시된 php에 대한
1. PHP 란? -. PHP (Hypertext Preprocessor) . 동적 웹페이지를 만들기 위한 오픈소스 기반의 서브측 스크립트 언어 . PHP 구문은 서브에서 번역되어 HTML 형태로 Client 에 전송. -. 장점 .거의 모든 OS 에서 동작 조회(3215)          




≪ [1]  [2]   ≫

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


 
최근 글
[손님]
164
291
505
301
313
193
280
3276
870
888
1070
911
4181
3481
3542
 
인기 글
[손님]
4092
3349
3876
3056
3646
4029
4060
  [홈마스타] input 버턴의 모양
6589
4002
3364
6183
9994
11697
3481
5126