Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Decompress fonts.zip under /workspace. 

fonts.zip 파일도 /workspace아래에 압축을 풀어주세요.

PathExplanation

/workspace/fonts

Font file for converting metafile (wmf/emf) when the document is imported


2. Configuration

2.1 Set up the

...

License 

Open the synapeditor.config.js file and choose the path for license.json file. The license.json file path should be accessible via a browser.  .

Code Block
languagejs
themeEmacs
titlesynapeditor.config.js
linenumberstrue
{
   /**
     * Set up the path or object for license file
     * ex) '/synapeditor/license.json'
     * ex)  {
                'company': 'SynapSoft',
                'key': [
                    'licenseKey'
                ]
            }
     */
    'editor.license': 'synapeditor/license.json',
  ...
}

...

Excerpt Include
플러그인
플러그인
nopaneltrue

Apply External

...

Module 

Apply external module like Code Mirror for etc. to get more powerful editing features. 

Code Mirror 등 외부 모듈을 적용하여 더 강력한 편집기능을 사용할 수 있습니다.

Please refer to external page for more detailed information.적용 방법은 외부모듈 페이지를 참고하세요.

Example of applying plugin and external

...

module 

Code Block
languagexml
themeEmacs
linenumberstrue
<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
<title>Synap Editor | Unlimited Rich Text Editor</title>

<!-- Synap Editor -->
<link href="synapeditor/synapeditor.min.css" rel="stylesheet" type="text/css">
<script src="synapeditor/synapeditor.config.js"></script>
<script src="synapeditor/synapeditor.min.js"></script>


<!-- Synap Editor Plugins -->
<!-- Personal 개인정보보호Data -Protection -->
<script src="synapeditor/plugins/personalDataProtection/personalDataProtection.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/personalDataProtection/personalDataProtection.min.css">
<!-- 특수기호Special Character/이모지Emoji -->
<script src="synapeditor/plugins/characterPicker/characterPicker.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/characterPicker/characterPicker.min.css">
<!-- 포토에디터Photo Editor -->
<script src="synapeditor/plugins/tuiImageEditor/tuiImageEditor.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/tuiImageEditor/tuiImageEditor.min.css">
<!-- Web 웹접근성Accessibility 검사Checker -->
<script src="synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.min.css">

<!-- Synap Editor Externals -->
<script type="text/javascript" src="synapeditor/externals/formulaParser/formula-parser.min.js"></script>
<script type="text/javascript" src="synapeditor/externals/codeMirror/codemirror.min.js"></script>
<script type="text/javascript" src="synapeditor/externals/codeMirror/xml.min.js"></script>
<link rel="stylesheet" href="synapeditor/externals/codeMirror/codemirror.min.css">

<script>
function initEditor() {
	var se = new SynapEditor("synapEditor", synapEditorConfig);
}
</script>
<body onload="initEditor();">
	<div id="synapEditor"></div>
</body>
</html>

...

Register the import and upload API path to the configuration file for file(image, video, ...) upload and document file(doc, docx, xls, xlsx) import.

Info

임포트 및 업로드에 필요한 API APIs(/importDoc, /uploadImage, /uploadVideo, /uploadFIle)  서버연동 매뉴얼을 참고하셔서 Back-end에 구현해주셔야 합니다required Import and upload should be implemented in Back-end. Please refer to server connection manual.


Code Block
languagejs
themeEmacs
titlesynapeditor.config.js
linenumberstrue
{
    'editor.import.api': '/importDoc',
    'editor.upload.image.api': '/uploadImage',
    'editor.upload.video.api': '/uploadVideo',
    'editor.upload.file.api': '/uploadFile',
   ...
}

Refer Please refer to Configuration page for more detailed information regarding other setting up regarding other menu and toolbar etc. 기타 메뉴 및 툴바 설정 등 환경설정에 대한 자세한 내용은 Configuration을  참고해주세요.