syn.uicontrols.$htmleditor

syn_chartjs 컨트롤은 TinyMCE 5를 이용하여 개발됩니다. 에디터내 이미지 업로드 및 저장소 연동을 위해 repository 모듈을 지원합니다.

<div>
    <syn_htmleditor id="txtHtmlEditor" syn-datafield="HtmlEditor" style="width:100%; height: 320px;" syn-options="{
        repositoryID: 'LFSLE01'
	}">
        <div>
            <div>html</div>
        </div>
        <p><iframe src="https://www.youtube.com/embed/e-zmLUFSnhM" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p>
        <p>&nbsp;</p>
        <p><a title="www.naver.com" href="http://www.naver.com" target="_self" rel="noopener">www.naver.com</a></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    </syn_htmleditor>
</div>
<div>
    <input type="button" id="btnGetValue" value="getValue" syn-events="['click']" />
    <input type="button" id="btnSetValue" value="setValue" syn-events="['click']" />
    <input type="button" id="btnClear" value="clear" syn-events="['click']" />
</div>

'use strict';
let $htmleditor = {
    event: {
        btnGetValue_click() {
            syn.$l.eventLog('btnGetValue_click', JSON.stringify(syn.uicontrols.$htmleditor.getValue('txtHtmlEditor')));
        },

        btnSetValue_click() {
            syn.uicontrols.$htmleditor.setValue('txtHtmlEditor', '안녕하세요');
        },

        btnClear_click() {
            syn.uicontrols.$htmleditor.clear('txtHtmlEditor');
        },

        btnExecCommand_click() {
            syn.uicontrols.$htmleditor.execCommand('txtHtmlEditor', 'bold');
            syn.uicontrols.$htmleditor.execCommand('txtHtmlEditor', 'backColor', '#0000FF');
        },

        btnInsertImage_click() {
            syn.uicontrols.$htmleditor.execCommand('txtHtmlEditor', 'insertimage', 'https://avatars.githubusercontent.com/u/151638920?s=400&u=ff661f97b0777bc7a58f3d972909fe63e9e93d37&v=4');
        },

        txtHtmlEditor_documentReady(elID, editor) {
            syn.$l.eventLog('txtHtmlEditor_documentReady', elID);
        }
    }
}