2017.02.10 11:56:55

라이믹스 이미지 본문 자동삽입 관련하여 질문드립니다

기븐

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

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

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

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

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

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

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

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

위로 아래로

웹지기

2017.02.10 12:09:14
#comment_498151

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

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

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

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

이와 관련있는 내용인지 잘 몰라 자동삽입 기능이 편리한데 약간의 애로점이 있었던 저희 사이트 사례도 적어보았습니다.

웹지기

2017.02.10 12:19:30
#comment_498164

그런데 라이믹스 자동삽입은 알아서 줄바꿈만 되어서 자동으로 본문에 들어가네요. 이게 좋은데 저희는 그걸 몰라서 그냥 한칸 내림을 넣어버렸습니다.

기븐
질문기여자

2017.02.10 12:20:11
#comment_498171

라이믹스의 이미지 자동삽입 기능은 그   한칸 줄바꿈을 해주는 기능이 없습니다.

기븐
질문기여자

2017.02.10 12:21:21
#comment_498177

아, 라이믹스는 현재 커서에서 줄바꿈을 해주는 기능은 있는데 그렇게 삽입된 이미지에 다시 한번 더   줄바꿈을 넣어줘서 그 다음 줄에 커서를 위치하게 하는 기능은 없습니다.

웹지기

2017.02.10 12:21:27
#comment_498181

라이믹스에 실제 적용된 패치는 어떻게 변형되었는지는 모르는데요. 최초 XE에 PR로 요청된 코드가 본문에 자동으로 넣으면서 줄바꿈 한번은 되더라구요.

기븐
질문기여자

2017.02.10 12:22:31
#comment_498185

음 그럼 xe 깃허브 쪽에서 검색해야 하려나요..

image_link 이건 딱 봐도 이거 삭제하면 되겠다고 보이는데   삽입하는건 모르겠네요

웹지기

2017.02.10 12:22:56
#comment_498189

진짜 방금 테스트해보니 라이믹스는 커서에서 내려서 업로드 해주네요. 라이믹스꺼 받아서 비교해보고 적용가능한지 봐야겠네요.

prologos

2017.02.10 13:16:06
#comment_498224

언급하신 main.js 열어보시면...
105라인 근처에 if(/\.(jpe?g|png|gif)$/i.test(result.source_filename)) { 로 시작하는 조건문이 이미지 태그 자동삽입하는 스크립트입니다.

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

두군데 살펴보시면 될겁니다. 그런데 두군데 모두 이미지 태그 삽입시  를 추가 하는것으로 보이는데요?

기븐
질문기여자

2017.02.10 14:28:13
#comment_498339

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

저는 언급하신 코드들이 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
#comment_498349

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

temp_code += "\r\n \r\n";

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

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

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

prologos

2017.02.10 15:11:59
#comment_498476

아... 제가 본것은 1.8.27버전의 라이믹스입니다. 스크립트를 살펴보니 자동삽입에 옵션이 추가된거 같네요.
paragraph를 선택하면 '이미지 자동삽입'의 형태로 에디터에 삽입되고...
inline을 선택하면 그냥 '이미지 자동삽입'의 형태로 에디터에 삽입 되는거 같습니다.

기븐
질문기여자

2017.02.10 15:18:58
#comment_498488

혹시 이미지 자동삽입 이거 때문에 두개씩 붙는걸까요? 근데 이거 안하면 웹지기님이 말씀하신 대로 이전 문장이랑 한 줄로 붙어버리는 문제가 발생하는데..

prologos

2017.02.10 15:26:31
#comment_498506

원하시는것이 무조건 이미지를 따로 독립 시키는 것이라면...

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

위의 조건문 부분을 아래처럼 간략하게 줄여서 테스트 해보세요.
_getCkeInstance(settings.formData.editor_sequence).insertHtml("" + temp_code + \n", "unfiltered_html");

웹지기

2017.02.10 15:33:44
#comment_498524

사이트는 라이믹스처리 방식대로 잘 되던데요 ?
문장

<img alt="logo.png" data-file-srl="1012429" editor_component="image_link" src="/files/attach/images/98/428/012/001/30b7e627d1259f364b4e77fdf26fa25e.png" />

prologos

2017.02.10 15:35:14
#comment_498532

아! 스크립트를 수정할 필요없이 원복 하시고 에디터 옵션에서 자동 이미지 삽입 옵션을 paragraph로 선택하세요. 최신버전 라이믹스를 살펴보지않아서 어떤식으로 되어있는지는 모르겠지만 올려주신 스크립트를 볼때는 분명 옵션이 있을껍니다.

기븐
질문기여자

2017.02.10 15:39:41
#comment_498544

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

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

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

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

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

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

기븐
질문기여자

2017.02.10 15:43:31
#comment_498557

아.. 다시 보니까 왜 두개씩 달리는지 알겠네요.

기븐
질문기여자

2017.02.10 15:51:44
#comment_498570

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 즉 라이믹스 옵션에서 "커서 위치에서 줄을 바꾸고 삽입" 을 사용하기 때문에 이런 식으로 했습니다.

prologos

2017.02.10 13:22:12
#comment_498230

추가로 editor_component="image_link" 속성이 붙어있으면 이미지링크 컴포넌트를 호출하게 되는데 이미지 컴포넌트에서는 링크된 이미지 주소를 검사해서 http(s)로 시작하는 full url로 변경하고 허용된 태그 속성 이외에는 전부 제거하고... 등의 기능을 합니다. 자세한것은 이미지링크 컴포넌트의 image_link.class.php를 열어서 transHTML펑션 살펴보시면 되고... 이 작업이 필요없다고 생각되시면 editor_component속성을 삭제해도 문제 없겠지요...

기븐
질문기여자

2017.02.10 14:31:42
#comment_498355

이게 왜냐면 이미지 실수로 클릭하거나 할 때 자꾸 쓸데없이 컴포넌트가 떠서 굉장히 거슬리고 불편한 상황을 초래해서 그런건데.. 말씀하신거 한번 확인해봐야겠네요. 그런데 이미지 주소라는게 그냥 업로드한 파일이면 서버 내의 /files/attach 이하 주소로 연결되는거 아닌가요?