안녕하세요!! 작은나무에요~~ 음.. FCKeditor 이거 전 회사에서는 쓰지를 않았는대 이번에 회사를 옴겼더니 요 회사에서는 사용을 하길래 한번 설치하는 방법 및 셋팅방법에 대해 좀 알아보았습니다. ^^;
먼저 FCKeditor 소스를 받아야 하니까 아래 주소를 클릭해서 받아주시면 되겠습니다.
우리가 받을 파일은 두 가지 인데요, 첫 번째 파일은 FCKeditor소스파일입니다.
사실 이것만 있으면 FCKeditor를 사용할 수 있습니다.
두 번째 파일은 FCKeditor를 ASP.NET 서버컨트롤로 사용할 수 있도록 해주는 파일입니다.
FCKeditor 홈페이지에서 다운로드 하면 되겠습니다.
FCKeditor 2.6.6 다운로드
FCKeditor.Net 2.6.4 다운로드
위의 2개의 주소로 들어가서 해당 파일들을 다운받아 놓으시구요!
1. 첫번째로 프로젝트를 신규로 하나 만듭니다.
2. 신규프로젝트에 FCKeditor 2.6.6.zip의 압축을 푸시고 fckeditor폴더를 프로젝트에 붙여넣으세요~
3. 프로젝트에 FCKeditor.Net_2.6.4.zip의 압축을 푸시고 해당 프로젝트를 추가합니다.
머 만들어서 올라온 소스가 2003, 2005로 제작이 되어 있네요^^ 2008로 변경하실분들은 Visual Studio.Net에서
변환 하시면 되시겠죠?? ㅎㅎ
추가해 주신후에 [dll을 참조 추가] 해줘야 합니다.
아래 그림처럼 FCKeditor.Net 2.6.4 - bin - 2.0 - Release - FredCK.FCKeditorV2.dll를 참조 추가합니다.
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ; //말그대로 css경로
FCKConfig.DefaultLanguage = 'en'을 FCKConfig.DefaultLanguage = 'kr' ; (기본 언어한글로 변경)
FCKConfig.EnterMode = 'p' ;을 FCKConfig.EnterMode = 'br' ; (엔터키 누르면 br 입력)
FCKConfig.ToolbarCanCollapse = true ;의 true를 false로 바꾸기 (툴바 감추기)
FCKConfig.FontFormats = 'p;h1;h2;h3;h4;h5;h6;pre;address;div' ;
FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
FCKConfig.FontSizes = 'smaller;larger;xx-small;x-small;small;medium;large;x-large;xx-large' ;
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;
툴바에 표시할 버튼들인대 솔직히 다 쓸일이 거의 없어보인다. 필요한 부분만 골라서 쓰시길^^
5. 여기까지 셋팅이 되셨으면.. Web.Config파일을 열어서 FCKeditor의 내용을 추가해 보도록 할게요~
<appSettings><add key="FCKeditor:BasePath" value="/fckeditor/"/></appSettings>
이 부분을 추가해 주세요!
6. 자 그럼 이제 소스에 넣어서 FCKeditor가 잘 뜨는지 확인을 해볼까요??
소스에 아래처럼 넣습니다. 머 소스추가된거는 2줄이에요? 다들 아시죠? ㅎㅎ
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
<FCKeditorV2:FCKeditor ID="txtContent" runat="server" Width="650px" Height="500px"></FCKeditorV2:FCKeditor>
7. 이제 실행이 잘 되는지 한번 실행해 봅니다. 짜잔~~~ 나오네요 ^^
8. 본문 내용을 체크하고 싶으시면 아래와 같이 자바스크립트로 체크해 주시면 됩니다.
<script type="text/javascript">
function GoSubmit()
{
var content = FCKeditorAPI.GetInstance("<%=txtContent.ClientID%>").GetHTML(true);
if (content == "" || content == "<br />")
{
alert('내용을 입력해주세요.');
FCKeditorAPI.GetInstance("<%=txtContent.ClientID%>").Focus();
return false;
}
return false;
}
</script>
이렇게 해서 FCKeditor에 대해 알아봤구요~ 음.. FCKeditor는 skin도 적용을 할 수가 있네요~
이거를 지금 설명을 해야 할지 ~~ ㅎㅎ 아들이랑 놀아줘야 하건만 ㅋㅋㅋㅋ
스킨은 아래 사이트 들어가시면 Skin에 관한 소스를 받을 수가 있네요
http://www.saulmade.nl/FCKeditor/FCKSkins.php
9. 스킨을 적용시키기 위해 스킨을 다운받은후에 fckeditor > skins에 복사를 합니다.
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/famfamfamAluminum/';
이 부분을 변경해 주시면 아래와 같이 스킨이 변경이 되서 나오네요~ 머 취향에 맞게 사용하시면 될 듯 합니다^^
아 오랜만에 글을 올리니까 힘이 드네요 ㅎㅎ 다 아시는 내용일 수도 안쓰실수도 있지만 제가 회사에서
사용을 해서 ㅎㅎ 머 언젠가 한번은 써볼일이 생길 수도 있지 않을까요? ㅎㅎ
그럼 저는 이제 아들 옆에서 코~ 자야겠습니다.
다들 수고하시고 계속 업데이트 많이 할 수 있도록 노력할게요~
