조회 수 114 댓글 10

 

https://github.com/xpressengine/xe-core/pull/1758/files

 

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

 

 

현지 위 PR을 이용하면 문제가 되는게

 

<P>문장블라블라..... 자동삽입된이미지 </p>

<p>/<p>

 

이렇게 되어 특히 모바일에서 업로드 하시는 분들이 문장 끝나고 줄바꿈 안한채로 이미지를 업로드하셔서 이미지 정렬이 왔다갔다 하는데요.  모바일은 화면폭이 좁아 눈치채지 못하십니다.

 

그래서 저희는 어쩔수 없이 이미지 위쪽에도  temp_code += "\r\n<p><br></p>\r\n"; 

한번 더 넣어서 무조건 줄바꿈이 되도록 해버렸습니다. 이렇게 하면 문장 없이 사진 먼저 올리는 경우도 무조건 공백이 한줄 추가되서 살짝 신경이 쓰인 다는 정도인데요..

 

 

 

<P>자동삽입된이미지</P> 

이렇게 되도록 고칠 수 있을까요 ?

 

 

  • profile
    prologos 2017.02.10 14:13:09

    문장을 쓰다가 이미지를 삽입했다면 처음에 언급하신 <P>문장블라블라..... 자동삽입된이미지 </p>이런 방식이 옳지 않을까요?

     

    말씀하신대로 이미지를 무조건 독립시키려면
    temp_code += '<p><img...
    temp_code += "</p>\r\n<p>

     

    img태그를 p태그로 감싸면 닫지않은 위쪽의 태그는 에디터가 알아서 닫아줄꺼라 생각됩니다.

  • profile
    웹지기 2017.02.10 14:18:09

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

    이건 어디에 들어가는지 알수 있을까요 ?

     

    아..  

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

     

    이건가보네요 ?+

  • profile
    웹지기 2017.02.10 14:23:57 Files첨부 (1)

    여기제가 문장과 붙여서 작은이미지 업로드해볼게요.

    logo.png

     

    라이믹스는 이렇게 처리됩니다.  이렇게 안되면 이미지가 여러장이고 줄바꿈 안한사람 글은 문장이 중간에 끊어지고 이미지 세로사이즈 만큼 다시 간격이 있은 후에 다시 문장이 이어지고 사진도 좌측 우측 마음대로라 글 읽기 정말 불편해서 저희는 공지로 꼭 줄바꿈을 해서 업로드 해달라고 했다가 공지로 해결이 안되어서 윗줄 공백을 추가하게 된겁니다.

     

    커뮤니티에서는 굉장히 글 읽기 힘들어지는 글이 많아집니다.

  • profile
    웹지기 2017.02.10 14:32:59
    테스트에 잠깐 오류가 있었네요.

    의도한대로 잘 되네요. 감사합니다.
  • profile
    웹지기 2017.02.10 14:14:40

    작은이미지라면 의도한게 맞지만 정상적인 크기의 이미지는 문장과 줄바꿈이 하는게 현실적으로 게시판이 어지럽지 않아서 빈도가 작은 작은 사이즈 이미지를 문장과 붙이고 싶은 사람이 한번 더 수정하는게 낫다는 결론이에요.

     

    오래 모니터링해보니 문장과 붙어버리면 넓은 화면 PC에서 사진 여러장 업로드된거 열람할때 문장을 읽을 수가 없어요.

     

    결국 라이믹스에 적용된건 문장과 줄바꿈을 해서 업로드 되게 처리 되어있어요.

  • profile
    prologos 2017.02.10 15:01:32
    네 그럴 수 있겠네요. 이론보다는 현장(?)상황이 중요하니까요...
  • profile
    웹지기 2017.02.10 15:06:00
    네. 이론이나 원리원칙으로는 사용자가 줄바꿈을 원할때 하는게 맞습니다.
    하지만 말씀하신 현장에서는 이런 이론이나 원칙을 알 필요도 없고 대부분 모르기 때문에 크게 피해를 보는 쪽을 배려해서 강제할 수 밖에 없는 상황이 벌어지는거죠.

    저희가 오토삽입 채용하고 초기 줄바꿈 없이 회원들의 자발적인 줄바꿈을 기대했지만 그건 불가능에 가까운 희망이었어요.
  • profile
    기진곰 2017.02.10 14:41:13

    현재 라이믹스에 적용되어 있는 소스는 제가 마지막으로 건드렸는데요,

    자바스크립트에서 삽입하라고 명령하는 코드와 실제 CKEditor에서 삽입되는 코드가 다를 수 있습니다.

    CKEditor 나름대로 줄바꿈을 처리하는 방법이 있기 때문에 거기에 맞춰서 강제 변환하더군요.

    그냥 태그 입력한다고 그 상태 그대로 들어가지 않아요.

    이것까지 감안해서 이미지를 삽입해야 하기 때문에 애로사항이 많습니다.

  • profile
    웹지기 2017.02.10 14:42:38
    네. 일단 위 답변으로 충분히 만족할 만한 결과를 얻었습니다. 의도한대로 문장과 붙지않게 처리가 잘 되네요.
  • profile
    데히히이이 2017.02.27 12:06:57
    감사합니다. 웹지기님의 세심함에 감탄했습니다.

    전 이건 회원이 지켜줘야할거라고만 생각했는데...

    웹지기님을 따라가려면 한참 멀었나봅니다.

서버에 요청 중입니다. 잠시만 기다려 주십시오...