위젯빌더 컴포넌트 0.1 베타
- 소개 : 게시물 작성자가 직접 위젯을 생성할 수 있게 해주는 "위젯 빌더 - 에디터 컴포넌트"
- 버전 : 나름 완벽을 기했는데 그래도 만만찮은 버그가 보고될 운명의 베타 버전 0.1
- 테스트 : 라이믹스와 XE(CMS), CK에디터와 프로알라에디터(본문 에디터), 크롬과 IE11(브라우저)
- 설치 : ./modules/editor/components 에 설치
- 설정 : 관리자 페이지에서 위지윅 에디터 설정하는 곳 하단의 에디터 컴포넌트 목록에서 체크해줌
- 기본 제공 스킨 : 쪽 나누기, 탭 내비게이션(3개), 아코디언, 이미지 슬라이드, 캐러셀 등
- 사용법 :
- 에디터의 컴포넌트 목록 부분에서
모양의 아이콘을 클릭하면 팝업창이 뜸 - 팝업창 상단의 셀렉트 메뉴에서 출력할 "위젯" 선택
- 팝업창 하단의 "추가" 버튼을 눌러 탭을 추가
- 제목과 (부제, 와일드카드, 그리고) 내용 부분을 각각 클릭하고 내용 수정 및 입력
- 각 위젯별 필수(○) 및 선택(△) 입력 사항* 'JSSOR 표준 슬라이드'와 '고객의 소리' 위젯 스킨에서 '와일드카드'는 이미지 url로 활용됩니다.기본 제공 스킨 제목 부제목 와일드카드 내용 아포리아 쪽 나누기 위젯 △ - - ○
아포리아 탭 내비게이션 ○ - - ○
코디하우스 반응형 탭 내비게이션 ○ - - ○
제이쿼리 UI 아코디언 위젯 ○ - - ○
제이쿼리 UI 탭 위젯 ○ - - ○
JSSOR 표준 슬라이드* ○ △ ○ -
고객의 소리* ○ △ ○ ○
- 탭 추가와 내용 입력이 끝나면 하단의 "삽입" 버튼을 눌러 컴포넌트를 에디터에 삽입
- 쓰기 모드에선 이미지 하나만 달랑 뜨지만 글을 등록하면 출력 모드로 전환됨
- 미리보기 및 체험 : https://bit.ly/2Zq8kwR
윤삼
Lv. 19
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
![component_icon.png [File Size:564Bytes/Download:1]](/files/download/link/1212117/34b7d33222b6edf53082b6c6f4171228/component_icon.png){kind=link}
댓글 34
강아지 이름 인줄 알았던 Happy
이제야 알 것 같아 (매일 매일 매일)
또 콧노래 나오네요
크큼큿
버그가 없는것이 아닌가 싶을 정도로 완성도가 좋으네요
질문은
1. 파일 삽입은 전부 img src 태그로 해야 되는것이죠?
2.프로알라는 내용 작성시 에디터 툴바를 불러오지 못하는게 맞죠?
제안
1. 쪽 을 제외한 다른 기능 고객의 소리, 탭 나누어 작성 등...모두 기본 2개로 제한을 둘 필요는 없을것 같습니다. 1개로 등록이 가능하게 해도 유저 단에서 조절 하여 쓸수 있게 해도 좋을 듯 합니다.
질문 관련
1. 첨부 파일은 게시물 본문에 첨부된 파일 전체를 불러오게 되어 있어요. 팝업창에서 그걸 드래그해서 에디터에 드롭하면 이미지는 이미지로, 기타 파일은 다운로드 링크로 삽입될 겁니다.
2. 네, 팝업창에선 CK에디터 4.11.3만 사용합니다. 파일은 에디터 컴포넌트에 포함되어 있구요. 드래그-앤-드롭 및 터치스타트-터치엔드 시퀀스가 단순하지가 않아서 프로알라 에디터로 적용하기엔 (구글링으로 코드 따다붙이는) 제 실력으론 무리예요ㅜ
제안 관련
1. 위젯 스킨별로 설정을 다르게 하려면... 위젯별로 글쓰기 화면을 따로 만들어야 할 수도 있는데... 암튼 그 부분은 고민해보겠습니다ㅜ 참고로 tpl > js > popup.js 378-382행을 삭제하면 2개 이상 제한을 없앴을 수 있습니다.
1. 위젯 스킨별로 설정을 다르게 하려면... 위젯별로 글쓰기 화면을 따로 만들어야 할 수도 있는데... 암튼 그 부분은 고민해보겠습니다ㅜ 참고로 tpl > js > popup.js 378-382행을 삭제하면 2개 이상 제한을 없앴을 수 있습니다.
: 위젯별로 구분 할 필요 없을듯 해요. 제한을 풀고 사용 싶은 경우에 2개 이상 필요하면 삽입하면 되니까요^^
개인적으로 쪽을 제외하고 기본적으로는 제한이 없는게 좋을듯 해서 질문겸 제안을 해봤습니다.
2. 프로알라는 이미지를 끌어다 오니 img src 소스로 박히네요^^; 프로알라와 컴포넌트는 늘 어렵습니다.
그 다음 제안이요
내용 입력 부분의 기본 문구도..제목/부제목 처럼 유저 타이핑시 사라지는 형태가 어떨 런지 싶습니다.
2. 바탕화면에 있는 이미지를 프로알라 에디터 안으로 드롭시켜도 그렇게 되나요? (제가 지금 자느라 누워서ㅎ 일단 내일 일어나서 한번 봐야겠습니다)
3. 그렇게 하는 게 좋겠군요. 내용에도 placeholder... ck에디터에 안에 설정해놓는 게 가능한지 알아봐야겠습니다!
jssor 슬라이드 사용하려고 햇는데 혹시 방식이 잘못된건가요?
1. 첨부파일에 이미지 3개 올림
2. 글작성에 삽입된 사진 삭제
3. 위젯 빌더에서 표준 슬라이드 선택
4. 첨부목록에서 드래그엔 드랍으로 작성
5. 추가버튼으로 위와같이 2개더 생성
6. 삽입
7. 글작성
햇는데 이미지가 안나오네요 ...
Jssor 표준 슬라이더는 이미지를 와일드카드에 드롭시켜줘야 해요;;;
내용란에는 아무것도 작성하지 않아도 됩니다.
(표 수정해야겠네요ㅠ)
추가 발견한게 스크롤이 제대로 안내려가지는 경우가 있어요
내용란에 큰이미지로 넣는 방식으로 추가하는 경우 3번째부터 스크롤이 제대로 안먹네요
우와 멋집니다.
테스트를 간단히 해 봤는데요.
JSSOR 표준 슬라이드는 이미지 하단에 네비게이션이 있는데 그 이미지를 클릭하면 XE 고유 이미지 팝업이 되면서 네비게이션을 사용할 수 없게 됩니다. 물론 본 이미지 좌우 네비게이션을 클릭하면 좌우 이미지가 전환되긴 합니다만..
고객의 소리는 이미지를 와일드카드로 드래그해서 넣었는데, 이미지가 X 로 깨져서 나타나네요.
나머지 탭 위젯은 정말 유용하게 사용할 수 있을 것 같습니다.
베타 0.1 버전이 이정도면 정식 버전에서는 어떤 걸 보여주시려나요? ^^;;
2. 캐러셀에서 이미지 깨지는 이유는 알아냈는데 수정하려면 연구를 좀 해봐야 할 것 같아요. 참부파일 이미지도 삽입하고 외부이미지도 삽입 가능한 그런 걸 알아봐야겠어요. 흐음..
3. 정식버전에서는 스킨별로 별도의 write.html을 만들어볼까 해요. 위젯별로 활용하는 input이 다 다르다보니 종국에는 그런 고민을 하게 되네요ㅜ
... 긴요한 피드백 감사합니다~
진심으로 감사드립니다
사이트에 적용 후 피드백 열심히 드리겠습니다!!!!
참고로 skins 폴더에서 t로 시작하는 폴더명을 가진 '고객의 소리' 위젯은 치명적 버그가 있으니 삭제하신 채로 사용하시면 좋겠습니다.
네 고객의 소리 스킨은 제외하고 사용하겠습니다.
지금 테스트 해 보는 중인데 본문 작성할때 불러오는 저 편집 아이콘? 들이 저희 사이트에서 보이는 거랑은 다른것으로 파악됩니다. 일단 저희 사이트는 xe component (이모티콘, 설문조사)가 자주 쓰이는 상황인데
편집 메뉴 아이콘 노출을 저희 사이트 에디터에서 보이는 것과 동일하게 나오도록 할 수도 있을까요?
필수적인건 아니구요 그럴수있으면 좋을 것 같아서 여쭤봅니다!
샘플을 만들어 볼수록 더더욱 신세계입니다 감사합니다!
- 기능적 욕심 중 대표적인 것은 자동완성 모듈을 사용하지 않아도 url 입력시 preview카드로 자동변환시켜주는 게 있습니다. 야심차지 않습니까 하하하;;
- 불가피한 사정 중 하나는 본문 에디터의 설정을 팝업창에도 그대로 가져오는 방법을 제가 잘 몰라서예요ㅜ
- 그리고 그게 가능하더라도 컴포넌트 팝업창에서 또 다른 컴포넌트를 가져오면 안 되는 문제도 있기 때문에 결국 컴포넌트 목록 출력을 막아야 하거든요. 컴포넌트 안에 다른 컴포넌트를 넣는다는 게 기술적으로 매우매우 어렵거나 불가능할 것으로 생각하고 있습니다ㅠㅠ
- 결국 ck에디터의 config를 수정해서 원하시는 형태로 바꾸거나, 임포트 단계에서 코어에 내장된 ck에디터를 불러올 수도 있을지 모르겠지만, 컴포넌트를 이중적으로 사용하는 건 아주아주 다른 차원의 문제가 될 걸로 봅니다.
- 그래도 기회가 된다면 한번 연구는 해보도록 하겠습니다ㅜㅜ
서서히 제가 사용방법을 숙지한 후 하나씩 더 적용할까 합니다.
현재까지 사용하면서 몇가지 피드백 드리면
1. 첨부파일 섬네일에서 파일명이 긴 경우 서로 겹쳐보이는 점
2. 탭이 하나인 상태에서 첨부이미지를 넣은 후엔 하단 버튼 부분이 숨바꼭질을 하더라구요
탭을 미리 추가해둔 후 첨부이미지를 끌어다넣으면 그런 현상이 없습니다
3. 모바일에서는 작성이 쉽지 않습니다 (하지만 모바일에서 위젯빌더를 사용을 굳이 해야할 이유는 크게 없습니다)
일단 예시를 하나 보여줬는데 회원들의 반응은 역시나 "매우" 좋습니다 :)
회원들의 활용도 기대가 되지만
조만간 정식으로 등록해야하는 공지며 사이트 활용방법 등의 글을 쓸때 제가 제일 행복하게 쓰게 될 것 같습니다.
감사합니다!!!
2. 탭이 하나인 상태에서 첨부이미지를 넣은 후엔 하단 버튼 부분이 숨바꼭질을 하더라구요
탭을 미리 추가해둔 후 첨부이미지를 끌어다넣으면 그런 현상이 없습니다
==> 그럴 수 있겠다는 생각이 들긴 하는데 두 경우에 처이가 나는 건 왜 그런지 모르겠네요. 연구를 해봐야겠습니다;;
3. 모바일에서는 작성이 쉽지 않습니다 (하지만 모바일에서 위젯빌더를 사용을 굳이 해야할 이유는 크게 없습니다)
==> 네, 제 능력에선 어떻게 해도 모바일에선 어렵더라구요ㅜ 전문가 3분 정도랑 머리 맞대고 회의도 좀 하고 그래야 할 거 같은데, 하긴 전문가라면 이보단 훌륭하게 만들었을 거 같긴해요ㅎㅎ
1. 크롬 73.0.3683.103 64비트하고 익플 11.706...로 지금 막 다시 해보았는데 아래와 같이 동일하게 보입니다. 저희 홈은 xe 1.11.5, cKeditor (xe 안에 있는 버전) 스케치북 1.7 사용중입니다.
2. 이것도 다시 테스트 해봤는데 이번에는 잘되네요! 분명 테스트할때는 대여섯번을 동일하게 저를 약올렸는데 ^^;; 혹시 다시 마주치게 되면 어떤 상황에서인지 이런 것 좀 더 자세히 알려드리겠습니다.
3. 모바일은 그냥 작성은 안 하는걸로 ㅋㅋㅋ 볼때 깔끔하게 잘 보이면 충분히충분히 훌륭하다고 생각합니다!!
아예 작성은 피씨로 하라고 막아버리시는 것도 괜찮을 거 같아요 ㅎㅎ
이제 이 예쁜 탭 기능으로 홈 공지를 좀 깔끔하게 작성을 해야할텐데..... 일단 오늘은 날씨가 좋으니 좀 자야겠습니다. ....