안녕하세요 비엠노우 입니다.
저는 라이믹스 2.1.13 을 쓰고 있고 ckeditor는 버전이 4입니다.
이번에 처음 라이믹스를 이용하여 홈페이지를 만들었는데, 게시판 본문에 이미지를 드래그 앤 드롭 하면 base64 형태로 데이터가 들어가면서 문제가 생겼습니다. 그래서 드래그 앤 드롭 기능을 사용하지 않으려고 해봤는데 써치해보니 자료가 나오지 않는거 같아 미흡하지만 제가 해결한 방법을 공유합니다.
1. 아래의 코드를 복사하여 config.js 를 만듭니다.
CKEDITOR.editorConfig = function( config ) {
// Drag & Drop 기능 비활성화
function onDragStart(event) {
event.preventDefault();
}
function onDrop(event) {
event.preventDefault();
}
CKEDITOR.on('instanceReady', function(event) {
var editor = event.editor;
editor.document.on('dragstart', onDragStart);
editor.document.on('drop', onDrop);
});
}
2. /common/js/plugins/ckeditor/ckeditor 에 넣습니다.
3. 만일 기존에 config.js 을 만들어서 설정해둔 코드가 있으면 적절히 편집하시어 사용하시면 될 것 같습니다.
팁 감사드립니다.
알려주신 코드를 적용하고 이미지를 에디터에 드랍하면, 아래와 같이 javascript 오류가 나면서 첨부한 이미지가 크롬 기준 브라우저의 새로운 탭에 출력됩니다.
ckeditor의 event를 preventDefault 하려면 event.stop() 이나 event.data.preventDefault() 을 사용하셔야합니다.
아래와 같이 코드를 수정하면 스크립트 오류 & 새탭 열림 없이 사용 가능합니다.
에디터 사용 중 스크립 오류가 발생하면 에디터 기능 사용에 치명적일 수 있으니 아래와 같이 코드를 수정하시면 좋겠습니다.
common/js/plugins/ckeditor/ckeditor/config.js 수정 내용
CKEDITOR.editorConfig = function( config ) {
// Drag & Drop 기능 비활성화
function onDragStart(event) {
event.data.preventDefault();
}
function onDrop(event) {
event.data.preventDefault();
}
CKEDITOR.on('instanceReady', function(event) {
var editor = event.editor;
editor.document.on('dragstart', onDragStart);
editor.document.on('drop', onDrop);
});
}