...
4. 외부모듈
| Anchor | ||||
|---|---|---|---|---|
|
4.1 코드미러 적용
코드미러를 적용하면 에디터의 '소스 보기' 에서 코드 편집을 원활하게 할 수 있습니다.
...
...
코드미러 사이트에서 js 파일과 css 파일을 다운받아 경로를 추가해 주거나, CDN 을 이용해 코드미러를 적용할 수 있습니다.
package externals 사용
package 하위 externlas codeMirror script file 사용
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<!-- code mirror -->
<script type="text/javascript" src='../resource/codemirror.min.js'></script>
<script type="text/javascript" src="../resource/xml.min.js"></script>
<link rel='stylesheet' href='../resource/codemirror.min.css'> |
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.2 엑셀 함수 사용
| Status | ||
|---|---|---|
|
package externals 사용
package 하위 externlas formula-parser script file 사용
formula parser를 적용하면 에디터에서 엑셀 함수를 사용 할 수 있습니다.
- formula-parser script를 html에 추가하지 않을 경우 엑셀 함수 입력칸 노출되지 않습니다.
- formula-parser script를 html에 추가하지 않을 경우 임포트시 엑셀 문서에 포함된 함수를 사용 할 수 없습니다.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<!-- formula-parser -->
<script type="text/javascript" src="../resource/formula-parser.min.js"></script> |
5. 임포트 및 업로드 API 설정
Code Mirror 등 외부 모듈을 적용하여 더 강력한 편집기능을 사용할 수 있습니다.
적용 방법은 외부모듈 페이지를 참고하세요.
5. 임포트 및 업로드 API 설정
이미지, 동영상, 파일 업로드 및 문서(doc, docx, hwp, xls, xlsx) 임포트 처리를 위해 환경설정 파일에 임포트 및 업로드 API 경로를 등록합니다설정합니다.
| Info |
|---|
임포트 및 업로드에 필요한 API ( /importDoc, /uploadImage, /uploadVideo, /uploadFIle)는 서버연동 매뉴얼을 참고하셔서 Back-end에 구현해주셔야 합니다. |
...
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
{
'editor.import.api': '/importDoc',
'editor.upload.image.api': '/uploadImage',
'editor.upload.video.api': '/uploadVideo',
'editor.upload.file.api': '/uploadFile',
...
} |
기타 메뉴 및 툴바 설정 등 환경설정에 대한 자세한 내용은 환경설정을 참고해주세요.
...