그러냐

tinymce 에디터 설치.. 본문

javascript

tinymce 에디터 설치..

관절분리 2016. 1. 27. 18:22
반응형

출처 forioso님의 블로그 | 사랑굳
원문 http://blog.naver.com/forioso/10125901026
 

asp.net 에서 ckeditor, ckfinder 설치 설정

예전에 fckeditor라는 웹에디터가 인기를 끌었다. 그때당시 기능적이나 안정적으로 최고였다고 볼수 있다. fckeditor이 버젼업 되면서 ckeditor로 바뀌었다. 라이센스와 코어를 다시 작성한듯 싶다. 아마도 웹표준에 충실하기 위해 다시 만든듯 싶다. 다시 ckeditor이 각광 받는 이유는 웹표준에 상당히 충실하다. 다른 웹에디터로 파이어폭스나 크롬에서 운영하다 보면 각종 태그나 오류등을 심심치 않게 볼수 있다.

ckeditor 다운로드 http://www.ckeditor.com/download
ckfinder 다운로드 http://www.ckfinder.com/download

(현재 설치버젼 ckeditor 3.6.1 ckfinder 2.0.2.1) 둘다 asp.net버젼으로 받아야 한다. 젤 먼저 web.config 추가
view plainprint?
  1. <system.web>
  2. <pages>
  3. <controls>
  4. <add tagPrefix="CKEditor" assembly="CKEditor.NET" namespace="CKEditor.NET"/>
  5. </controls>
  6. </pages>
  7. </system.web>
두 파일 압축을 해제한다. 두 개의 받은 파일에 보면 bin폴더에 CKEditor.NET.dll와 CKFinder.dll이 있다. 않에 디버깅 폴더말고 릴리즈에 있는 dll을 가지고 온다. 설치할 사이트에 bin폴더를 추가해서 카피를 하던가 참조하는 방식으로 가지고 와도 된다.(사이트에 루트에 bin에 dll를 설치 하고 각 폴더에 존재하는 bin폴더등은 지우는게 좋다. 오류가 발생할수 있다.) 압축을 푼 ckeditor는 sample이라는 폴더에 ckeditor이라는 폴더만 사이트에 루트에 카피한다. ckfinder 푼상태서 루트에 ckfinder라고 존재하면 된다.
webeditTest.aspx
view plainprint?
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="webeditTest.aspx.cs" Inherits="CKEditor_test" %>
  2. <%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <title></title>
  7. <script type="text/javascript">
  9. // 내용체크
  10. function submitCheck() {
  11. if (CKEDITOR.instances.<%=ctlCkeditor.ClientID%>.getData() == "") {
  12. alert('내용을 입력해 주세요.');
  13. CKEDITOR.instances.<%=ctlCkeditor.ClientID%>.focus();
  14. return false;
  15. }
  17. return true;
  18. }
  19. </script>
  20. </head>
  21. <body>
  22. <form id="form1" runat="server">
  23. <div>
  24. <CKEditor:CKEditorControl ID="ctlCkeditor" runat="server"></CKEditor:CKEditorControl>
  25. </div>
  26. <div>
  27. <asp:Button ID="btnSave" Text="저장" runat="server" OnClientClick="return submitCheck();" onclick="btnSave_Click" />
  28. </div>
  29. </form>
  30. </body>
  31. </html>
webeditTest.aspx.cs
view plainprint?
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  8. public partial class CKEditor_test : System.Web.UI.Page
  9. {
  10. protected void Page_Load(object sender, EventArgs e)
  11. {
  12. ctlCkeditor.config.language = "ko"; //언어설정
  13. ctlCkeditor.config.enterMode = CKEditor.NET.EnterMode.BR; // 엔터키 입력시 br태그 삽입
  14. // font종류에 한글폰트 포함
  15. ctlCkeditor.config.font_names = @"굴림/Gulim;돋음/Dotum;바탕/Batang;궁서/
  16. Gungsuh;Arial/Arial;Tahoma/Tahoma;Verdana/Verdana";
  17. // 툴바 설정 대충 샘풀이라구 보면 된다. 없애면 전체 툴바가 다 나타난다.
  18. ctlCkeditor.config.toolbar = new object[]
  19. {
  20. new object[] { "Source"},
  21. new object[] { "Font", "-", "FontSize"},
  22. new object[] { "Bold", "Italic", "Underline", "Strike","TextColor","BGColor" },
  23. new object[] { "JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"},
  24. new object[] { "Undo","Redo","-", "Link", "Unlink","Table","Image" },
  25. };
  27. // ckfinder 설정 경로만 두곳의 경로만 잡아주면 된다.
  28. ctlCkeditor.config.filebrowserImageBrowseUrl = "/ckfinder/ckfinder.html?type=Images";
  29. ctlCkeditor.config.filebrowserImageUploadUrl = "/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images";
  31. }
  33. protected void btnSave_Click(object sender, EventArgs e)
  34. {
  35. // 컨트롤 값을 가지고 오는 방법과 동일
  36. Response.Write(ctlCkeditor.Text);
  37. }
  38. }

ckfinder 폴더에 보면 config.ascx 열면 CheckAuthentication라는 메서드가 있다. 거기에 return 값을 true로 바꾸어 준다.
자세한 설정사항은 http://docs.cksource.com/ 을 참조하면 된다.

ps : fckeditor 와 ckeditor은 유료 라이센스가 변경 되었습니다. tinymce 에디터는 무료이니 참조하세요.

 

 

 

 

asp.net tinymce 에디터 설치,설정 이미지 업로드 구현

무료에디터로는 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&pr_id=1

설치버전은 3.4.6 젤 위에 기본버전과 랭귀지 팩도 받는다.

설치
받은 파일 압축을 풀면 examples와 jscripts 두 개의 폴더가 나온다. 예제폴더와 jscripts폴더 않 의 tiny_mce는 에디터파일 일단 tiny_mce폴더를 웹사이트 임의의 공간에 복사한다. 웹 에디터 폴더라 볼 수 있다. 받은 랭귀지 팩 파일 압축을 풀어 같은 폴더 끼리 덮어 쒸운다. langs, plugins themes 세 폴더가 덮어 쒸어 질꺼다. 일단 설치는 완료

설정
tinymce는 ckeditor이나 fckeditor처럼 각각의 웹 언어로 된 설정 파일이 없다. 일일이 폼에 자바스크립터를 설정 불러와 써야한다.

자바스크립터 부분
view plainprint?
  1. tinyMCE.init({
  2. language:"ko",
  3. mode: "exact",
  4. elements: "<%=TxtContent.ClientID%>",
  6. // 엔터시 br 버그있음 개행시 커서는 넘어가나 마우스포인터가 남아있다
  7. force_br_newlines: true,
  8. force_p_newlines: false,
  9. theme: "advanced",
  10. //skin: "o2k7",
  11. //skin_variant: "silver",
  12. 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",
  13. theme_advanced_path: false,
  15. //IE에서 한글입력 문제 해결을 위해서
  16. forced_root_block: false,
  17. //에디터 너비 높이 설정
  18. height: "330",
  19. width: "790",
  21. //에디터 버튼 예제 full.html을 보고 전부사용해두 되고 사용할꺼만 골라 쓰면 된다.
  22. 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",
  23. theme_advanced_buttons2: "tablecontrols,|,imgUp,code",
  24. theme_advanced_buttons3 : "",
  25. theme_advanced_buttons4 : "",
  26. theme_advanced_toolbar_location : "top",
  27. theme_advanced_toolbar_align : "left",
  28. theme_advanced_statusbar_location : "bottom",
  29. theme_advanced_resizing : false,
  31. // example 폴더 css에 있는 css파일을 갖다 쓴다.
  32. // 에디터 폼않에 스타일을 설정하는 파일이다.
  33. content_css: "/tiny_mce/commons/css/content.css",
  35. // Drop lists for link/image/media/template dialogs
  36. template_external_list_url: "lists/template_list.js",
  37. external_link_list_url: "lists/link_list.js",
  38. external_image_list_url: "lists/image_list.js",
  39. media_external_list_url: "lists/media_list.js",
  41. // Style formats
  42. style_formats: [
  43. { title: 'Bold text', inline: 'b' },
  44. { title: 'Red text', inline: 'span', styles: { color: '#ff0000'} },
  45. { title: 'Red header', block: 'h1', styles: { color: '#ff0000'} },
  46. { title: 'Example 1', inline: 'span', classes: 'example1' },
  47. { title: 'Example 2', inline: 'span', classes: 'example2' },
  48. { title: 'Table styles' },
  49. { title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}],
  51. //에디터에 사용할 폰트 지정
  52. 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",
  54. // Replace values for the template plugin
  55. template_replace_values: {
  56. username: "Some User",
  57. staffid: "991234"
  58. },
  60. setup : function(ed) {
  61. // 이미지 업로드 창
  62. ed.addButton('imgUp', {
  63. title : '이미지넣기',
  64. image: '/tiny_mce/commons/img/image.gif',
  65. onclick : function() {
  66. winOpen(400, 300, "/tiny_mce/commons/ImgPop.aspx", "imgPop");
  67. }
  68. });
  70. // 수정시 에디터에 값넣기 setContent않에
  71. ed.onLoadContent.add(function (ed, o) {
  72. ed.focus();
  73. tinyMCE.activeEditor.setContent("");
  74. });
  75. }
  77. });
  79. /* 원하는 사이즈로 팝업열기 */
  80. function winOpen(w, h, url, winName) {
  81. var x = (screen.width - w) / 2 - 10;
  82. var y = (screen.height - h) / 2 - 10;
  83. var exp = "width=" + w + ", height=" + h + ", top=" + y + ",left=" + x +
  84. ", status=yes, resizable=no, toolbar=no, scrollbars=no ";
  85. var wopen = window.open(url, winName, exp);
  86. wopen.focus();
  87. x = null, y = null, exp = null, wopen = null;
  88. }
  90. /* 공백 검사 */
  91. function isNull(s) {
  92. if (s.replace(/(^\s*)|(\s*$)/g, "") && s != null) {
  93. return false;
  94. } else {
  95. return true;
  96. }
  97. }
  99. /* 입력검사 */
  100. function checkEdit() {
  101. if (isNull(document.getElementById("<%=TxtSubject.ClientID%>").value) == true) {
  102. alert("제목을 입력하세요!!");
  103. document.getElementById("<%=TxtSubject.ClientID%>").focus();
  104. return false;
  105. }
  107. if (isNull(tinyMCE.get("<%=TxtContent.ClientID%>").getContent()) == true) {
  108. alert("내용을 입력하세요!!");
  109. tinyMCE.get("<%=TxtContent.ClientID%>").focus();
  110. return false;
  111. }
  113. return true;
  114. }
html부분
view plainprint?
  1. <form id="form1" runat="server">
  2. <div>
  3. <asp:TextBox ID="TxtSubject" runat="server" Width="576px"></asp:TextBox>
  4. </div>
  5. <div>
  6. <asp:TextBox ID="TxtContent" runat="server" Rows="15" Columns="80"
  7. TextMode="MultiLine"></asp:TextBox>
  8. </div>
  9. <asp:Button ID="ButSubmit" runat="server" Text="확인" OnClientClick="return checkEdit();"
  10. onclick="ButSubmit_Click" />
  11. </form>

일단 이렇게 하고 실행시켜 보라. 이쁘게 뜨지 않는가? 근데 약간 이상한 부분이 있다.
웬지 한글이 어색하고 그런 느낌? 그렇다 역쉬 양키들이 만든거라 한글폰트와 사이즈 설정이 않되어 있다. 자바스크립터 설정부분에 지정한 content.css와 themes/advanced/skins/보면 각 폴더에 dialog.css가 있다.(dialog.css는 설정에서 쓰는 스킨을 수정해야함)
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; 이 부분을 돋음,굴림,바탕
폰트사이즈 12px를 기본으로 바꾸주어야 한다.(대부분 기본 폰트사이즈는 10px맞추어 줘 있음 한글은 12px이상으로 해야 깨지지 않음 스타일에 폰트사이즈는 2px씩 올려주면 됨)에디터로 열고 바꾸기 한번 쭉 바꿔주던가 한다.
이렇게 수정 후 다시 실행해 보면 한글도 아주 이쁘게 들어가 있다. 이로서 한글화 작업및 웹에디터 설정은 끝났다. 다음은 이미지 업로드 부분이다.

tinymce도 ckeditor가 마찬가지로 이미지및 파일 업로드는 유료 라이센스이다. ckeditor는 다르게 사용자 정의로 이미지 업로드 구현하는거를 편하게 해놓았다. 위에 설정에 보면 간단하게 아이콘파일 지정과 팝업 파일 경로만 지정하면 에디터 내에서 이쁘게 팝업을 띄운다.
ImgPop.aspx
view plainprint?
  1. <form id="ImgUpFrm" method="post" enctype="multipart/form-data" runat="server">
  2. <div>
  3. 이미지파일 (.gif, .jpg, .png) 만 업로드 가능합니다.</p>
  4. <asp:FileUpload ID="Fu1" runat="server" />
  5. </p>
  6. 정렬 :
  7. <asp:RadioButtonList ID="RblAlign" runat="server" Width="223px">
  8. <asp:ListItem Value="left">왼쪽</asp:ListItem>
  9. <asp:ListItem Value="center" Selected="True">가운데</asp:ListItem>
  10. <asp:ListItem Value="right">오른쪽</asp:ListItem>
  11. </asp:RadioButtonList>
  12. </div>
  13. <asp:Button ID="BtnUpload" runat="server" Text="업로드" OnClientClick="return checkImg()"
  14. onclick="BtnUpload_Click" />
  15. <asp:Button ID="BtnClose" runat="server" Text="취소" OnClientClick="window.close();" />
  16. </form>
ImgPop.aspx.cs
view plainprint?
  1. protected void BtnUpload_Click(object sender, EventArgs e)
  2. {
  3. const string SavePath = "D:\\uploadTest\\";
  4. const string WebPath = "/imgUp/";
  6. if (Fu1.HasFile)
  7. {
  8. string FileName = Server.HtmlEncode(Fu1.FileName);
  9. string Extension = System.IO.Path.GetExtension(FileName);
  11. // 확장자 검사
  12. if ((Extension == ".jpg") || (Extension == ".gif") ||
  13. (Extension == ".jpeg") || (Extension == ".png"))
  14. {
  15. // 파일 저장
  16. Fu1.SaveAs(SavePath + FileName);
  18. // 이미지 가로,세로
  19. System.Drawing.Size ImgSize =
  20. System.Drawing.Image.FromFile(SavePath + FileName).Size;
  21. int ImgWidth = ImgSize.Width;
  22. int ImgHeight = ImgSize.Height;
  24. // 이미지 태그 작성
  25. string TagStyle = "width: " + ImgWidth + "px; height: " +
  26. ImgHeight + "px; ";
  27. if (RblAlign.SelectedValue != "center")
  28. {
  29. TagStyle += "float: " + RblAlign.SelectedValue + ";";
  30. }
  31. string TagContent =
  32. string.Format("<img src=\"{0}\" style=\"{1}\" alt=\"{2}\" />",
  33. WebPath + FileName,
  34. TagStyle,
  35. FileName);
  37. // api호출하여 이미지 태그 인서트
  38. ScriptManager.RegisterStartupScript(this, this.GetType(), "",
  39. "window.opener.tinyMCE.execCommand('mceInsertContent', false, '"
  40. + TagContent + "'); window.close();", true);
  41. }
  42. else
  43. {
  44. ScriptManager.RegisterStartupScript(this, this.GetType(), "",
  45. "alert('이미지파일(gif,jpg,png)만 업로드 가능합니다!!');", true);
  46. }
  47. }
  48. else
  49. {
  50. ScriptManager.RegisterStartupScript(this, this.GetType(), "",
  51. "alert('업로드 할 파일을 선택해 주세요!!');", true);
  52. }
  53. }


소스를 설명하자면 이미지 업로드 후 tinymce의 api를 이용하여 간단하게 업로드된 이미지 태그만
에디터내에 삽입한다. 이 부분 examples예제를 보면 간단하게 api를 이용하는 방법이 나와있다.

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

 

 

 

TinyMCE 적용 예제

작성일 : 2011/10/18 14:48

무료 웹에디터 중에서 실무에 적용할 만한 것은 TinyMCE가 아닐까 생각한다.

국내에서도 Web2.0 바람이 불 때 다음 오픈 에디터와 네이버 스마트 에디터가 공개 되어 기대를 했건만 자체 서비스에서만 업데이트하고 공개버전은 업데이트 진행이 거의 없다. 개발자를 끌어 모으기에 좋은 기회인 듯 한데 아쉽다.

TinyMCE 초기화 및 세팅

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script type="text/javascript" src="/Content/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        // General options
        mode: "exact",
        elements: "txtContent",
        theme: "advanced",
        plugins: "inlinepopups,preview,advlink",
       
        // Theme options
        theme_advanced_buttons1: "fontselect,fontsizeselect,separator,forecolor,backcolor,separator,bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink,separator,code,preview",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing: true,
        theme_advanced_resize_horizontal: false,
        theme_advanced_resizing_use_cookie: false,
        theme_advanced_fonts: "맑은고딕='malgun gothic';굴림=굴림;돋음=돋음;바탕=바탕;궁서=궁서;Arial=Arial;Times=Times;Verdana=Verdana",
                                           
        // Example content CSS (should be your site CSS)
        content_css: "/Content/tiny_mce/tiny_mce.css",
        popup_css_add: "/Content/tiny_mce/tiny_mce_popup.css",
        // Extended options
        extended_valid_elements: "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
        height: "320px",
        plugin_preview_width: "680px",
        plugin_preview_height: "600px",
        tab_focus: ":prev,:next",
        relative_urls: false,
        //forced_root_block: "p",
        forced_root_block : false,
        language: "ko"
    });
</script>
<textarea id="txtContent" name="txtContent" rows="10" cols="10" tabindex="1"></textarea>

forced_root_block 은 IE 한글 문제로 인해 false로 세팅

TinyMCE 입력 값 확인

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
    function submit_valide() {
        tinyMCE.triggerSave();
        if ($("#txtContent").val().length == 0) {
            alert("입력값이 없습니다.");
            return false;
        }
        return true;
    }      
</script>

입력 값 확인 전 tinyMCE.triggerSave(); 가 핵심

적용 예제 - http://dev.zeiz.com/javascript/tinymce

 

TinyMCE 한글 적용 및 팝업 수정

작성일 : 2011/04/01 16:01

무료 웹에디터 중에서 최고는 TinyMCE가 아닐까 생각한다.

처음부터 Javascript 기반으로 제작되었고, 거의 대부분 브라우저를 지원하고, 웹표준 코딩을 잘 지원하고, 지속적인 업데이트를 통해 신기술의 버그를 줄여나가고 있다.

요즘은 국내에서도 네이버와 다음이 웹에디터를 공개했지만 한글을 완벽히 지원한다는 장점 이외에는 아직까지 TinyMCE를 버릴만한 매력은 느끼지 못하고 있다.

그러나 TinyMCE의 가장 큰 문제는 한글이다.

언어팩으로 한글을 적용하고 팝업을 실행하면 정말 난감하다. 사용하는 플러그인 폴더의 스타일시트를 수정해도 되지만 팝업 스타일을 추가해주는 설정 기능을 이용해 보자.

일단 한글팩을 다운받아 복사하고,

TinyMCE를 초기화하는 곳에 한글설정 및 팝업스타일 설정을 정의하고,

1
2
3
4
5
6
tinyMCE.init({
    //한글적용
    language: "ko",
    //팝업스타일추가
    popup_css_add: "/tiny_mce/tiny_mce_popup.css"
});

해당 팝업 스타일에 폰트사이즈를 강제로 적용한다.

1
div,table,th,td,form,fildset,legend,input,textarea,a,button,select,label{ font-size:12px !important; }


(한글 및 폰트사이즈 적용된 팝업 레이어)

 

 

 

 

한글 br 태그 문제 수정은

forced_root_block : false,

 

   force_br_newlines : true,

   force_p_newlines : false,

를 추가한다.




 

 

 

[출처] tinymce 에디터 설치..|작성자 사랑굳

[출처] [링크스크랩] tinymce 에디터 설치..|작성자 관절분리

 

반응형
저작자표시

'javascript' 카테고리의 다른 글

유투브 외부제어  (0) 2016.01.27
모바일 웹 기기 식별하기  (0) 2016.01.27
자바스크립트 현재시간 구하기  (0) 2016.01.27
Full-screen window open  (0) 2016.01.27
자바스크립트 기능반복하기 (타이머)  (0) 2016.01.27
'javascript' Related Articles more