...
| 경로 | 설명 |
|---|---|
/workspace/fonts | 메타파일(wmf/emf) 변환에 사용되는 font들 |
1.1 코드미러 적용
코드미러를 적용하면 에디터의 '소스 보기' 에서 코드 편집을 원활하게 할 수 있습니다.
...
...
코드미러 사이트에서 js 파일과 css 파일을 다운받아 경로를 추가해 주거나, CDN 을 이용해 코드미러를 적용할 수 있습니다.
CDN 을 이용한 적용
에디터가 설치된 html 파일 <head> 태그에 아래 내용을 추가합니다.
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<!-- code mirror -->
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/codemirror.min.js'></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/mode/xml/xml.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/codemirror.min.css'> |
2. 환경설정
2.1 라이선스 설정
synapeditor.config.js 파일을 열어서 license.json 파일의 경로를 수정합니다. 이 때 license.json 파일은 브라우저에서 접근 가능한 경로로 표시해줘야 합니다.
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<!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>
<link href="resource/synapeditor/synapeditor.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="synapeditor/synapeditor.config.js"></script>
<script src="resource/synapeditor/synapeditor.min.js"></script>
<script>
$(document).ready(function() {
var se = new SynapEditor("synapEditor", synapEditorConfig);
});
</script>
<body>
<form id="seform" name="seform" action="/save" method="post">
<textarea id="synapEditor"></textarea>
<input type="submit" value="SAVE"/>
</form>
</body>
</html> |
3.3 코드미러 적용
코드미러를 적용하면 에디터의 '소스 보기' 에서 코드 편집을 원활하게 할 수 있습니다.
| 코드미러를 적용하지 않았을 때 '소스 보기' | 코드미러를 적용했을 때 '소스 보기' |
|---|---|
|
|
코드미러 사이트에서 js 파일과 css 파일을 다운받아 경로를 추가해 주거나, CDN 을 이용해 코드미러를 적용할 수 있습니다.
CDN 을 이용한 적용
에디터가 설치된 html 파일 <head> 태그에 아래 내용을 추가합니다.
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<!-- code mirror -->
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/codemirror.min.js'></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/mode/xml/xml.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/codemirror.min.css'> |
4. 임포트 및 업로드 API 설정
환경설정 파일에 임포트 및 업로드 API 경로를 등록합니다.
...