tinymce 에디터 설치..

tinyMCE.init({ language: "ko" , mode: "exact" , elements: "<%=TxtContent.ClientID%>" , force_br_newlines: true , force_p_newlines: false , theme: "advanced" , plugins: "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosave" , theme_advanced_path: false , forced_root_block: false , height: "330" , width: "790" , theme_advanced_buttons1: "formatselect,fontselect,fontsizeselect,bold,italic,underline,strikethrough,forecolor,backcolor,sub,sup,|,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,outdent,indent,|,blockquote,link,unlink,charmap,search" , theme_advanced_buttons2: "tablecontrols,|,imgUp,code" , theme_advanced_buttons3 : "" , theme_advanced_buttons4 : "" , theme_advanced_toolbar_location : "top" , theme_advanced_toolbar_align : "left" , theme_advanced_statusbar_location : "bottom" , theme_advanced_resizing : false , content_css: "/tiny_mce/commons/css/content.css" , template_external_list_url: "lists/template_list.js" , external_link_list_url: "lists/link_list.js" , external_image_list_url: "lists/image_list.js" , media_external_list_url: "lists/media_list.js" , style_formats: [ { title: 'Bold text' , inline: 'b' }, { title: 'Red text' , inline: 'span' , styles: { color: '#ff0000' } }, { title: 'Red header' , block: 'h1' , styles: { color: '#ff0000' } }, { title: 'Example 1' , inline: 'span' , classes: 'example1' }, { title: 'Example 2' , inline: 'span' , classes: 'example2' }, { title: 'Table styles' }, { title: 'Table row 1' , selector: 'tr' , classes: 'tablerow1' }], theme_advanced_fonts: "굴림=굴림;굴림체=굴림체;궁서=궁서;궁서체=궁서체;돋움=돋움;돋움체=돋움체;바탕=바탕;바탕체=바탕체;Arial=Arial; Comic Sans MS='Comic Sans MS';Courier New='Courier New';Tahoma=Tahoma;Times New Roman='Times New Roman';Verdana=Verdana" , template_replace_values: { username: "Some User" , staffid: "991234" }, setup : function (ed) { ed.addButton( 'imgUp' , { title : '이미지넣기' , image: '/tiny_mce/commons/img/image.gif' , onclick : function () { winOpen(400, 300, "/tiny_mce/commons/ImgPop.aspx" , "imgPop" ); } }); ed.onLoadContent.add( function (ed, o) { ed.focus(); tinyMCE.activeEditor.setContent( "" ); }); } }); function winOpen(w, h, url, winName) { var x = (screen.width - w) / 2 - 10; var y = (screen.height - h) / 2 - 10; var exp = "width=" + w + ", height=" + h + ", top=" + y + ",left=" + x + ", status=yes, resizable=no, toolbar=no, scrollbars=no " ; var wopen = window.open(url, winName, exp); wopen.focus(); x = null , y = null , exp = null , wopen = null ; } function isNull(s) { if (s.replace(/(^\s*)|(\s*$)/g, "" ) && s != null ) { return false ; } else { return true ; } } function checkEdit() { if (isNull(document.getElementById( "<%=TxtSubject.ClientID%>" ).value) == true ) { alert( "제목을 입력하세요!!" ); document.getElementById( "<%=TxtSubject.ClientID%>" ).focus(); return false ; } if (isNull(tinyMCE.get( "<%=TxtContent.ClientID%>" ).getContent()) == true ) { alert( "내용을 입력하세요!!" ); tinyMCE.get( "<%=TxtContent.ClientID%>" ).focus(); return false ; } return true ; }

< form id = "form1" runat = "server" > < div > < asp:TextBox ID = "TxtSubject" runat = "server" Width = "576px" > < div > < asp:TextBox ID = "TxtContent" runat = "server" Rows = "15" Columns = "80" TextMode = "MultiLine" > < asp:Button ID = "ButSubmit" runat = "server" Text = "확인" OnClientClick = "return checkEdit();" onclick = "ButSubmit_Click" />

< form id = "ImgUpFrm" method = "post" enctype = "multipart/form-data" runat = "server" > < div > 이미지파일 (.gif, .jpg, .png) 만 업로드 가능합니다. < asp:FileUpload ID = "Fu1" runat = "server" /> 정렬 : < asp:RadioButtonList ID = "RblAlign" runat = "server" Width = "223px" > < asp:ListItem Value = "left" > 왼쪽 < asp:ListItem Value = "center" Selected = "True" > 가운데 < asp:ListItem Value = "right" > 오른쪽 < asp:Button ID = "BtnUpload" runat = "server" Text = "업로드" OnClientClick = "return checkImg()" onclick = "BtnUpload_Click" /> < asp:Button ID = "BtnClose" runat = "server" Text = "취소" OnClientClick = "window.close();" />

protected void BtnUpload_Click( object sender, EventArgs e) { const string SavePath = "D:\\uploadTest\\" ; const string WebPath = "/imgUp/" ; if (Fu1.HasFile) { string FileName = Server.HtmlEncode(Fu1.FileName); string Extension = System.IO.Path.GetExtension(FileName); if ((Extension == ".jpg" ) || (Extension == ".gif" ) || (Extension == ".jpeg" ) || (Extension == ".png" )) { Fu1.SaveAs(SavePath + FileName); System.Drawing.Size ImgSize = System.Drawing.Image.FromFile(SavePath + FileName).Size; int ImgWidth = ImgSize.Width; int ImgHeight = ImgSize.Height; string TagStyle = "width: " + ImgWidth + "px; height: " + ImgHeight + "px; " ; if (RblAlign.SelectedValue != "center" ) { TagStyle += "float: " + RblAlign.SelectedValue + ";" ; } string TagContent = string .Format( "" , WebPath + FileName, TagStyle, FileName); ScriptManager.RegisterStartupScript( this , this .GetType(), "" , "window.opener.tinyMCE.execCommand('mceInsertContent', false, '" + TagContent + "'); window.close();" , true ); } else { ScriptManager.RegisterStartupScript( this , this .GetType(), "" , "alert('이미지파일(gif,jpg,png)만 업로드 가능합니다!!');" , true ); } } else { ScriptManager.RegisterStartupScript( this , this .GetType(), "" , "alert('업로드 할 파일을 선택해 주세요!!');" , true ); } }

무료에디터로는 fckeditor와 아들격인 ckeditor 를 줄창 잘 써왔다. 그런데 이게 상업적인 용도는 대금을 지불하는 방식으로 라이센스가 바꿨다. 아 이제 버그 다 잡고 쓸만하니깐 유료가 된 셈이다. 이제동안 써 온 노하우(?)가 있는데 정말 아쉽다.그러나 언제나 무료 라이센스는 있는 법 tinymce가 있었다. 전에 한번 프로젝트에서 쓸 기회가 있었는데 그 당시 버전이 버그가 있었나 해서 않 써왔다가 이번에 다시 깔아 쓰니 웹표준도 철저히 지켰고 아주 참신하고 괜찮아 졌다고 할까. 근데 초기 설정은 약간 많은 편 ckeditor에 비해 약간 어수선하고 정리가 않 된 느낌은 있다.(라이센스는 LGPL)에디터에 아이콘은 ckeditor보다 나은거 같다. 그러나 이것도 쓰다보면 만만치 않게 버그가 나오리라 본다. 사용자 정의 옵션을 주거나 한글화 시키는 부분은 오히려 ckeditor보다 더 뛰어나다. 로딩속도는 약간 떨어지는거 같다.다운로드 : http://www.tinymce.com/download/download.php 랭귀지 팩 : http://www.tinymce.com/i18n/index.php?ctrl=lang&act;=download≺_id=1 설치버전은 3.4.6 젤 위에 기본버전과 랭귀지 팩도 받는다.받은 파일 압축을 풀면 examples와 jscripts 두 개의 폴더가 나온다. 예제폴더와 jscripts폴더 않 의 tiny_mce는 에디터파일 일단 tiny_mce폴더를 웹사이트 임의의 공간에 복사한다. 웹 에디터 폴더라 볼 수 있다. 받은 랭귀지 팩 파일 압축을 풀어 같은 폴더 끼리 덮어 쒸운다. langs, plugins themes 세 폴더가 덮어 쒸어 질꺼다. 일단 설치는 완료tinymce는 ckeditor이나 fckeditor처럼 각각의 웹 언어로 된 설정 파일이 없다. 일일이 폼에 자바스크립터를 설정 불러와 써야한다.일단 이렇게 하고 실행시켜 보라. 이쁘게 뜨지 않는가? 근데 약간 이상한 부분이 있다.웬지 한글이 어색하고 그런 느낌? 그렇다 역쉬 양키들이 만든거라 한글폰트와 사이즈 설정이 않되어 있다. 자바스크립터 설정부분에 지정한 content.css와 themes/advanced/skins/보면 각 폴더에 dialog.css가 있다.(dialog.css는 설정에서 쓰는 스킨을 수정해야함)이 부분을 돋음,굴림,바탕폰트사이즈 12px를 기본으로 바꾸주어야 한다.(대부분 기본 폰트사이즈는 10px맞추어 줘 있음 한글은 12px이상으로 해야 깨지지 않음 스타일에 폰트사이즈는 2px씩 올려주면 됨)에디터로 열고 바꾸기 한번 쭉 바꿔주던가 한다.이렇게 수정 후 다시 실행해 보면 한글도 아주 이쁘게 들어가 있다. 이로서 한글화 작업및 웹에디터 설정은 끝났다. 다음은 이미지 업로드 부분이다.tinymce도 ckeditor가 마찬가지로 이미지및 파일 업로드는 유료 라이센스이다. ckeditor는 다르게 사용자 정의로 이미지 업로드 구현하는거를 편하게 해놓았다. 위에 설정에 보면 간단하게 아이콘파일 지정과 팝업 파일 경로만 지정하면 에디터 내에서 이쁘게 팝업을 띄운다.

소스를 설명하자면 이미지 업로드 후 tinymce의 api를 이용하여 간단하게 업로드된 이미지 태그만

에디터내에 삽입한다. 이 부분 examples예제를 보면 간단하게 api를 이용하는 방법이 나와있다.

아까 설정에 주석에두 나와있듯이 개행기 br태그로 되는부분이 버그가 있다. 버그 히스토리에도 보면 고쳤다고 나와있는데 혹시 그 부분이 걸리면 예전 버전을 써 보시기 바란다. 그 부분을 주석으로 막으면 p태그로 되는데 그냥 쓰셔두 상관은 없다. 개행 간격이 넗다고 느끼시는 분은 스타일에서 content.css에서 p태그의 간격을 0으로 하시면 된다. (이 에디터도 여타의 에디터와 같이 개행설정을 하지 않으면 엔터시 p태그 shfit+엔터는 br태그이다.) 써 보니 오히려 ckeditor보다 좋은거 같다. 약간 잘잘한 설정이 많기는 하지만 어짜피 한번만 하면 끝이다. 커스텀한 설정으로 에디터에 버튼이나 api이용하면 상용에디터 못지 않게 꾸밀 수 있는 기능이 많이 존재한다.

from http://sd23w.tistory.com/77 by ccl(A) rewrite - 2020-03-07 02:22:02