(The effect is as shown in the picture!) ）
Recently in the use of CSDN and Cnblogs Post and write essays, found a lot of it's website or the code has a relationship with some forums, blogs and the like, they have a very good syntax highlighting! Very powerful!
See here the effect is very good, because, oneself also use Joomla to build a small pastime site! Often also paste some code or something, there is no "syntax highlighting" function, the total feeling is not very convenient! So, last night, a lot of kung fu, finally solved the problem!
Just record it now!
First Joomla default editor is tinymce looks like and blog Park backstage also use this editor! Indifferent, he is not a syntax highlighting function!
And I am in Baidu and Google also have such editor seems to be joomlagate out, when let that kind of plugin is to sponsor member can download! Of course I can't download it!
So, just want to realize it, with tinymce+syntaxhighlight to achieve, just, may be for the tinymce with less, his configuration file, etc. are not very familiar with, so did not succeed!
So I went to a more open source editor that I used ckeditor! I think this is not used as a more explanation! FCKeditor version of the upgrade!
Well, that's a whole bunch of crap!
Here's the official start!
First of my Joomla version is 1.5.9
Then download Joomla CKEditor version! This I will attach at the end of the download address! In fact, is Syntaxhighlight plug-ins, this I will be attached, of course, you can also go to the official website to download the latest!
And then it's changed,
First of all, the CKEditor plug-in installed in Joomla after the installation, will find in the root directory-"plugins-" editors-"ckeditor-" plugins under the directory! The syntaxhighlight will be pressurized after the upload to the directory, of course, the directory under the CKEditor will be used to the plug-in! You can compare, know what content to upload, this is not much to say! It's not a big problem!
The second is to install the Code button on the CKEditor! As shown in the following picture, the last one!
Of course this is to have to modify the CKEditor configuration file! (In fact, your own search ckeditor+syntaxhighlight can also find such a method) just, Joomla version of the CKEditor a little different, change the "config.js" file is not used, to change the "ckeditor.js" file, This file opens a look inside the code a lot of, of course, do not need to hurry, as long as the few places on it!
The following post to change the place! (It is recommended that you open the file with Dreamweaver so that the speed is faster, especially if you find it.)
The first JS code
Copy Code code as follows:
', 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
Second JS code
Copy Code code as follows:
<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 ']]
In these two places can be, is the last part of the code, you can copy a word inside to find out, that is, add "syntaxhighlight", see "Syntaxhighlight" This word in the location of the code I posted and your own ckeditor in the position of comparison will know!
Then the two pieces of code after the revision, to the background to publish the article found that the button has been near, and my first screenshot is the same! So you can insert the use!
Of course, the final step is to add js+css style to the front desk to control syntax highlighting code!
This is to modify the template file inside the HTML page, the following posted my code!
Since I'm using the "ja_purity" template, the opening HTML page starts with the following
Copy Code code as follows:
<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/syntaxhighlight/styles/shcore.css "/>
<link type= "Text/css" rel= stylesheet "href=" <?php Echo $tmpTools->baseurl (); /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;?>
Indifferent, there are more JS, there is no JS file corresponding to a code syntax highlighting, I added, I will use a few, such as PHP,C#,XML,JS, and so on, will not use the No add!
Fear of impact loading speed! Oh!
So, basically OK! Publish your own test! That's how I do it!
Of course, many of them are reference to others! In particular, I also use the attachment of others released! Now share!
Ckeditor3.x-syntaxhighlight.rar
