라이믹스 1.8.27에서 테스트 했습니다.

 

tinymce_v1.5.zip

 

달라진점

1. TinyMCE 4.5.2 버전으로 교체 되었습니다.

2. XE 콤포넌트를 툴바에 표시하고 사용 가능 합니다.(모든 콤포넌트를 테스트 하지는 않았습니다)

3. 새 글 작성시 안내문구 설정 방식 변경되었습니다.

4. 에디터 스킨 버전을 1.5로 변경 했습니다. 기존에 공식 자료실에 TinyMCE 스킨이 배포된적이 있어서 업데이트 요청 메시지가 떠서 업데이트 메시지 안뜨도록 버전을 올렸습니다.

 

tiny1.jpg

배포된 에디터 스킨 사용시의 대략적인 레이아웃 입니다.

메뉴바는 안보이도록 했고 툴바또한 제가 대략 적으로 구성한 것이니 아래 링크 데모 페이지 참고 하셔서 플러그 인이나 툴바등은 다시 구성하셔서 사용 하시기 바랍니다.

https://www.tinymce.com/docs/demo/basic-example/

 

플러그인과 툴바 설정 방법

-플러그인

menubar: false,
plugins: [
  'placeholder emoticons',
      'advlist lists link image print searchreplace fullscreen code',
      'media table contextmenu paste textcolor colorpicker'
    ],

editor.html파일의 97번 라인 값을 true로 변경하면 메뉴바가 나타납니다.

98번 라인에 사용 유무에 따라 플러그인이 있으면 추가 삭제 하면 됩니다. 다만 placeholder는 유지 하시길 추천 합니다. 새글 작성시 안내 문구를 띄우는데 사용합니다.

 

-툴바

//에디터 기본 툴바 지정및 XE용 컴퍼넌트 버튼 추가
$__Context->toolbar = 'fontsizeselect | bold italic underline strikethrough | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table code | media image emoticons | fullscreen';

editor.html파일의 50번 라인에 툴바가 설정되어 있습니다. 이 곳에서 툴바에 표시할 버튼을 추가, 삭제 할 수 있습니다.

죄송하지만 개인 용도로 만들다보니 편한대로 php를 때려 박아서 가독성이 별로 안좋을 겁니다.

 

 

새글 작성시 안내문구 출력 설정 방법

;모든 설정값들은 줄바꿈 없이 한줄로 입력하세요.
;문자열은 큰따옴표로 감싸고 태그의 클래스나 스타일 지정시는 작은 따옴표를 사용하세요.

[options]
;글 작성시 안내문구 띄우기: 0-작동안함, 1-작동
act_placeholder = 1

;댓글에서 작동할지 결정: 0-작동안함, 1-작동
act_comment = 1

;모바일에서 작동할지 결정: 0-작동안함, 1-작동
act_mobile = 0

;모든 mid에서 작동 여부: 0-act_mid에 지정한 mid에서만 작동, 1-act_mid 설정에 상관없이 모든 mid에서 작동
act_allmid = 1

;기본 틀: TEXT자리에 지정한 안내 문구가 출력 됩니다.
default_form = "<div class='editor_ph'><div class='editor_ph_text'>TEXT</div><div class='editor_ph_bg'></div></div>"
;기본 안내 문구
default_text = "<h2>글을 작성하기 전 아래 내용을 확인 해 주세요</h2><p>1. 글 작성 전 <span style='color:#c9302c;'>공지사항</span>을 확인 해 주세요<br/>2. 게시판의 용도에 맞도록 글을 작성 해 주세요</p><p><span style='color:#ccc;'>/ 에디터 단축키 /</span><br/><span class='shortcut'>Ctrl+Shift+F 전체화면</span><span class='shortcut'>Ctrl+P 출력</span><span class='shortcut'>Ctrl+Z 실행취소</span><span class='shortcut'>Ctrl+Y 다시실행</span><br/><span class='shortcut'>Ctrl+C 복사하기</span><span class='shortcut'>Ctrl+X 잘라내기</span><span class='shortcut'>Ctrl+V 붙여넣기</span><span class='shortcut'>Ctrl+A 전체선택</span><br/><span class='shortcut'>Ctrl+B 글씨굵게</span><span class='shortcut'>Ctrl+I 글씨기울임</span><span class='shortcut'>Ctrl+U 글씨밑줄</span><span class='shortcut'>Ctrl+K 링크걸기</span><span class='shortcut'>Ctrl+F 찾아서 교체</span></p><h1>* 클릭하시면 이 안내는 사라집니다</h1>"

;댓글용 기본 틀: TEXT자리에 지정한 댓글 전용 안내 문구가 출력 됩니다.
comment_form = "<div class='editor_ph'><div class='editor_ph_text'>TEXT</div><div class='editor_ph_bg comment'></div></div>"
;댓글용 기본 안내 문구: 게시판 상관없이 하나의 문구만 지원 합니다.
comment_text = "<p>어떠한 경우에도 욕설이나 과도한 비난은 삼가주세요</p><h1>* 클릭하시면 이 안내는 사라집니다</h1>"


;게시판 마다 다른 안내 문구를 출력 할 수 있습니다.
;midName[form] = 안내문구의 틀을 새로 지정하거나 기본 틀을 사용할 수 있습니다
;값: default 또는 지정 안함 - 위에 지정한 기본 틀을 그대로 사용
;*** 틀을 새로 지정할때는 꼭 대문자 TEXT가 포함되어야 합니다. TEXT를 치환해서 안내문구를 출력 합니다.

;midName[text] = 게시판별 안내문구를 따로 지정할 수 있습니다
;값: default 또는 지정 안함 - 위에 지정한 기본 안내문구를 그대로 사용

[act_mid]
free[form] = "<div class='editor_ph'><div class='editor_ph_text'>TEXT</div></div>"
free[text] = "<p>자유게시판 입니다<br/>마음껏 사용하세요</p><h1>* 클릭하시면 이 안내는 사라집니다</h1>"
notice[text] ="<p>공지 작성공간<br/>단어선택 주의</p><h1>* 클릭하시면 이 안내는 사라집니다</h1>"

placeholder.ini파일을 열어서 새글 작성시 안내문구들을 설정 할 수 있습니다. 이 부분또한 사용자 편의성은 별로... ^^;

설정 값마다 코맨트를 달아놔서 설정에 별 어려움은 없으실것으로 생각됩니다.

 

 

imagetools플러그인 사용시 설정

tinymce에디터에는 간단하게 이미지를 수정할 수 있는 플러그인이 포함되어 있습니다. 해결하지 못한 문제점이 있어서 이번 릴리즈 버전에는 imagetools플러그인을 활성화 하지 않았습니다.

혹시 이 플러그인을 사용하실 분들은 img_handler.php를 열어서 설정을 하셔야 합니다.

$accepted_origins = array("http://localhost", "http://a3ghost.dyndns.org");

5번째 라인에 자신의 홈페이지 주소를 입력 해 주셔야 편집 이미지 저장이 가능합니다.

imagetools플러그인 사용시 문제점은 지난번 자료 배포글을 참고 해 주세요.

https://xetown.com/index.php?mid=lakepark&category=5952&document_srl=456196

 

Atachment
첨부
  • profile
    와우.. 이거슨!
  • profile
    수고하셨습니다. 그리고 감사합니다!!
  • ?
    감사합니다.
  • profile
    추천!
  • profile
    감사합니다~

    공홈을 살펴보니 에디터자체에 파일첨부가 가능한 샘플이 있군요.
    xe에서 쓰는건 아닌데 네이버스마트에디터를 버리고 갈아타볼까요...-0-;;;
  • profile profile
    에디터 자체에 파일 첨부가 가능하다라는 말씀이 어떤 의미인지 모르겠네요.
    링크좀 주실 수 있나요?
  • profile profile
    xe에서는 쓸일은 없습니다.
    전 자체 개발 게시판에 파일첨부를 해결하기 위해서 필요한거라서요~

    https://www.tinymce.com/docs/demo/file-picker/

    php업로더 부분 샘플은
    https://www.tinymce.com/docs/advanced/php-upload-handler/

    어렵지 않게 구현했습니다~
  • profile profile
    아! 무슨 말씀인지 이해 했습니다.
  • ?
    자료 잘 받아갑니다. 감사합니다.
  • profile

    모바일에서 이미지 소스를 입력하려고 <> 소스 버튼을 클릭하면요 팝업창이 뜨는데 가로 사이즈가 너무 커서 모바일에서 보면 잘리거든요. 팝업창 가로폭을 기기에 맞춰서 축소할 수 있는 방법이 있나요?

  • profile profile
    소스보기는 code플러그인이 담당하는데 살펴보니 code_dialog_width, code_dialog_height로 너비와 높이 조절 가능할꺼 같네요.
    code_dialog_width를 지정하지 않으면 기본 600이네요.
    tinymce.init 안쪽에 "code_dialog_width: 300"이런식으로 너비를 지정하시거나...

    modules/editor/skins/tinymce/js/tinymce/plugins/code/plugin.min.js를 열어서
    ("code_dialog_width",600) 코드를
    ("code_dialog_width",Math.min(tinymce.DOM.getViewPort().w,600)) 로 변경하시면...
    너비가 600보다 큰 화면에서는 600으로 보이고 그보다 작을때는 작은 화면에 맞춰서 조절 될꺼 같습니다.
  • profile
    자세한 설명 감사드립니다!
  • ?
    한가지 질문드립니다. 혹시 imagetools 플러그인 사용시 말씀하신 더미파일들 생성되는건 관리자페이지의 "파일"항목에는 안 나타나나요?
  • ? profile
    네 db에 기록하지않는 파일이기 때문에 나타나지 않습니다.
  • profile ?
    그렇군요.. 혹시

    https://github.com/rhymix/rhymix-docs/blob/master/ko/misc/crontab.md

    clean_garbage_files.php 이 스크립트를 실행하면 지워질까요?
  • ? profile
    아니요... 위 링크의 스크립트를 살펴보지는 않았지만 아마 지워지지 않을꺼라 생각합니다.
    또는 사용되는 정상적인(?)이미지까지 삭제해서 해당 게시물에서 이미지가 엑박으로 표시될수도 있을겁니다.
    xe나 라이믹스에서 정상적으로 생성하는 폴더에 이미지를 저장하는것이 아니니까요...
    편집된 이미지 처리방식에 아이디어가 있으시다면 말씀 해 주세요. 방법을 한번 생각 해 보겠습니다.
  • profile ?
    음.. 그렇군요. 사실 이거 해결하려면 네이버 업로더처럼 편집 과정까지는 저장을 안 하고 등록할 때 저장하도록 해야 할텐데 그게 가능한지도 모르겠네요.
  • ?
    http://ckeditor.com/addon/imagerotate

    ck에디터 플러그인 중에 이미지 회전 플러그인을 보니 이미지를 데이터 url의 형태로 변환해서 저장하네요. 이렇게 하면 변환된 데이터를 따로 서버에 저장할 필요는 없을 거 같네요.
  • ? profile
    아!! 이전 버전 배포 게시글에는 설명을 해놨었는데 수정된 이미지를 파일로 저장하지않고 data uri로 처리하는 방법은 이미 구현되어 있습니다. editor.html 을 열어서 (명확하지는 않은데) 200라인 이후 살펴보시면 /**/로 주석 처리되어 있는 images_upload_handler가 있을겁니다.
    "//이미지 업로드 안함, base64 인코딩 문자열 반환"이라는 코맨트 달려있구요..
    그 부분을 주석제거 하시고 그 아래에 선언되어있는(파일을 실제로 업로드하는) images_upload_handler를 주석처리 하시면 됩니다.
  • profile ?
    아 이거 생각해보니 DB 용량이 어마어마하게 늘어나겠네요;;

    다 장단점이 명확하네요. 편집할땐 데이터 URL로 편집하고 등록 시에 첨부파일로 변환된다면 좋겠지만 이런건 힘들 거 같고..
  • ? profile
    네, 그래서 주석처리 하고 게시글에 설명을 덧붙여놨었던 기억이 있습니다. 실제 테스트 해보니 다량의 이미지나 대용량의 이미지의경우 태그가 매우 길어져서 에디터 성능에까지 영향을 끼쳤던 것으로 기억합니다.
  • profile
    안녕하세요!
    좋은 에디터 공개해주셔서 정말 감사드립니다.
    다름이 아니고 파일을 첨부하려 했는데 파일첨부가 안되서 이렇게 여쭤봅니다.
    xe 1.8.24이구요
    레이아웃이랑 게시판 스킨 모두 변경해도 증상이 같더라구요.
    올릴수 있는 파일이 0m로 나오더라구요
    파일선택은 가능한데 파일선택후 파일 업로딩이 이루어 지지 않습니다!
    ㅠ_ㅠ


    파일 첨부 파일 선택 파일 크기 제한 : 0MB (허용 확장자 : *.*)
  • profile

    에디터 정말 감사하게 잘 사용하고 있습니다!

    근데 사용하면서 제가 인용구 기능을 따로 넣고 싶어서 그러는데요 (글접기 펴기 기능)
    관련 컴퍼넌트를 다운 받았거든요? 툴바에 인용구 넣는 아이콘은 나오는데 정작 글접기 기능이 적용되지는 않아요. ㅠㅠ 왜 그러는걸까요? 인용구 태그를 인식을 못하는것 같기도 해요 ㅠㅠ
    이거 에디터로 제가 따로 그 기능을 어케 넣어줘야 하는건가요?

    며칠전에 질문답변 게시판에 적었던 글이 이건데 저 나름대로 찾아봤는데 도무지 모르겠어가지고요... ㅠㅠ
    흐규
    https://xetown.com/index.php?mid=qna&search_target=nick_name&search_keyword=%EC%9D%B4%EB%B8%8C%EC%9D%B4&document_srl=600440

  • profile
    @prologos님 위 첨부자료에 UNDO버튼 추가와 글꼴선택버튼 추가, autoresize기능추가에 대한 설명 부탁드립니다~ autoresize 플러그인 기능을 넣을 경우 라이믹스에서 설정된 사이즈보다 축소되서 나오더라구요.