FCKeditor+SyntaxHighlighter 코드 하 이 라이트 착색 플러그 인

FCKeditor 는 현재 가장 유행 하 는 오픈 소스 편집기 입 니 다.SyntaxHighlighter 는 JS 로 구현 되 는 코드 하 이 라이트 디 스 플레이 플러그 인 입 니 다.프로그램 구현 효 과 를 최소 화하 고 최종 효 과 를 캡 처 할 수 있 습 니 다.

데모 페이지:
FCKeditor+SyntaxHighlighter 플러그 인 패키지 다운로드:fck_SyntaxHighlighter 저희 패키지 버 전.
FCKeditor 환경 에서 SyntaxHighlighter 를 사용 하 는 방법 을 단계별 로 소개 한다.
배경 FCKeditor 편집기 수정
1.가방 의 압축 을 풀 고 insertcode 폴 더 를 FCKeditor 편집기 의 editor\plugins\디 렉 터 리 에 업로드 한 다음 FCKeditor 편집기 의 fckconfig.js 파일 을 수정 합 니 다.이 파일 에서 FCKCfig.PluginsPath=FCKConfig.BasePath+'plugins/';다음 코드 를 추가 합 니 다:
FCKConfig.Plugins.Add('insertcode');
 2.FCKeditor 편집기 의 editor\lang 폴 더 에 있 는 zh-cn.js 를 열 고 DlgDivInlineStyle:"CSS 스타일",(이 문장 뒤에 쉼표 를 꼭 붙 여야 합 니 다.")아래 코드 를 추가 합 니 다.
//Plugins
InsertCodeBtn:"코드 삽입"
 3.FCKeditor 편집기 의 fckconfig.js 파일 을 수정 하고 편집기 제어 판 에 단 추 를 추가 하 며 도구 모음 인 자 를 호출 하 는 Media 뒤에 insertcode 를 추가 합 니 다.다음 과 같다.
FCKConfig.**Sets[ "standard"] = [
['Source','Paste','PasteText','PasteWord','-','Undo','Redo','-','Bold','Italic','Underline','StrikeThrough','extColor','able','-','JustifyLeft','JustifyCenter','JustifyRight','Ordered List','Unordered List','-','Image','Attach','Flash','Media','InsertCode'],이상 작업 이 완료 되면,이 때 FCKeditor 편집 기 를 시작 하면 편집기 의**에 아이콘 이 하나 더 있어 야 합 니 다.이 아이콘 을 누 르 면 코드 를 추가 할 수 있 습 니 다.오류 가 발생 하면 알림 에서 도구 항목 을 찾 을 수 없습니다.FCKeditor 의 캐 시 를 지우 지 않 았 습 니 다.배경 을 종료 하거나 캐 시 를 업데이트 하고 새로 고침 을 하면 코드 가 아이콘 을 삽입 하 는 것 을 볼 수 있 습 니 다.
프론트 디 스 플레이 페이지 의 SyntaxHighlighter 호출
1.가방 의 압축 을 풀 고 syntax 폴 더 를 프론트 루트 디 렉 터 리 에 있 는 js 폴 더 에 전달 합 니 다.
2.하 이 라이트 디 스 플레이 처리 가 필요 한 HTML 페이지 에 SyntaxHighlighter 제어 코드 를 추가 하고 다음 코드 를 HTML 페이지 의

와

사이 에 삽입 합 니 다.

<script type="text/javascript" src="/js/syntax/scripts/shCore.js"></script>
<script type="text/javascript" src="/js/syntax/scripts/shLegacy.js"></script> 
<script type="text/javascript" src="/js/syntax/scripts/shBrushAll.js"></script>
<link href="/js/syntax/styles/shCore.css" type="text/css" rel="stylesheet"/>
<link href="/js/syntax/styles/shThemeDefault.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/js/syntax/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

2.프론트 페이지 의 CSS 파일 에 다음 과 같은 스타일 로 CSS 코드 를 제어 합 니 다.

.codeHead {font-weight: bold;font-size: 12px;padding: 5px;padding-left: 15px;background: #fff;border-bottom: 1px solid #ddd;}
.codeText {border: 1px solid #ddd;width: 98%;overflow: auto;margin: 0 0 1.1em;padding: 0;word-break: break-all;background: #fff;font: 12px 'Courier New', Monospace;}
.codeText ol {list-style: decimal-leading-zero;margin: 0 1px 0 45px;padding: 5px 0;color: #5C5C5C;border-left: 1px solid #ddd;background: #fff;}
.codeText ol li {list-style-type:decimal;padding-left: 10px;background: #FFF;}
.codeText ol li.alt {background: #FFF;}
.codeText ol li span {color: #000;}

메모:이러한 프론트 데스크 톱 호출 경 로 는/js/syntax/내 가 이 경 로 를 올 렸 기 때 문 입 니 다.이 경 로 는 당신 의 필요 에 따라 수정 할 수 있 습 니 다.실제 업로드 할 경로 입 니 다.
이로써 수정 이 모두 끝 났 습 니 다.수정 중 에 무슨 문제 가 발생 하면 우리 와 교류 하 는 것 을 환영 합 니 다.tech\#cncms.com
추가:친구 가 불 러 올 때 페이지 가 끊 겨 야 표 시 됩 니 다.페이지 를 불 러 올 때 JS 가 실행 되 고 코드 착색 을 하기 때 문 입 니 다.해결 방법 은 코드 착색 SyntaxHighlighter.all()입 니 다.시간 을 끌 어 실행 하면 됩 니 다.우 리 는 위의 코드 를 조금 바 꿉 니 다.

<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/js/syntax/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

다음으로 변경:

<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/js/syntax/scripts/clipboard.swf';
setTimeout("SyntaxHighlighter.all();",300);
</script>

이렇게 고치 면 로 딩 할 때의 카드 가 느껴 지지 않 습 니 다.