figure 태그가 막혔군요. =_=
DOM(Document Object Model)
조금 긴 글이 될 것 같습니다. 지난번과 같이 잊기 전에 기록하고자 글 개진합니다.
현재 Froala Editor는 서식 디자인 중인데요. 예전부터 구현해야겠다. 생각하고 있던 윗 사진과 같이 이미지의 alt를 밖으로 빼서 표시하기를 오늘 구현했는데 이게 내가 상상했던 거랑 달라서 또 이틀 씨름했습니다. 머릿속으로 상상했던 것은 css3의 img:after로 content: attr('alt'); 표시해서 출력하고 또 alt 값이 없다면 placeholder 기능과 같이 기본말을 적어서 표시해주는 방법인데, 어라? img:after가 왜 화면에 표시가 안되지? 한참 서핑하고 찾아보니 <img />, <br /> 같은 계열은 ::before, ::after 를 표시하지 못한다고 하네요. 오직 시작태그와 종료태그를 가지고 있는 애들만이 지원이 된답니다. (근데 크롬에서는 되는거 같은데 일단 안된다고 합니다.)
그렇다면 jQuery를 사용해보자, 근데 jQuery는 비DOM 계열은 컨트롤 못한다는군요. ㅠㅠ 방법을 찾아봤지만 단일 타켓에 관해서는 <style>img:after {...}</style>를 생성해서 덮어씌우는게 있더군요. 하지만 이것은 제가 원하는 방법이 아니었습니다. 여러가지 시도를 해봤지만 결국은 포기했습니다.
medium.com 이나 postype.com이 왜 figure, figcaption를 썼는지 이해되는 순간이었습니다. 하지만 medium과 postype의 방식을 보면 이 이미지 설명 기능을 표시하기 위해 작성자의 에디팅 기능을 제한하고 있는데요. 예를 들면 에디터에 이미지와 설명이 있다면 이미지를 선택하여 다른곳으로 드래그가 안된다거나 이미지를 선택하여 복사 붙여넣기를 하지 못하게 하고 있습니다. 왜냐하면 이미지만 따로 움직여서 옮겨 가버리면 figure와 figcaption 태그만 딸랑 남게 되는 문제가 발생하게 되거든요. 그래서 이를 방지하고자 에디팅에서는 이미지 태그가 아닌 div에 background-image처리를 해서 이미지 처럼 보여주고 대신 드래그를 못시키게 하고 있답니다. (Figure안에서의 div 드래그는 지원하는듯 합니다.) 또, 이것이 보여져질때는 문자열 처리를 해서 이미지 태그로 변환과 figure를 보여주고 있더군요.
저는 조금 생각이 달랐습니다. 기능의 표현을 위해 글 작성자에게 제약을 둔다니.., 자유롭지 못하고 에디터를 제작하는 입장으로써 그래서는 안된다고 생각했습니다.
이미지 설명 기능을 위해 저는 에디터 작성시 아래 처럼 div 태그 안에 단일 IMG의 조건을 가진 경우 자동으로 Firgure 태그를 감싸주도록 해봤습니다. 그리고 이미지의 이동이나 조건의 변화로 인해 Figure, Figcaption의 껍데기가 남아있지 않도록 이 조건이 파괴될 경우 자동으로 Figure를 치우도록 해봤습니다. (Froala editor에는 기본 P태그를 DIV로 간단히 치환하는 단락 버튼이 있으며 단일 파일 첨부, 본문 삽입 시에는 기본적으로 div로 감싸게 하도록 했습니다. )
<div><img src=”image.png” /></div>
이벤트 처리는 froala editor에는 keypress보다는 덜 발생하는 contentChanged라는 트리거가 있기 때문에 에디터 본문에 변화가 감지될 때 아래의 코드를 수행하도록 스크립트를 짜봤습니다. 수행결과 제가 원하는 모양의 동작에 성공했습니다.
function setFigure() {
editor.$el.find('div').each(function(i, div){
if($(div).find('> a > img').length == 1 && $(div).find('> a > img.fr-dib').length == 1) {
var $img = $(div).find('> a');
$(div).find('> a').remove();
$(div).append('<figure>'+ $img.get(0).outerHTML +'</figure>');
if($(div).find('br').length == 0) $(div).find('figure').after('[br]');
// 코드 하이라이트<>가 이상하네요. br이 그대로 먹힘
}
else if($(div).find('> img').length == 1 && $(div).find('> img.fr-dib').length == 1) {
var $img = $(div).find('> img.fr-dib');
$(div).find('> img.fr-dib').remove();
$(div).append('<figure>'+ $img.get(0).outerHTML +'</figure>');
if($(div).find('br').length == 0) $(div).find('figure').after('[br]');
// 코드 하이라이트<>가 이상하네요. br이 그대로 먹힘
}
});
editor.$el.find('figure').each(function(i, figure){
if($(figure).find('img').length > 1 || $(figure).find('img.fr-dib').length != 1) {
var $html = $(figure).html();
$(figure).after($html);
$(figure).parent().find('br').remove();
$(figure).remove();
}
if($(figure).find('figcaption').length == 1) {
$(figure).find('img.fr-dib').attr('alt', $(figure).find('figcaption').text());
}
});
editor.$el.find('figcaption').each(function(i, figcaption){
if($(figcaption).parent()[0].tagName != 'FIGURE') $(figcaption).remove();
});
}
function setFigcaption(alt) {
if($current_image.parent()[0].tagName == 'FIGURE') {
var figure = $current_image.parent();
}
else if($current_image.parent().parent()[0].tagName == 'FIGURE') {
var figure = $current_image.parent().parent();
}
else {
return;
}
if($current_image.attr('alt').length == 0) {
$(figure).removeClass('figcaption');
$(figure).find('figcaption').remove();
if($(figure).parent().find('br').length == 0) $(figure).after('[br]');
// 코드 하이라이트<>가 이상하네요. br이 그대로 먹힘
return;
}
else if($(figure).find('figcaption').length == 0) {
$(figure).addClass('figcaption');
$(figure).append('<figcaption>'+alt+'</figcaption>');
}
else {
$(figure).find('figcaption').text(alt);
}
}
글이 이상해요 수정이 안되네요 ㅠㅠ
주석이 /**/ 들어가 있으면 글 등록을 취소하는 거 같군요...
글 한번 적기 되게 힘드네요 ㅠㅠ