ckeditor에 syntaxhighlight 플러그인 적용 정보
게시판 ckeditor에 syntaxhighlight 플러그인 적용관련링크
첨부파일
본문
ckeditor에 syntaxhighlight 플러그인을 적용해 보았습니다.
에디터 화면에 'CODE' 라는 버튼이 보입니다. 소스형식을 선택하고 소스를 입력하세요.
첨부된 syntaxhighlight.zip 파일을 풀어 /editor/ckeditor4/plugins 폴더 밑에 업로드합니다.
첨부된 view.skin.php 파일을 /skin/board/basic 폴더에 업로드 합니다. 모바일용 view.skin.php 파일은 밑에 내용 참조
view.skin.php 파일에 추가된 부분은 아래와 같습니다.
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shCore.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shLegacy.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushAppleScript.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushAS3.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushBash.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushColdFusion.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushCpp.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushCSharp.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushCss.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushDelphi.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushDiff.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushErlang.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushGroovy.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushJava.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushJavaFX.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushJScript.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushPerl.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushPhp.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushPlain.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushPowerShell.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushPython.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushRuby.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushSass.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushScala.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushSql.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushVb.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
config.php 파일은 /editor/ckeditor4 폴더에 업로드 합니다.
수정된 부분은 아래와 같습니다.
CKEDITOR.config.syntaxhighlight_hideGutter = !1;
CKEDITOR.config.syntaxhighlight_hideControls = !1;
CKEDITOR.config.syntaxhighlight_collapse = !1;
CKEDITOR.config.syntaxhighlight_codeTitle = "";
CKEDITOR.config.syntaxhighlight_showColumns = !1;
CKEDITOR.config.syntaxhighlight_noWrap = !1;
CKEDITOR.config.syntaxhighlight_firstLine = 0;
CKEDITOR.config.syntaxhighlight_highlight = null;
CKEDITOR.config.syntaxhighlight_lang = null;
CKEDITOR.config.syntaxhighlight_code = "";
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'syntaxhighlight';
config.language = "ko";
config.toolbar = [
['Format','Font','FontSize'],
['Image','Flash','Link','-','Table','-','Smiley'],
['Print','Maximize'],
['Source'],
['Syntaxhighlight'],
'/',
['Bold','Italic','Underline','Strike','-','TextColor','BGColor','-','Find','Replace','-','Outdent','Indent'],
['NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock']
];
끝~!
에디터 화면에 'CODE' 라는 버튼이 보입니다. 소스형식을 선택하고 소스를 입력하세요.
첨부된 syntaxhighlight.zip 파일을 풀어 /editor/ckeditor4/plugins 폴더 밑에 업로드합니다.
첨부된 view.skin.php 파일을 /skin/board/basic 폴더에 업로드 합니다. 모바일용 view.skin.php 파일은 밑에 내용 참조
view.skin.php 파일에 추가된 부분은 아래와 같습니다.
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shCore.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shLegacy.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushAppleScript.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushAS3.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushBash.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushColdFusion.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushCpp.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushCSharp.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushCss.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushDelphi.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushDiff.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushErlang.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushGroovy.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushJava.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushJavaFX.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushJScript.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushPerl.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushPhp.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushPlain.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushPowerShell.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushPython.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushRuby.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushSass.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushScala.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushSql.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushVb.js"></script>
<script src="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="<?php echo G5_PLUGIN_URL; ?>/editor/ckeditor4/plugins/syntaxhighlight/styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
config.php 파일은 /editor/ckeditor4 폴더에 업로드 합니다.
수정된 부분은 아래와 같습니다.
CKEDITOR.config.syntaxhighlight_hideGutter = !1;
CKEDITOR.config.syntaxhighlight_hideControls = !1;
CKEDITOR.config.syntaxhighlight_collapse = !1;
CKEDITOR.config.syntaxhighlight_codeTitle = "";
CKEDITOR.config.syntaxhighlight_showColumns = !1;
CKEDITOR.config.syntaxhighlight_noWrap = !1;
CKEDITOR.config.syntaxhighlight_firstLine = 0;
CKEDITOR.config.syntaxhighlight_highlight = null;
CKEDITOR.config.syntaxhighlight_lang = null;
CKEDITOR.config.syntaxhighlight_code = "";
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'syntaxhighlight';
config.language = "ko";
config.toolbar = [
['Format','Font','FontSize'],
['Image','Flash','Link','-','Table','-','Smiley'],
['Print','Maximize'],
['Source'],
['Syntaxhighlight'],
'/',
['Bold','Italic','Underline','Strike','-','TextColor','BGColor','-','Find','Replace','-','Outdent','Indent'],
['NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock']
];
끝~!
추천
4
4
댓글 전체
잘 쓰겠습니다~^^
위 적어주신대로 했으나 code 버튼이 나오지않습니다.
또한 맨아래
config.php 파일은 /editor/ckeditor4 폴더에 업로드 합니다.
이문구에서 config.php 파일은 config.js파일을 말씀하시는것이 맞는지요?
또한 맨아래
config.php 파일은 /editor/ckeditor4 폴더에 업로드 합니다.
이문구에서 config.php 파일은 config.js파일을 말씀하시는것이 맞는지요?
그누보드5의 체디터버전이 4.0이라
Syntaxhighlighter Interface에서 1.0버전을 다운받아 교체했더니 정상적으로 잘나오고있습니다.
올려주신 파일이 1.0버전이 아닌듯합니다.
Syntaxhighlighter Interface에서 1.0버전을 다운받아 교체했더니 정상적으로 잘나오고있습니다.
올려주신 파일이 1.0버전이 아닌듯합니다.
1.6.3 버전입니다. 그렇군요. 1.0 버전으로 교체해야 겠네요.
1.0 버전으로 수정했습니다.