...
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| title | index.html |
|---|
| linenumbers | true |
|---|
|
<link rel="stylesheet" href="../synapeditor.min.css">
<!-- 다이얼로그, 풍선 팝업, 툴팁과 관련된 css의 url -->
<link rel="stylesheet" href="externalStyle.min.css의 url">
<link rel="stylesheet" href="shapeEditor.min.css의 url">
<link rel="stylesheet" href="webAccessibilityChecker.min.css의 url">
<link rel="stylesheet" href="webSpellChecker.min.css의 url">
<link rel="stylesheet" href="personalDataProtection.min.css의 url">
<link rel="stylesheet" href="characterPicker.min.css의 url">
<link rel="stylesheet" href="documentComparison.min.css의 url">
<link rel="stylesheet" href="formEditor.min.css의 url">
<link rel="stylesheet" href="forbiddenWordDetection.min.css의 url">
<link rel="stylesheet" href="ocr.min.css의 url"> |
script로 설정 예시
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| title | index.html |
|---|
| linenumbers | true |
|---|
|
// 에디터 초기화할 때 script를 추가하여 css를 적용시키는 예제
const paths = [
'synapeditor.min.css의 url',
'externalStyle.min.css의 url',
'shapeEditor.min.css의 url',
'webAccessibilityChecker.min.css의 url',
'webSpellChecker.min.css의 url',
'personalDataProtection.min.css의 url',
'characterPicker.min.css의 url',
'documentComparison.min.css의 url',
'formEditor.min.css의 url',
'forbiddenWordDetection.min.css의 url',
'ocr.min.css의 url'
];
const topDocument = window.top.document;
paths.forEach(function (cssFile) {
if (topDocument.querySelector(`[href='${cssFile}']`)) {
return;
}
var link = topDocument.createElement('link');
link.rel = 'stylesheet';
link.href = cssFile;
topDocument.head.appendChild(link);
});
...
new SynapEditor('synapEditor', synapEditorConfig); |
config 설정
'editor.external.container.selector' 설정으로 다이얼로그 등의 UI가 위치할 Element를 찾는 Selector를 지정합니다.
...