FCKeditor 와 SyntaxHighlighter 코드 하 이 라이트 플러그 인의 통합
This is a dialog-based plugin to handle formating of source code forFCKeditor 2.5.xIt WON'T work with the newCKEditor(yet).(CKEditor 는 FCKEditor 의 업그레이드 버 전 이지 만,SyntaxHighlighter 아직 CKEditor 에서 코드 하 이 라 이 트 를 실현 할 수 없습니다)It makes use of the SyntaxHighlighter 2.0.x javascript library available to download fromAlex Gorbatchev'sprocject page(the older version 1.5.1 version is available fromGoogle Code).
The plugin primiarily edits a
tag with some custom attributes. Its mainly aimed at users editing blogs or content management systems where there is a requirement to format programming languages on a website that is being edited using FCKEditor.
The plugin will not format the code in FCKEditor - the SyntaxHighlighter javascript library dynamically generates a lot of formatted HTML at runtime, which would cause problems in FCKEditor.
Skip straight to the good bits
Can't be bothered reading all this? View the online demo or download the plugin and go play with it yourself.
So what do I get then?
Correctly installed,the plugin is in the form of a tabbed dialogue box that looks like this:(플러그 인 설치 후 효과)
버 전 역사:(버 전 역사)
Huge thanks goes to Sergey Gurevich who wrote the updated code for the FCKEditor plugin to handle the latest version of the SyntaxHighlighter code and submitted useful bug fixes.
Occasionally the dialogue box does not pickup the
element to be edited in Firefox. It only seems to happen when a user clicks inside thetag with the mouse but doesn't actually move or interact with the cursor.Fixed in version 1.0.2 - Thanks to Sergey Gurevich
설치(설치 설정 과정)
1.파일 복사(파일 복사)
Extract the contents of the zip in your plugins directory,so it ends up like this:(기본 디 렉 터 리 구 조 는 다음 과 같 습 니 다)
참고:Version 2 of the plugin must be extracted to a directory named'syntaxhighlighter 2'.The older plugin for the earger version of the library must go in a folder named'syntaxhighlighter'.The file fckpugin.js references this directory when the plugin initialises.
2.FCKeditor 에 it 추가(FCKeditor 에 추가)
Now add in your fckconfig.js or custom js configuration file the following line (remember its javascript we are dealing with so everything is case sensitive!):1.
FCKConfig.Plugins.Add(
'syntaxhighlight2'
,
'en'
) ;
3. Adding it to the toolbarset
Add the button 'SyntaxHighLight2' button to your toolbarset:1.
FCKConfig.ToolbarSets[
"Basic"
] = [
2.
[
'Bold'
,
'Italic'
,
'-'
,
'OrderedList'
,
'UnorderedList'
,
'-'
,
'Link'
,
'Unlink'
,
'-'
,
'SyntaxHighLight2'
,
'-'
,
'About'
]
3.
] ;
4. Configure the plugin
The plugin will work 'out of the box', but you can configure a default language using the SyntaxHighlight2LangDefault parameter:1.
FCKConfig.SyntaxHighlight2LangDefault =
'csharp'
;
The full list of languages and corresponding codes are:
blocks aren't really formatted by default. I suggest editing your fck_editorarea.css (or equivalant if you are using a custom CSS file) to something that highlights code blocks better. eg:01.
pre
02.
{
03.
background-color
:
#fff
;
04.
font-family
:
"Consolas"
,
"Courier New"
,
Courier
,
mono
,
serif
;
05.
font-size
:
12px
;
06.
color
:
blue
;
07.
padding
:
5px
;
08.
border
:
1px
dashed
blue
;
09.
}
Configuring SyntaxHighlighter.
You must have SyntaxHighlighter installed and working to display properly formatted code. FCKEditor does not need it, but for code to be properly formatted on your website you must have it configurated correctly. For SyntaxHighlighter2 Alex Gorbatchev's site has loads of excellent information (he wrote it after all!), for the old version 1.5.1 library, the project wiki here is a good resouce, or this blog post might also be useful.
5. Use it
Now clear your browser cache (this stage is important!) and reload the editor, the new button should be ready to use.
6. Future updates
There's some additional functionality I might add at a later date:
formatting style to the editor by default
Thanks goes to Alex Gorbatchev for creating Syntax Highlighter !.저희 패키지 다운로드 주소:/201004/yuanma/FCKEditor-syntaxhighlight.rar
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
FCKeditor 부엉이textarea>2,FCKeditor 의 APIFCKeditor 기 를 사용 하여 매우 S 부 API 를 제공 합 니 다.oEnd UserF 는 맞 춤 형 기능 을 많이 사용 합 니 다.예 를 들 어 가장 기본 적 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.