XETOWN

호수 공원

XE 사용에 대한 여러가지 정보들을 공유할 수 있습니다.
조회 수 383 추천 수 5 댓글 23
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

라이믹스 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://www.xetown.com/index.php?mid=lakepark&category=5952&document_srl=456196

 

  • profile
    GG 2017.01.20 00:22:56
    와우.. 이거슨!
  • profile
    구큰타 2017.01.20 00:27:50
    수고하셨습니다. 그리고 감사합니다!!
  • ?
    칼럼 2017.01.20 01:01:53
    감사합니다.
  • profile
    Novelic 2017.01.20 08:26:42
    추천!
  • profile
    Chronos 2017.01.20 08:40:14
    최고네요!
  • profile
    Double'U' 2017.01.20 09:58:01
    감사합니다~

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

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

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

    어렵지 않게 구현했습니다~
  • profile
    prologos 2017.01.20 18:24:51
    아! 무슨 말씀인지 이해 했습니다.
  • ?
    이나 2017.02.08 14:31:07
    자료 잘 받아갑니다. 감사합니다.
  • ?
    xetown998 2017.02.10 02:18:24

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

  • profile
    prologos 2017.02.10 13:35:48
    소스보기는 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으로 보이고 그보다 작을때는 작은 화면에 맞춰서 조절 될꺼 같습니다.
  • ?
    xetown998 2017.02.10 16:43:52
    자세한 설명 감사드립니다!
  • ?
    기븐 2017.02.10 12:25:01
    한가지 질문드립니다. 혹시 imagetools 플러그인 사용시 말씀하신 더미파일들 생성되는건 관리자페이지의 "파일"항목에는 안 나타나나요?
  • profile
    prologos 2017.02.10 13:23:17
    네 db에 기록하지않는 파일이기 때문에 나타나지 않습니다.
  • ?
    기븐 2017.02.10 14:23:12
    그렇군요.. 혹시

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

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

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

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


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

List of Articles
번호 분류 제목 글쓴이 날짜
화제의 글 XE 사용팁 코어 수정 없이, 시조 댓글의 리스트만 출력하고, 자손 댓글의 리스트는 로드하지 않았다가 클릭 이벤트로 ajax 호출하기 38 file 윤삼 2017.04.20
5260 질문/답변 서버 환경 업데이트 5 file 쭈박이 2017.04.22
5259 질문/답변 대댓글, 수정, 삭제 버튼 에러 2 file 구미호 2017.04.22
5258 아이디어 제안/공유 웹호스팅서버와 개인 컴퓨터의 동기화 6 sampo 2017.04.22
5257 질문/답변 xe와 관련 없지만...저작권관련 궁금해서 질문 10 NEX 2017.04.22
5256 질문/답변 윈도우 크기로 비교문 만들기 2 pandamina 2017.04.22
5255 질문/답변 댓글을 달 때 가끔 이런 오류창이 뜨는데요 [내용 값은 필수입니다.] 1 이브이 2017.04.22
5254 질문/답변 라이믹스 .34 버전에서 .37버전으로 업데이트 후 문제가 생깁니다 1 피피포 2017.04.22
5253 질문/답변 혹시 원격으로 도와주실분 계신가요? ㅠㅠ 5 대한천자 2017.04.21
5252 질문/답변 홈페이지가 하얗게 되면서 내용이 안나옵니다. 4 대한천자 2017.04.21
5251 질문/답변 주소가 잘려서 복사가 됩니다 13 구미호 2017.04.21
5250 질문/답변 게시판 리스트 확장변수 항목에 css 입히기 2 file lis**** 2017.04.21
5249 질문/답변 vultr 서비스 플랜 업그레이드 중 3 이온디 2017.04.21
5248 질문/답변 회원별 아이콘 설정관련 문의드립니다. 5 file xe왕초보 2017.04.21
5247 질문/답변 네이버로그인관련 공지 2 영흥도우럭 2017.04.21
5246 질문/답변 등록해보니...이거 왜그런가요? 2 file NEX 2017.04.21
5245 질문/답변 알림센터모듈+자동등업애드온(카르마님) or 알림센터모듈+가입시메세지보내기에드온(숭숭군님) 큰성565 2017.04.20
5244 질문/답변 모바일에서 글을 쓰려면 이렇게 되는데 어떻게 설정하면 될까요? 2 file 솔파도 2017.04.20
5243 질문/답변 에디터도 이상하게 뜨고 사이트 관리도 안되네요 ㅠㅠ 2 file Lets_go_ 2017.04.20
5242 XE 사용팁 순번을 1-2-3 순으로 띄우고 공지사항 있을 경우 공지사항은 제외하기 이온디 2017.04.20
5241 질문/답변 디비 변경 3 가이더 2017.04.20
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 267 Next
/ 267
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...