CKeditor 와 syntaxhighlight 는 joomla 코드 하 이 라 이 트 를 만 듭 니 다.


(효 과 는 그림 과 같다!)
최근 csdn 과 cnblogs 로 글 을 올 리 거나 에 세 이 를 쓸 때 많은 IT 사이트 나 코드 와 관련 된 포럼,블 로그 등 을 발 견 했 습 니 다.그들 은 모두 매우 좋 은 문법 적 하 이 라 이 트 를 가지 고 있 습 니 다!강하 다!
이곳 을 보 니 효과 가 아주 좋 습 니 다.왜냐하면 자신 도 joomla 로 작은 소일 거 리 를 만 들 었 기 때 문 입 니 다!코드 같은 것 도 자주 붙 여 요.'문법 이 하 이 라이트'기능 이 없어 서 불편 해 요!그래서 어젯밤 에 많은 공 을 들 여 마침내 이 문 제 를 해결 했다!
지금 바로 기록 해 주세요!
우선 joomla 기본 편집 기 는 tinymce 입 니 다.블 로그 원 배경 에서 도 이 편집 기 를 사용 하 는 것 같 습 니 다!담담 하 다,그 는 바로 문법 이 밝 은 기능 이 없다!
저 는 바 이 두 와 구 글 에 도 이런 편집기 가 있 습 니 다.joomlagate 에서 나 온 것 같 습 니 다.그런 플러그 인 은 회원 을 후원 해 야 다운로드 할 수 있 습 니 다!물론 다운로드 가 안 돼 요!
그래서 스스로 실현 하고 싶 습 니 다.tinymce+syntaxhighlight 로 이 루어 지고 싶 습 니 다.다만,tinymce 에 대한 사용 이 적 을 수도 있 습 니 다.그의 프로필 은 아무것도 모 르 기 때문에 성공 하지 못 했 습 니 다!
그래서 자신 이 사용 하 는 비교적 많은 오픈 소스 편집기 ckeditor 로 전 환 했 습 니 다!이 건 더 이상 설명 할 필요 가 없 을 것 같 아 요!fckeditor 업그레이드 버 전!
됐어,쓸데없는 말 을 잔뜩 했 어!
이제 본 격 적 으로 시작!
우선 본인 joomla 버 전 1.5.9 입 니 다.
그리고 joomla ckeditor 버 전 다운로드!이 건 제 가 마지막 에 다운로드 주 소 를 첨부 하 겠 습 니 다!사실은 syntaxhighlight 플러그 인 입 니 다.이것 도 첨부 하 겠 습 니 다.물론 홈 페이지 에 가서 최신 것 을 다운로드 하 셔 도 됩 니 다!
그리고 수 정 했 어 요.
먼저 ckeditor 플러그 인 을 joomla 에 설치 한 후 루트 디 렉 터 리-plugins-editors-ckeditor-plugins 아래 디 렉 터 리 를 발견 할 수 있 습 니 다!syntaxhighlight 를 눌 러 서 이 디 렉 터 리 에 업로드 합 니 다.물론 이 디 렉 터 리 아래 는 ckeditor 에서 사용 할 플러그 인 입 니 다!비교 해 보시 면 됩 니 다.어떤 내용 을 올 렸 는 지 알 겠 습 니 다.이 건 더 이상 말 하지 않 겠 습 니 다!문제 가 크 지 않다!
 
그 다음은 ckeditor 에 code 버튼 을 달 아야 합 니 다!다음 그림 에서 보 듯 이 마지막!
 

 
물론 이것 은 ckeditor 의 프로필 을 수정 하 러 가 는 것 입 니 다!(사실 당신 이 직접 ckeditor+syntaxhighlight 를 검색 하 는 것 도 이러한 방법 을 찾 을 수 있 습 니 다)다만,joomla 버 전의 ckeditor 는 약간의 차이 가 있 습 니 다."config.js"파일 을 고 치 는 것 은 소 용이 없습니다."ckeditor.js"파일 을 고 치 려 면 이 파일 을 열 어 보 세 요.안에 있 는 코드 가 많 습 니 다.물론 서 두 르 지 마 세 요.이 몇 군데 만 있 으 면 됩 니 다!
다음 에 고 칠 곳 을 붙 여 주세요!(Dreamweaver 로 이 파일 을 열 면 속도 가 빨 라 집 니 다.특히 검색)첫 번 째 js 코드
 
',fullPage:false,height:200,plugins:'about,basicstyles,blockquote,button,clipboard,colorbutton,contextmenu,elementspath,enterkey,entities,filebrowser,find,flash,font,format,forms,horizontalrule,htmldataprocessor,image,indent,justify,keystrokes,link,list,maximize,newpage,pagebreak,pastefromword,pastetext,popup,preview,print,removeformat,resize,save,scayt,smiley,showblocks,sourcearea,stylescombo,table,tabletools,specialchar,tab,templates,toolbar,undo,wysiwygarea,wsc,syntaxhighlight',extraPlugins:'',removePlugins:'',protectedSource:[],tabIndex:0,theme:'default',skin:'kama',width:'',baseFloatZIndex:10000

두 번 째 js 코드
 
<span class="cke_separator"></span>');return{};}};i.toolbarLocation='top';i.toolbar_Basic=[['Bold','Italic','-','NumberedList','BulletedList','-','Link','Unlink','-','About']];i.toolbar_Full=[['Source','-','Save','NewPage','Preview','-','Templates'],['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],'/',['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['Link','Unlink','Anchor'],['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],'/',['Styles','Format','Font','FontSize'],['TextColor','BGColor'],['Maximize','ShowBlocks','-','About','syntaxhighlight']]
는 이 두 군데 만 가능 합 니 다.코드 의 마지막 부분 입 니 다.한 단 어 를 복사 해서 찾 아 보 세 요.바로'syntaxhighlight'를 추가 하 는 것 입 니 다.'syntaxhighlight'라 는 단어 가 제 가 붙 인 코드 의 위치 와 당신 의 ckeditor 의 위 치 를 비교 해 보면 알 수 있 습 니 다!그리고 이 두 단락 의 코드 를 수정 한 후에 백 스테이지 에 가서 글 을 올 렸 는데 이 버튼 이 이미 가 까 워 졌 다 는 것 을 알 게 되 었 습 니 다.바로 제 첫 번 째 캡 처 와 같 습 니 다!이렇게 하면 삽입 해서 사용 할 수 있다!물론 마지막 단 계 는 프론트 데스크 에 js+css 스타일 을 추가 하여 문법 하 이 라 이 트 를 제어 하 는 코드 입 니 다!이것 이 바로 템 플 릿 파일 안의 html 페이지 를 수정 하 는 것 입 니 다.아래 에 제 코드 를 붙 입 니 다!왜냐하면 제 가 직접 가 져 온"ja"를 쓰 거 든 요.Purity'템 플 릿 입 니 다.그래서 html 페이지 의 시작 부분 은 다음 과 같 습 니 다
 
<head>
<jdoc:include type="head" />
<?php JHTML::_('behavior.mootools'); ?>
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/styles/shThemeDefault.css"/>

<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.script.js"></script>

<?php if ($tmpTools->getParam('rightCollapsible')): ?>
<script language="javascript" type="text/javascript">
var rightCollapseDefault='<?php echo $tmpTools->getParam('rightCollapseDefault'); ?>';
var excludeModules='<?php echo $tmpTools->getParam('excludeModules'); ?>';
</script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.rightcol.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shCore.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shBrushBash.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shBrushPhp.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shBrushColdFusion.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shBrushCSharp.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shBrushCss.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shBrushJScript.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shBrushXml.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shBrushSql.js"></script>
<script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = '<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>
<?php endif; ?>
.담담 합 니 다.안에 js 부분 이 비교적 많 습 니 다.js 파일 이 하나의 코드 에 대응 하 는 문법 이 하 이 라이트 가 없 으 면 제 가 추가 할 것 입 니 다.제 가 사용 할 수 있 는 몇 가지,예 를 들 어 phop,c\#,XML,Js 등 이 있 습 니 다.사용 하지 않 을 것 은 추가 하지 않 았 습 니 다!로 딩 속도 에 영향 을 줄 까 봐!허허!이런 거,거의 OK!스스로 테스트 를 발표 하 세 요!나 는 이렇게 완성 했다!물론 그 중 에는 남 의 것 을 참고 하 는 경우 가 많다!특히 첨부 파일 은 나 도 다른 사람 이 낸 거 야!지금 공유 해 주세요!CKEditor3.x-SyntaxHighlight.rar

좋은 웹페이지 즐겨찾기