질문/공유팁 게시판

탭 위젯을 생성하게 해주는 에디터 컴포넌트 - 베타 버전

윤삼
조회 수 903 추천 수 4
크게 작게 댓글로 가기
크게 작게 위로 아래로 댓글로 가기

소개 : 일전에 소개했듯 탭 위젯을 생성하게 해주는 "탭 위젯 - 에디터 컴포넌트"

버전 : 아직 완벽하진 않지만, 그래도 조금만 인내심을 가지면 쓸 만한 정도이며, 결국엔 엄청난 버그가 보고될 운명의 버전

테스트 : 라이믹스, CK에디터, 크롬

 

설치 : ./modules/editor/components 에 설치

설정 : 관리자 페이지에서 위지윅 에디터 설정하는 곳 하단의 에디터 컴포넌트 목록에서 체크해줌

 

사용법 :

  1. 에디터의 컴포넌트 목록 부분에서 component_icon.gif 모양의 아이콘을 클릭하면 팝업창이 뜸
  2. 팝업창에서 "위젯 형식"(아코디언, 탭)을 선택
  3. 위젯 형식 버튼 우측에 나오는 "스킨 목록"에서 사용할 스킨 선택 (현재는 default 하나밖에 없으므로 하나만 뜸)
  4. 팝업창 하단의 "추가" 버튼을 눌러 탭을 추가
  5. 제목과 내용 부분을 각각 클릭하고 내용 수정 및 입력
  6. 탭 추가와 내용 입력이 끝나면 하단의 "삽입" 버튼을 눌러 컴포넌트를 에디터에 삽입
  7. 쓰기 모드에선 이미지 하나만 달랑 뜨지만 글을 등록하면 출력 모드로 전환됨

 

미리보기 및 체험 : https://bit.ly/2IMquos

Atachment
첨부

윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
위로 아래로
댓글 24
  • profile

    시험 좀 해보시고 버그 및 개선사항 꼭 좀 알려주세용~

  • profile

    잠깐 사용해봤는데 좋습니다.

     

    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

  • profile profile
    치명적인 버그 으아아아악
    감사합니다ㅠㅠ
  • profile ?
    저도 프라알라인데 같은 내용의 에러가 출력 됩니다.
    탭을 삽입후 게시글 보기에서 아래와 같이 오류가 출력되면서 탭이 나오지 않습니다.

    Template not found: ./modules/editor/components/ap_tab_widget/skins/tabs/output.ht
  • ? profile
    진짜 그러네요ㅜ 프로알라ㅜㅜ
  • profile profile

    프로알라 에디터는 신기하게도 (나름ㅋ) escape된 html 코드를 넣어도 소스보기(코드보기)를 하면 unescape가 되어 있네요.
    여기서 문제가 있었던 게 아닌가 싶어요;;;

     

    덧. 그래서 그냥 encodeUriComponent 등으로 처리했어요

  • profile
    항상 본문에 위젯을 사용했으면 좋겠다라고 생각했는데 윤삼님은 에디터 컴포넌트로 해결해주셨네요.

    혹시 에디터 컴포넌트로 위젯<img> 태그를 넣으면 위젯화시키는 에디터 컴포넌트를 개발하면 왠지 대박날것 같군요!
  • profile profile
    RXE 구조상 위젯 코드를 컴포넌트에서 처리하는 게 가능할지, 위젯 코드 변환 시점과 컴포넌트 코드 변환 시점이 상성이 맞는지 등등을 더 봐야 할 것 같아요.
    암튼 엄청 큰 프로젝트가 되겠네요ㅠ
  • profile
    테스트(라이믹스, php7.0, ckeditor) 해보니 오류 없이 정상 동작 됩니다.
    그런데 글을 작성한 후 수정이 거의 힘들어서 대략 난감한 듯 합니다.
    그리고 html태그를 사용할 수 있으면 금상첨화일 듯 싶습니다.

    아무튼 매우 좋습니다. 고생하십니다~~~ 그리고 감사합니다.
  • profile profile
    저랑 같은 환경이어서 작동이 잘 됐나보네요:)
    입력된 컴포넌트 수정이라면 에디터에서 삽입된 이미지를 더블클릭하면 수정될 걸요. 그게 아니라면 어떤 수정 말씀이신지
  • profile profile
    네. U 이미지를 더블클릭하니 수정이 되네요.
    [소스보기] 눌러서 수정하는 건 수정 안되는 게 맞는거겠죠?
  • profile profile
    소스보기에서도 직접 수정은 될 텐데 일단 알아보기에 불편함이 있을 거예요 :-|
  • ?

    테스트환경(라이믹스, php7.2, ckeditor)에서 해보니

    탭으로 설정하면 내용글이 잘 나옵니다.

    근데 아코디언으로 설정하면 마지막 내용글만 출력이 됩니다.

    img_001.png

     그리고 (라이믹스, php5.6, ckeditor)에서는 글 등록을 누르면 아래 메세지 출력됩니다.

    img_1.png

    그러나 게시판에 등록은 되고 아코디언, 탭 모두 정상 출력됩니다.

  • ? profile

    위젯창에서는 소스보기 버튼이 안보여서 ckeditor에서 소스보기 눌러 html 태그를 넣으면 위젯이 적용되지 않습니다.

    K-038.jpg

  • profile profile
    메인 에디터에서 직접 소스수정하시려면 넣으려는 html코드를 escape 처리해서 넣으셔야 할 거예요.
    아마도 그 부분 때문에 발생하는 문제인 것 같아요.
  • ?
    "아코디언으로 설정하면 마지막 내용글만 출력이 됩니다."
    이 부분은 아코디언스킨의 class부분이 레이아웃의 class와 겹쳐서 생기는 증상이네요.
    content를 ap_content로 바꾸어 주니 정상 출력되네요.
    <div class="ap_content">{$tab_widget_info->content_list[$i]}</div>
  • ? profile
    재연이 어려웠는데 클래스 이름 때문에 그랬군요;;;
    범용 이름은 피해야겠어요.
    고치도록 하겠습니다.
    감사합니다!!
  • ?
    오호 또 신작하나 출시됬군여
  • ? profile
    버그가 많아요 :)
  • profile ?
    많아도 만든게 어딥니까...ㅋㅋ
    그나저나 스킨은 아주 잘 안되가고 있네요 ㅎ..
  • ? profile
    변수 구조가 지저분해서 작업하시기 쉽지 않을 거라 생각은 했었어요ㅜㅜ
  • ?

    와! 스킨 손 보는 것이 너무 어렵네요ㅠㅠ
    전혀 감을 못 잡겠는데요.
    아마 글 등록후에는 코드를 만져도 변화가 없는 것 같군요.
    글 등록전에 코드 수정후 글 등록하면은 될라나???
    그리고 저 같은 경우는 탭으로 설정시 선택된제목 탭 부분의 색상이 바탕 검정에 글씨도 비슷한 계열이라 안보여요.

    아마 파란계열에 흰색글 일 것 같은데 무엇이 문제인지...

    img_002.png

  • ? profile

    1. 글 등록후 코드 변경 :

    - 어떤 동작을 의도하시는 것인지 정확히는 모르겠습니다. 

    - 일반적으로는 다음 움짤과 같이 하시면 됩니다.

     

    compo_tabs_edit.gif

     

     

    2. 코드에 복잡한 html코드를 넣고자 하는 경우

    - 팝업창에서는 무슨 이유에서인지 소스보기 아이콘이 로드되지 않더군요ㅜ

    - 이 경우에는 넣고자 하는 html 코드(<, >, ", ', &)를 escape하시고 본문 에디터 소스보기 모드에서 입력해주셔야 합니다.

    - 다만, 다음 버전에서는 프로알라 에디터 지원 문제로 탭 내용의 모든 문자열을 encodeURIComponent 처리할 생각입니다. 즉, html 코드 직접 수정은 더 어려워질 듯합니다;;

     

     

    3. 탭 제목의 글자가 파란색으로 나오는 문제 :

    - 다른 css에서 a태그에 색상을 걸어서 생기는 문제로 보입니다.

    - 스킨에서 해당 동작을 덮어씌우는 별도의 css를 만들어서 임포트하셔야 할 것 같습니다.

  • ?
    허... 미리보기 체험. 가서 보니까 진짜 좋네요 ㅎㅎㅎ