XETOWN

질문/답변

웹에 관련된 질문과 답변을 나눌 수 있습니다.

모바일에서 CK에디터 사용시 autogrow 플러그인과 이 기능을 같이 사용하면 문제가 발생해서 그러는데

 

이걸 해결하는 방법이, 이미지가 자동으로 삽입될 때 그 다음줄에 <p></p> 까지 같이 삽입되면 해결될 거 같더군요

 

참고로 자동삽입 기능 안 쓰고 수동으로 본문삽입할 경우, 태그를 확인해 보면 이런 식으로 다음 줄에 <p>&nbsp;</p> 가 자동으로 삽입되어 있더군요.

 

이런 식으로 바꾸려고 하는데, 어디를 바꾸면 될까요?

 

 

 

그리고 image_link라는 쓰지도 않는 컴포넌트를 무조건 로딩하는 문제가 있더군요. (에디터 설정에서는 물론 해제시켰는데 이미지를 클릭하면 뜨기 때문에 소용이 없습니다)

 

아예 이미지가 업로드될 때 editor_component="image_link" 라는 요소가 무조건 삽입되서 문제인거 같은데

 

일단 대충 찾아보니까 common/js/plugins/jquery.fileupload/js/main.js 라는 파일에 그런 것들이 있는 거 같은데

 

여기서만 전부 지워주면 될까요? 혹시 더 지워줘야 한다거나 문제가 발생하지는 않는지..

  • profile
    웹지기 2017.02.10 12:09:14
    정확히 이해하기 어렵지만..
    일단 저희는 라이믹스가 아니라 자동삽입기능을 XE 에 적용해서 사용중입니다.

    그런데 문제는 자동삽입을 사용하면 일부 회원들이 문장입력후 줄바꿈 없이 바로 업로드를 하면서
    정렬에 문제가 됩니다.

    자동삽입 패치 기능은 자동으로 이미지를 넣어주면서 이미지 아래쪽으로 <p>&nbsp;</p> 한칸 줄바꿈을 해줍니다.

    그래서 저희는 그냥 자동삽입 기능에 이미지 위아래로 <p>&nbsp;</p> 를 넣어버려서 사진 위 아래로 문장이 붙지 않도록 해 버렸습니다.

    이와 관련있는 내용인지 잘 몰라 자동삽입 기능이 편리한데 약간의 애로점이 있었던 저희 사이트 사례도 적어보았습니다.
  • profile
    웹지기 2017.02.10 12:19:30
    그런데 라이믹스 자동삽입은 알아서 줄바꿈만 되어서 자동으로 본문에 들어가네요. 이게 좋은데 저희는 그걸 몰라서 그냥 한칸 내림을 넣어버렸습니다.
  • ?
    기븐 2017.02.10 12:21:21
    아, 라이믹스는 현재 커서에서 줄바꿈을 해주는 기능은 있는데 그렇게 삽입된 이미지에 다시 한번 더 <p>&nbsp;</p> 줄바꿈을 넣어줘서 그 다음 줄에 커서를 위치하게 하는 기능은 없습니다.
  • profile
    웹지기 2017.02.10 12:22:56
    진짜 방금 테스트해보니 라이믹스는 커서에서 내려서 업로드 해주네요. 라이믹스꺼 받아서 비교해보고 적용가능한지 봐야겠네요.
  • ?
    기븐 2017.02.10 12:20:11
    라이믹스의 이미지 자동삽입 기능은 그 <p>&nbsp;</p> 한칸 줄바꿈을 해주는 기능이 없습니다.
  • profile
    웹지기 2017.02.10 12:21:27
    라이믹스에 실제 적용된 패치는 어떻게 변형되었는지는 모르는데요. 최초 XE에 PR로 요청된 코드가 본문에 자동으로 넣으면서 줄바꿈 한번은 되더라구요.
  • ?
    기븐 2017.02.10 12:22:31
    음 그럼 xe 깃허브 쪽에서 검색해야 하려나요..

    image_link 이건 딱 봐도 이거 삭제하면 되겠다고 보이는데 <p>&nbsp;</p> 삽입하는건 모르겠네요
  • profile
    prologos 2017.02.10 13:16:06
    언급하신 main.js 열어보시면...
    105라인 근처에 if(/\.(jpe?g|png|gif)$/i.test(result.source_filename)) { 로 시작하는 조건문이 이미지 태그 자동삽입하는 스크립트입니다.

    246라인 근처 if(/\.(jpe?g|png|gif)$/i.test(fileinfo.source_filename)) { 조건문의 본문 삽입 버튼 눌렀을때 이미지 태그 삽입하는 스크립트이구요.

    두군데 살펴보시면 될겁니다. 그런데 두군데 모두 이미지 태그 삽입시 <p>&nbsp;</p>를 추가 하는것으로 보이는데요?
  • ?
    기븐 2017.02.10 14:28:13

    아마 보고 계신 파일이 제가 쓰고 있는 것과 다른 거 같네요..

     

    저는 언급하신 코드들이 145, 295라인에 등장하는데, 각각

     

    if(/\.(jpe?g|png|gif)$/i.test(result.source_filename)) {
    temp_code += '<img src="' + result.download_url + '" alt="' + result.source_filename + '" editor_component="image_link" data-file-srl="' + result.file_srl + '" />';
    if (opt.autoinsertImage === 'paragraph') {
    _getCkeInstance(settings.formData.editor_sequence).insertHtml("<p>" + temp_code + "</p>\n", "unfiltered_html");
    } else if (opt.autoinsertImage === 'inline') {
    _getCkeInstance(settings.formData.editor_sequence).insertHtml(temp_code, "unfiltered_html");
    }
    }
    if(/\.(jpe?g|png|gif)$/i.test(fileinfo.source_filename)) {
    temp_code += '<img src="' + fileinfo.download_url + '" alt="' + fileinfo.source_filename + '" editor_component="image_link" data-file-srl="' + fileinfo.file_srl + '" />';
    temp_code += "\r\n<p><br></p>\r\n";
    } else {
    temp_code += '<a href="' + fileinfo.download_url + '" data-file-srl="' + fileinfo.file_srl + '">' + fileinfo.source_filename + "</a>\n";
    }
     

     

    이런 식으로 생겼네요.

  • ?
    기븐 2017.02.10 14:30:19

    혹시 이거 위에 2번째 줄 아랫부분에

    temp_code += "\r\n<p><br></p>\r\n";

    이거 삽입하면 되려나요? 일단 해봐야겠네요

     

     

     

    수정: 왜인지는 모르겠는데 저거 삽입하고 나니까 이번엔 이미지 뒤에 <p><br></p> 태그가 두개나 붙네요..;; (두 줄 띄워집니다)

     

    삽입을 안하면 하나도 안 붙고, 삽입하면 두개씩 붙네요. 왜그런건지..;;

  • profile
    prologos 2017.02.10 15:11:59
    아... 제가 본것은 1.8.27버전의 라이믹스입니다. 스크립트를 살펴보니 자동삽입에 옵션이 추가된거 같네요.
    paragraph를 선택하면 '<p>이미지 자동삽입</p>'의 형태로 에디터에 삽입되고...
    inline을 선택하면 그냥 '이미지 자동삽입'의 형태로 에디터에 삽입 되는거 같습니다.
  • ?
    기븐 2017.02.10 15:18:58
    혹시 <p>이미지 자동삽입</p> 이거 때문에 두개씩 붙는걸까요? 근데 이거 안하면 웹지기님이 말씀하신 대로 이전 문장이랑 한 줄로 붙어버리는 문제가 발생하는데..
  • profile
    prologos 2017.02.10 15:26:31
    원하시는것이 무조건 이미지를 따로 독립 시키는 것이라면...

    if (opt.autoinsertImage === 'paragraph') {
    _getCkeInstance(settings.formData.editor_sequence).insertHtml("<p>" + temp_code + "</p>\n", "unfiltered_html");
    } else if (opt.autoinsertImage === 'inline') {
    _getCkeInstance(settings.formData.editor_sequence).insertHtml(temp_code, "unfiltered_html");
    }

    위의 조건문 부분을 아래처럼 간략하게 줄여서 테스트 해보세요.
    _getCkeInstance(settings.formData.editor_sequence).insertHtml("<p>" + temp_code + </p>\n", "unfiltered_html");
  • ?
    기븐 2017.02.10 15:39:41

    그렇게 하니까 CK에디터 로딩이 안 되네요..

    제가 볼때 그건 라이믹스 설정에

    이미지 자동 삽입
    이미지 첨부시 본문에 자동 삽입 (커서 위치에서 줄을 바꾸고 삽입)
    이미지 첨부시 본문에 자동 삽입 (커서 위치에 직접 삽입)

    이 부분과 연관있는 거 같네요.



    제가 말씀드리는건, 이미지 수동 삽입처럼 이미지가 삽입되면 그 뒷부분에 <p><br></p>가 자동으로 하나 달려서 한 줄을 띄워주고 커서를 위치시킬 수 있도록 하는건데,

    현재 저 자동삽입 부분을 수동삽입처럼 뒤에 temp_code += "\r\n<p><br></p>\r\n"; 을 삽입해주면, 실제 이미지 삽입시에 <p><br></p> 가 두개씩 달려서 두 줄이 띄워지는게 문제네요.

  • ?
    기븐 2017.02.10 15:43:31
    아.. 다시 보니까 왜 두개씩 달리는지 알겠네요.
  • ?
    기븐 2017.02.10 15:51:44
    if(result.error == 0) {
    if(/\.(jpe?g|png|gif)$/i.test(result.source_filename)) {
    temp_code += '<img src="' + result.download_url + '" alt="' + result.source_filename + '" editor_component="image_link" data-file-srl="' + result.file_srl + '" />\n<p><br></p>';
    if (opt.autoinsertImage === 'paragraph') {
    _getCkeInstance(settings.formData.editor_sequence).insertHtml("<p>" + temp_code + "\n", "unfiltered_html");
    } else if (opt.autoinsertImage === 'inline') {
    _getCkeInstance(settings.formData.editor_sequence).insertHtml(temp_code, "unfiltered_html");
    }
    }
    } 

     

    이런 식으로 해결했습니다. 저는 paragraph 즉 라이믹스 옵션에서 "커서 위치에서 줄을 바꾸고 삽입" 을 사용하기 때문에 이런 식으로 했습니다.

  • profile
    웹지기 2017.02.10 15:33:44
    사이트는 라이믹스처리 방식대로 잘 되던데요 ?
    <p>문장</p>

    <p><img alt="logo.png" data-file-srl="1012429" editor_component="image_link" src="/files/attach/images/98/428/012/001/30b7e627d1259f364b4e77fdf26fa25e.png" /></p>
  • profile
    prologos 2017.02.10 15:35:14
    아! 스크립트를 수정할 필요없이 원복 하시고 에디터 옵션에서 자동 이미지 삽입 옵션을 paragraph로 선택하세요. 최신버전 라이믹스를 살펴보지않아서 어떤식으로 되어있는지는 모르겠지만 올려주신 스크립트를 볼때는 분명 옵션이 있을껍니다.
  • profile
    prologos 2017.02.10 13:22:12
    추가로 editor_component="image_link" 속성이 붙어있으면 이미지링크 컴포넌트를 호출하게 되는데 이미지 컴포넌트에서는 링크된 이미지 주소를 검사해서 http(s)로 시작하는 full url로 변경하고 허용된 태그 속성 이외에는 전부 제거하고... 등의 기능을 합니다. 자세한것은 이미지링크 컴포넌트의 image_link.class.php를 열어서 transHTML펑션 살펴보시면 되고... 이 작업이 필요없다고 생각되시면 editor_component속성을 삭제해도 문제 없겠지요...
  • ?
    기븐 2017.02.10 14:31:42
    이게 왜냐면 이미지 실수로 클릭하거나 할 때 자꾸 쓸데없이 컴포넌트가 떠서 굉장히 거슬리고 불편한 상황을 초래해서 그런건데.. 말씀하신거 한번 확인해봐야겠네요. 그런데 이미지 주소라는게 그냥 업로드한 파일이면 서버 내의 /files/attach 이하 주소로 연결되는거 아닌가요?
  • profile
    웹지기 2017.02.10 14:37:30
    저희도 사실 이미지컴퍼넌트 회원들께 제공하기 싫어서 제공 안하는데 한두번 클릭해보고 창 뜨는거 보고 사용하는 사람 있는듯 합니다 ㅋㅋ 이게 오토삽입 코드에 저 코드가 박혀 있더라구요.
  • profile
    웹지기 2017.02.10 13:22:16

    라이믹스 자동삽입도 약간의 애로사항이 있네요. 하나씩 연속으로 업로드 하면 이미지들이 붙고 또 수동삽입하면 간격이 떨어지고 하는... 애로사항이라고 하기보다는 두가지 상황이 다른 배치라는 정도....

     

    하나씩 골라서 업로드 업로드 하면 원치 않게 이미지들이 다닥다닥 붙게 되네요.

  • profile
    웹지기 2017.02.10 13:22:57 Files첨부 (2)

    logo.png

    logo.png

    자동삽입

     

    logo.png

     

    logo.png

    수동삽입

     

  • ?
    기븐 2017.02.10 14:44:37

    이상하네요. 아까 이거 라이믹스 깃허브에 이슈 등록했는데 다시 보니까 등록이 안 되어 있네요. 삭제된건지.. (근데 이슈가 클로즈드도 아니고 그냥 삭제될 수도 있나요?)

    다시 등록해야 하나 모르겠네요.

  • profile
    기진곰 2017.02.10 14:47:48
    https://github.com/rhymix/rhymix/issues/699 이거 아닌가요?
  • ?
    기븐 2017.02.10 14:50:14

    아니요, 이건 제가 이슈가 아닌거 같아서 그냥 닫은거고, 이거 쓰기 전에 P 태그가 어쩌고 하면서 하나 더 올렸었는데 다시 보니까 없네요

  • profile
    기진곰 2017.02.10 14:58:16
    깃허브에서 이슈를 지우는 기능은 없는데, 혹시 엉뚱한 곳에 올리신 게 아닌지 확인해 보세요. 아주 가끔이지만 글을 등록하다가 오류가 나기도 합니다.
  • ?
    기븐 2017.02.10 15:01:54

    찾아봐도 없네요.. 등록할때 네트워크 오류라도 났었나 보네요. 어리둥절하네요;;;


List of Articles
번호 제목 글쓴이 날짜
공지 답변을 확실히 받기위한 질문자 지침서 21 람보 2015.12.31
3960 라이믹스 커뮤니케이션 모듈 문의드려요 고라자 2017.02.10
3959 클라우드 플레어를 SSL 기능만 사용할수 있을까요? 2 낙타 2017.02.10
3958 라이믹스(XE)의 쪽지보내기 창에 파일첨부를 할 수있는 방법이 없을까요? 4 고라자 2017.02.10
3957 FTP에서 삭제되지 않고 남아있는 파일을 삭제하려면 어떻게 해야할까요? 2 file RADIX 2017.02.10
3956 php 7.0 으로 업그레이드 후 쇼핑몰 모듈이 에러가 납니다(전문가조언부탁) 4 file 김범진 2017.02.10
3955 이미지 본문 자동삽입 PR 수정 ? 9 웹지기 2017.02.10
3954 소설 로그인 시에 이전 페이지가 아닌 이전 게시판 목록으로 이동하는 문제 2 DevinLee 2017.02.10
3953 라이믹스 이용법에 대한 질문 1 투정 2017.02.10
» 라이믹스 이미지 본문 자동삽입 관련하여 질문드립니다 28 기븐 2017.02.10
3951 출석부 모듈에서 특정 회원 한명이 이상하게 높은 점부가 부여되어 있네요. 6 DevinLee 2017.02.10
3950 클라우드플레어 웹보안쪽에. 3 진지니 2017.02.10
3949 알림센터 새글알림 안뜨게 하려면 2 file 준쓰 2017.02.10
3948 네이버 로그인이 안됩니다. 5 file netpilgrim 2017.02.10
3947 예전에 분명 ckeditor 세로 길이 자동으로 늘어나는 팁을 봤는데 2 기븐 2017.02.09
3946 FTP에 크기 0인 파일이 지워지질 않는데 어떻게 삭제하나요? 4 file 피피포 2017.02.09
3945 사이트 시간이 다음날로 넘어갈때 오류가 좀 있는것 같습니다. (출석부, 당일 통계 등) 2 흑여울0606 2017.02.09
3944 현재 소셜XE 모듈에 몇 가지 오류가 있는거 같은데 질문드립니다 file 기븐 2017.02.09
3943 http:// 를 https://www. 로..변경 *재차 질문해서 죄송합니다;; 암만 해도 잘 안되서요 ㅠㅠ 5 큰성565 2017.02.09
3942 검색창에 mv를 검색했을때 검색결과 이미지/동영상에 wmv 파일이 있을경우 2 라그릿 2017.02.09
3941 대댓글의 창을 바로 나오게 할려면 15 file 주피터3837 2017.02.09
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 203 Next
/ 203
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...