탭 위젯을 생성하게 해주는 에디터 컴포넌트 - 베타 버전
소개 : 일전에 소개했듯 탭 위젯을 생성하게 해주는 "탭 위젯 - 에디터 컴포넌트"
버전 : 아직 완벽하진 않지만, 그래도 조금만 인내심을 가지면 쓸 만한 정도이며, 결국엔 엄청난 버그가 보고될 운명의 버전
테스트 : 라이믹스, CK에디터, 크롬
설치 : ./modules/editor/components 에 설치
설정 : 관리자 페이지에서 위지윅 에디터 설정하는 곳 하단의 에디터 컴포넌트 목록에서 체크해줌
사용법 :
- 에디터의 컴포넌트 목록 부분에서
모양의 아이콘을 클릭하면 팝업창이 뜸 - 팝업창에서 "위젯 형식"(아코디언, 탭)을 선택
- 위젯 형식 버튼 우측에 나오는 "스킨 목록"에서 사용할 스킨 선택 (현재는 default 하나밖에 없으므로 하나만 뜸)
- 팝업창 하단의 "추가" 버튼을 눌러 탭을 추가
- 제목과 내용 부분을 각각 클릭하고 내용 수정 및 입력
- 탭 추가와 내용 입력이 끝나면 하단의 "삽입" 버튼을 눌러 컴포넌트를 에디터에 삽입
- 쓰기 모드에선 이미지 하나만 달랑 뜨지만 글을 등록하면 출력 모드로 전환됨
미리보기 및 체험 : https://bit.ly/2IMquos
윤삼
Lv. 19
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
![component_icon.gif [File Size:1.6KB/Download:1]](/files/download/link/1180005/09e5819431e969b28971cbdf62f4655c/component_icon.gif){kind=link}
댓글 24
시험 좀 해보시고 버그 및 개선사항 꼭 좀 알려주세용~
잠깐 사용해봤는데 좋습니다.
1. xe & ckeditor
XE 설치 폴더 : http://서버IP/xetest2 폴더에 설치됨
탭 작성후 "삽입"을 클릭하면 아래와 같이 이미지를 못찾는다는 오류가 발생됩니다.
글 작성 완료후 읽기 화면에서 문제 없음
http://서버IP/modules/editor/components/ap_tab_widget/skins/tabs/default/output.jpg 404 (Not Found)
2. rhymix & froala editor
라이믹스 설치 : 폴더 http://서버/rhymix3 폴더에 설치됨
글 작성시 탭 컴포넌트 구동은 잘됩니다.
탭을 삽입후 게시글 보기에서 아래와 같이 오류가 출력되면서 탭이 나오지 않습니다.
Template not found: ./modules/editor/components/ap_tab_widget/skins/tabs/output.html
감사합니다ㅠㅠ
탭을 삽입후 게시글 보기에서 아래와 같이 오류가 출력되면서 탭이 나오지 않습니다.
Template not found: ./modules/editor/components/ap_tab_widget/skins/tabs/output.ht
프로알라 에디터는 신기하게도 (나름ㅋ) escape된 html 코드를 넣어도 소스보기(코드보기)를 하면 unescape가 되어 있네요.
여기서 문제가 있었던 게 아닌가 싶어요;;;
덧. 그래서 그냥 encodeUriComponent 등으로 처리했어요
혹시 에디터 컴포넌트로 위젯<img> 태그를 넣으면 위젯화시키는 에디터 컴포넌트를 개발하면 왠지 대박날것 같군요!
암튼 엄청 큰 프로젝트가 되겠네요ㅠ
그런데 글을 작성한 후 수정이 거의 힘들어서 대략 난감한 듯 합니다.
그리고 html태그를 사용할 수 있으면 금상첨화일 듯 싶습니다.
아무튼 매우 좋습니다. 고생하십니다~~~ 그리고 감사합니다.
입력된 컴포넌트 수정이라면 에디터에서 삽입된 이미지를 더블클릭하면 수정될 걸요. 그게 아니라면 어떤 수정 말씀이신지
[소스보기] 눌러서 수정하는 건 수정 안되는 게 맞는거겠죠?
테스트환경(라이믹스, php7.2, ckeditor)에서 해보니
탭으로 설정하면 내용글이 잘 나옵니다.
근데 아코디언으로 설정하면 마지막 내용글만 출력이 됩니다.
그리고 (라이믹스, php5.6, ckeditor)에서는 글 등록을 누르면 아래 메세지 출력됩니다.
그러나 게시판에 등록은 되고 아코디언, 탭 모두 정상 출력됩니다.
위젯창에서는 소스보기 버튼이 안보여서 ckeditor에서 소스보기 눌러 html 태그를 넣으면 위젯이 적용되지 않습니다.
아마도 그 부분 때문에 발생하는 문제인 것 같아요.
이 부분은 아코디언스킨의 class부분이 레이아웃의 class와 겹쳐서 생기는 증상이네요.
content를 ap_content로 바꾸어 주니 정상 출력되네요.
<div class="ap_content">{$tab_widget_info->content_list[$i]}</div>
범용 이름은 피해야겠어요.
고치도록 하겠습니다.
감사합니다!!
그나저나 스킨은 아주 잘 안되가고 있네요 ㅎ..
와! 스킨 손 보는 것이 너무 어렵네요ㅠㅠ
전혀 감을 못 잡겠는데요.
아마 글 등록후에는 코드를 만져도 변화가 없는 것 같군요.
글 등록전에 코드 수정후 글 등록하면은 될라나???
그리고 저 같은 경우는 탭으로 설정시 선택된제목 탭 부분의 색상이 바탕 검정에 글씨도 비슷한 계열이라 안보여요.
아마 파란계열에 흰색글 일 것 같은데 무엇이 문제인지...
1. 글 등록후 코드 변경 :
- 어떤 동작을 의도하시는 것인지 정확히는 모르겠습니다.
- 일반적으로는 다음 움짤과 같이 하시면 됩니다.
2. 코드에 복잡한 html코드를 넣고자 하는 경우
- 팝업창에서는 무슨 이유에서인지 소스보기 아이콘이 로드되지 않더군요ㅜ
- 이 경우에는 넣고자 하는 html 코드(<, >, ", ', &)를 escape하시고 본문 에디터 소스보기 모드에서 입력해주셔야 합니다.
- 다만, 다음 버전에서는 프로알라 에디터 지원 문제로 탭 내용의 모든 문자열을 encodeURIComponent 처리할 생각입니다. 즉, html 코드 직접 수정은 더 어려워질 듯합니다;;
3. 탭 제목의 글자가 파란색으로 나오는 문제 :
- 다른 css에서 a태그에 색상을 걸어서 생기는 문제로 보입니다.
- 스킨에서 해당 동작을 덮어씌우는 별도의 css를 만들어서 임포트하셔야 할 것 같습니다.