smartEditor에 placeholder 비슷한 기능 사용하기

현재 글쓰기 기능을 구현할 때 스마트에디터를 사용하고 있는데 placeholder로 안내사항을 작성해줘야하는데, 찾아보니 스마트에디터에는 해당 기능이 없다고 한다.

(참고 : https://github.com/naver/smarteditor2/issues/200)

 

하단의 코드는 smarteditor2 github에서 가져온 일부분이다.(https://github.com/naver/smarteditor2/blob/master/workspace/static/SmartEditor2.html)

var oEditors = [];

var sLang = "ko_KR";	// 언어 (ko_KR/ en_US/ ja_JP/ zh_CN/ zh_TW), default = ko_KR

// 추가 글꼴 목록
//var aAdditionalFontSet = [["MS UI Gothic", "MS UI Gothic"], ["Comic Sans MS", "Comic Sans MS"],["TEST","TEST"]];

nhn.husky.EZCreator.createInIFrame({
	oAppRef: oEditors,
	elPlaceHolder: document.getElementById("contents"), // html editor가 들어갈 textarea id 입니다.
	sSkinURI: "SmartEditor2Skin.html",
	fOnAppLoad : function(){
		//예제 코드
		oEditors.getById["contents"].exec("PASTE_HTML", ["<span style='color: #888'>로딩이 완료된 후에 본문에 삽입되는 text입니다.</span>"]);
        
        var iframeE2 = $('iframe[src="/se210/SmartEditor2Skin.html"]').contents().find('iframe[name="se2_iframe"]').contents().find('.se2_inputarea');
            $(iframeE2).click(function () {
                var wr_content_html = $("#contents").html().replace(/</g, "<").replace(/>/g, ">").replace(/(<([^>]+)>)/gi, "");
                var iframeE2_html = iframeE2.html().replace(/</g, "<").replace(/>/g, ">").replace(/(<([^>]+)>)/gi, "");
                if ( iframeE2_html.includes('로딩이 완료된 후에')) {
                oEditors.getById["contents"].exec("SET_IR", [""]);
            }
        });	 
	},
	fCreator: "createSEditor2"
});

1. oEditors.getById["contents"].exec 에 원하는 안내 문구를 넣는다.

EX : ("PASTE_HTML", ["<span style='color: #888'>로딩이 완료된 후에 본문에 삽입되는 text입니다.</span>"]);

color를 지정한 이유는, 기본 글자가 검은색으로 나오기 때문에 placeholder 느낌이 나는 회색계열로 설정해주었다. 색상은 원하는 색상으로 설정하면 된다. 

 

2. var iframeE2 부분을 추가하는데, 안내 문구가 짧을 경우 includes 대신 == 으로 사용하면 된다.

 

 

글씨를 클릭하면 placeholder 기능처럼 해당 문구가 사라진다.