업무 중에 summernote 플로그인을 사용한 에디터에서 폰트 컬러가 변경되지 않는 오류가 발생했다.
폰트라는 태그는 이미 지원이 끊겼으며, 해당 태그의 color 속성의 속성값이 제대로 먹히지 않는 것이 문제였다.
해당 엘리먼트를 누르고 하단의 스타일 적용여부를 보면, 여전히 body의 color 속성을 상속 받고 있다. 이러한 상속이 끊어져야 하는데, 끊어지지 않은 것이다. 그렇다고 css 에서 body * 의 컬러 속성을 제거하는 것은, 부가적으로 생기는 업무가 너무 많고 그로 인해 생기는 사이드이펙트 또한 엄두가 나지 않았다.
그렇다고 플러그인의 내부 소스를 건드리긴 어려울 것 같았으나, 일단 어디서 컬러를 지정해서 font 태그를 넣는지 확인해야 했다.
for (var idx = 0, len = commands.length; idx < len; idx ++) {
this[commands[idx]] = (function (sCmd) {
return function (value) {
beforeCommand();
document.execCommand(sCmd, false, value);
afterCommand(true);
};
})(commands[idx]);
context.memo('help.' + commands[idx], lang.help[commands[idx]]);
}font 태그로 만들어 넣는 것은 document.execCommand(sCmd, false, value); 부분이다.
제이쿼리에서 실행하는 것인데, 이전에 어떠한 작업이 필요해보였다. 처음에는 직접적으로 if문으로 걸러서 font 태그에 style 속성을 넣어 컨트롤을 하려했지만, 불가능했다.
참고 자료에서 확인하면, document.execCommand("styleWithCSS", true, true); 가 있다. style을 CSS로 컨트롤할 수 있도록 style 속성을 사용하는 것으로 보인다. 그리고 beforeCommand와 document.execCommand 함수 사이에 놓으면..
태그도 이전과는 다르게 font 태그가 아닌 span 태그로 생성되어 잘 적용 된다.
고작 한 줄만 적으면 되는걸, 해결해보겠다고 플러그인 내부 곳곳에 디버거 찍어가며 생 고생을 한 보람이 있었다.