네이버 스마트에디터는 페이지내에 프로그램이 직접 뜨는 방식이 아니었습니다.
페이지 안에 에디터 프로그램의 URL 페이지를 별도로 띄우는 방식. iFrame 의 방식이었는데요.
따라서 페이지가 완료되는 시점이 달랐습니다.
1편에서 테스트를 했던 내용은 브라우저내에 개발자 콘솔로 디버깅을 했던 화면입니다.
전체 화면 로딩이 완료된 이후에 명령을 던져주는거라 작동을 하는데요.
프로그램이 그렇게 작동하면 안되겠죠?
글자수 카운팅이 글쓸때 화면 어딘가에 자동으로 나타나야 편리할것입니다.
그런데 이걸 내 사이트도 아닌데 어떻게 할까요?
그래서 생각한게 크롬 확장프로그램 입니다.
브라우저 및 페이지내에 컨텐츠들을 이용해서 재가공할 수 있는 프로그램을 만들 수 있습니다.
스타일을 잘 꾸미면 그 사이트에 원래 기능인거처럼 보일 수 있는것이지요.
초기 에디터 문구
글쓰기 처음 화면을 들어가보시면 “본문에 #을 이용하여 태그를 사용해보세요! (최대 30개)”
이런 문구도 보이실꺼에요.
타이핑 하려고 클릭하면 없어지지만, 프로그램으로 접근하면 이 단어도 가져오게 됩니다.
실질적으로는 타이핑한게 없기에 글자수가 0이 되어야 하지만, 그렇지 않게 되는거죠.
2. 글자 변경 감지
글이 작성이 완료된 후 1편 기획에 있던것처럼 요청을하면 쉽게 가져올 수 있지만,
저는 타이핑할때마다 체크를 하고 싶습니다.
그래야 한줄을 더 써야하는지 결정을 할 수 있겠죠?
하지만 남의 사이트이기에 JavaScript 를 이용해서 기존의 변경 이벤트를 새로 재정의 해주도록 하겠습니다.
그런 다음 내용을 읽어오도록 할께요.
기본 코드는 아래와 같습니다.
$(“#mainFrame”).removeAttr(“change”).attr(“change”, function(e) {
let t = $(parent.self[e].document);
t.off(“DOMSubtreeModified”).on(“DOMSubtreeModified”, function(n) {
v = $(n.target);
var node = $(“.se-component.se-text”, t);
if((node.text() != “본문에 #을 이용하여 태그를 사용해보세요! (최대 30개)”) && node.text()){
console.log(node.text().length);
$(“#txtCnt”).text(node.text().length);
}
})
});
3. 글자수 노출하기
이렇게 감지된 글자수를 하얀 배경으로 만든 박스에 값을 넣어줍니다.
그런다음 블로그 로고 우측편에 원래 있던것처럼 위치를 잡아주었습니다.
지금 이 글을 쓰면서도 글자수 카운팅이 잘 되고 있습니다.
일단 이것만으로도 기존의 번거로움이 사라졌습니다.
(글자수 세기 사이트 안녀어엉~)
3. 이후 기능
기본 글자수는 정상적으로 작동하는것 같습니다.
그 다음 목표인 단어갯수, 단어별 빈도수를 체크하여 랭킹을 추가해보려고 합니다.
내가 주제를 삼으려고 하는 단어의 반복 횟수도 블로그 품질을 체크할때 적용되기 때문이지요.
100% 맞다고 장담을 드릴수는 없지만 어느정도 맞는말이기에 포스팅하면서 1~5위의 단어를 함께 보여주려고 합니다.
그 다음에는 맞춤법 검사나 기타 기능들을 고민해볼까 합니다.
이상 개발일지 2탄이었습니다.
