Page tree

Versions Compared

Key

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

코드미러를 적용하면 에디터의 '소스 보기' 에서 코드 편집을 원활하게 할 수 있습니다.

...

By applying Code Mirror, you can more easily edit codes at 'view source' of the Editor.

'view source' without Code Mirror'view source' with Code Mirror

You may apply Code Mirror 사이트에서 js 파일과 css 파일을 다운받아 경로를 추가해 주거나, CDN 을 이용해 코드미러를 적용할 수 있습니다.
또는 사이냅 에디터 패키지의 externals 디렉토리에 포함된 codemirror 스크립트 파일을 사용하셔도 됩니다.

package externals 사용

package 하위 externlas codeMirror script file 사용by either downloading js file and css file from Code Mirror website and adding the corresponding path or using CDN.
Or, you may also use codemirror script file included in externals directory in SynapEditor package.

Using package externals

Using externals codeMirror script file under package

Code Block
languagexml
themeEmacs
titleindex.html
linenumberstrue
<!-- 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'>


Application through CDN

...

The the following script to <head> tag in html file in which the Editor is installed.

Code Block
languagexml
themeEmacs
titleindex.html
linenumberstrue
<!-- 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'>

...