insertHTML
2.6.0 버전부터 지원합니다.
HTML을 삽입합니다.
매개변수에 ID가 있으면, 해당 ID와 오프셋에 해당하는 위치에 삽입됩니다.
ID가 존재하지 않으면, 현재 Selection을 기준으로 다음 문단에 삽입됩니다.
매개변수
| 이름 | 타입 | 설명 |
|---|---|---|
html | string | 삽입할 HTML 문자열입니다. |
id | string | HTML이 삽입될 문단의 ID입니다. |
offset | number | HTML이 삽입될 위치입니다 (offset [기본값 = 0]). |
forceRender(2.11.0 버전부터 지원합니다.) | boolean | 즉시 렌더링할지 여부입니다 (기본값 true). |
예시
var html = '<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 130.67 131.67" style="width: 100%; height: 100%; transform: matrix(1, 0, 0, 1, 0, 0); left: 0px; top: 0px;"><g transform="translate(1.335, 1.335)"><path stroke-width="2.67" d="M 0,64.5 A 64,64.5 0 0,1 64,0 A 64,64.5 0 0,1 128,64.5 A 64,64.5 0 0,1 64,129 A 64,64.5 0 0,1 0,64.5 Z " stroke="rgb(79, 129, 189)" stroke-dasharray="" fill="rgb(247, 150, 70)" vector-effect="non-scaling-stroke"></path></g></svg>';
editor.insertHTML(html);
예시 2
var html = 'html Content';
editor.insertHTML(html, id, offset);
데모
다음 예제는 결재 양식의 결재 상자에 서명 이미지를 삽입합니다. 문서에는 결재 셀에 ID가 sign인 비어 있는 문단이 있으며, 승인 버튼을 클릭하면 해당 문단에 이미지가 삽입됩니다.
<!-- html -->
<p id='sign'> </p>
// javascript
var html = '<img src="https://synapeditor.com/wp-content/uploads/2019/08/newvalue_01.png" style="width:50px; height:50px;">';
var paragraphId = 'sign';
editor.insertHTML(html, paragraphId);
이미 문단에 있는 내용을 추가하는 대신 교체하려면(예: 승인을 다시 클릭할 때), 캐럿을 문단으로 이동시키고, 줄 끝까지 선택한 다음 삭제한 후 삽입합니다.
editor.execCommand('setCaretById', 'sign');
editor.execCommand('extendLineEnd');
editor.execCommand('deleteLeft');
editor.insertHTML(html, 'sign');