모바일에서 CK에디터 사용시 autogrow 플러그인과 이 기능을 같이 사용하면 문제가 발생해서 그러는데
이걸 해결하는 방법이, 이미지가 자동으로 삽입될 때 그 다음줄에 <p></p> 까지 같이 삽입되면 해결될 거 같더군요
참고로 자동삽입 기능 안 쓰고 수동으로 본문삽입할 경우, 태그를 확인해 보면 이런 식으로 다음 줄에 <p> </p> 가 자동으로 삽입되어 있더군요.
이런 식으로 바꾸려고 하는데, 어디를 바꾸면 될까요?
그리고 image_link라는 쓰지도 않는 컴포넌트를 무조건 로딩하는 문제가 있더군요. (에디터 설정에서는 물론 해제시켰는데 이미지를 클릭하면 뜨기 때문에 소용이 없습니다)
아예 이미지가 업로드될 때 editor_component="image_link" 라는 요소가 무조건 삽입되서 문제인거 같은데
일단 대충 찾아보니까 common/js/plugins/jquery.fileupload/js/main.js 라는 파일에 그런 것들이 있는 거 같은데
여기서만 전부 지워주면 될까요? 혹시 더 지워줘야 한다거나 문제가 발생하지는 않는지..
댓글 28
일단 저희는 라이믹스가 아니라 자동삽입기능을 XE 에 적용해서 사용중입니다.
그런데 문제는 자동삽입을 사용하면 일부 회원들이 문장입력후 줄바꿈 없이 바로 업로드를 하면서
정렬에 문제가 됩니다.
자동삽입 패치 기능은 자동으로 이미지를 넣어주면서 이미지 아래쪽으로 <p> </p> 한칸 줄바꿈을 해줍니다.
그래서 저희는 그냥 자동삽입 기능에 이미지 위아래로 <p> </p> 를 넣어버려서 사진 위 아래로 문장이 붙지 않도록 해 버렸습니다.
이와 관련있는 내용인지 잘 몰라 자동삽입 기능이 편리한데 약간의 애로점이 있었던 저희 사이트 사례도 적어보았습니다.
image_link 이건 딱 봐도 이거 삭제하면 되겠다고 보이는데 <p> </p> 삽입하는건 모르겠네요
105라인 근처에 if(/\.(jpe?g|png|gif)$/i.test(result.source_filename)) { 로 시작하는 조건문이 이미지 태그 자동삽입하는 스크립트입니다.
246라인 근처 if(/\.(jpe?g|png|gif)$/i.test(fileinfo.source_filename)) { 조건문의 본문 삽입 버튼 눌렀을때 이미지 태그 삽입하는 스크립트이구요.
두군데 살펴보시면 될겁니다. 그런데 두군데 모두 이미지 태그 삽입시 <p> </p>를 추가 하는것으로 보이는데요?
아마 보고 계신 파일이 제가 쓰고 있는 것과 다른 거 같네요..
저는 언급하신 코드들이 145, 295라인에 등장하는데, 각각
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");
}
}
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";
}
이런 식으로 생겼네요.
혹시 이거 위에 2번째 줄 아랫부분에
temp_code += "\r\n<p><br></p>\r\n";
이거 삽입하면 되려나요? 일단 해봐야겠네요
수정: 왜인지는 모르겠는데 저거 삽입하고 나니까 이번엔 이미지 뒤에 <p><br></p> 태그가 두개나 붙네요..;; (두 줄 띄워집니다)
삽입을 안하면 하나도 안 붙고, 삽입하면 두개씩 붙네요. 왜그런건지..;;
paragraph를 선택하면 '<p>이미지 자동삽입</p>'의 형태로 에디터에 삽입되고...
inline을 선택하면 그냥 '이미지 자동삽입'의 형태로 에디터에 삽입 되는거 같습니다.
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");
그렇게 하니까 CK에디터 로딩이 안 되네요..
제가 볼때 그건 라이믹스 설정에
이미지 자동 삽입
이미지 첨부시 본문에 자동 삽입 (커서 위치에서 줄을 바꾸고 삽입)
이미지 첨부시 본문에 자동 삽입 (커서 위치에 직접 삽입)
이 부분과 연관있는 거 같네요.
제가 말씀드리는건, 이미지 수동 삽입처럼 이미지가 삽입되면 그 뒷부분에 <p><br></p>가 자동으로 하나 달려서 한 줄을 띄워주고 커서를 위치시킬 수 있도록 하는건데,
현재 저 자동삽입 부분을 수동삽입처럼 뒤에 temp_code += "\r\n<p><br></p>\r\n"; 을 삽입해주면, 실제 이미지 삽입시에 <p><br></p> 가 두개씩 달려서 두 줄이 띄워지는게 문제네요.
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 즉 라이믹스 옵션에서 "커서 위치에서 줄을 바꾸고 삽입" 을 사용하기 때문에 이런 식으로 했습니다.
<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>
라이믹스 자동삽입도 약간의 애로사항이 있네요. 하나씩 연속으로 업로드 하면 이미지들이 붙고 또 수동삽입하면 간격이 떨어지고 하는... 애로사항이라고 하기보다는 두가지 상황이 다른 배치라는 정도....
하나씩 골라서 업로드 업로드 하면 원치 않게 이미지들이 다닥다닥 붙게 되네요.
자동삽입
수동삽입
이상하네요. 아까 이거 라이믹스 깃허브에 이슈 등록했는데 다시 보니까 등록이 안 되어 있네요. 삭제된건지.. (근데 이슈가 클로즈드도 아니고 그냥 삭제될 수도 있나요?)
다시 등록해야 하나 모르겠네요.
아니요, 이건 제가 이슈가 아닌거 같아서 그냥 닫은거고, 이거 쓰기 전에 P 태그가 어쩌고 하면서 하나 더 올렸었는데 다시 보니까 없네요
찾아봐도 없네요.. 등록할때 네트워크 오류라도 났었나 보네요. 어리둥절하네요;;;