xheditor應用

個人資料管理改用了xheditor編輯器，非常好用的一個開源東東，可以遠程自動上傳，可以代碼高亮顯示。。。。

有沒有發現和csdn編輯器一樣的東西。。。

實現：

<script type="text/javascript" charset="utf-8" src="xheditor/jquery-1.4.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="xheditor/xheditor-1.1.12-zh-cn.min.js"></script>

<script type="text/javascript">
$(pageInit);
var editor;
function pageInit()
{
        var plugins={
                Code:{c:'btnCode',t:'插入代碼',h:1,e:function(){
                        var _this=this;
                        var htmlCode='<div><select id="xheCodeType"><option value="html">HTML/XML</option><option value="js">Javascript</option><option value="css">CSS</option><option value="php">PHP</option><option value="java">Java</option><option value="py">Python</option><option value="pl">Perl</option><option value="rb">Ruby</option><option value="cs">C#</option><option value="c">C++/C</option><option value="vb">VB/ASP</option><option value="">其他</option></select></div><div><textarea id="xheCodeValue" wrap="soft" spellcheck="false" style="width:300px;height:100px;" /></div><div style="text-align:right;"><input type="button" id="xheSave" value="確定"/></div>';                  var jCode=$(htmlCode),jType=$('#xheCodeType',jCode),jValue=$('#xheCodeValue',jCode),jSave=$('#xheSave',jCode);
                        jSave.click(function(){
                                _this.loadBookmark();
                                _this.pasteHTML('<pre class="prettyprint lang-'+jType.val()+'">'+_this.domEncode(jValue.val())+'</pre>');
                                _this.hidePanel();
                                return false;   
                        });
                        _this.saveBookmark();
                        _this.showDialog(jCode);
                }}
        };
        editor=$('#content').xheditor({localUrlTest:/^https?:\/\/[^\/]*?(localhost)\//i,remoteImgSaveUrl:'saveremoteimg.asp',plugins:plugins,loadCSS:'<style>pre{margin-left:2em;border-left:3px solid #CCC;padding:0 1em;}</style>',tools:'full',width:'790',height:'340',forcePtag:false,submitID:'Submit6',upBtnText:'上傳',upMultiple:20,upLinkUrl:'UpFileTo.asp?UseUpName=1',upLinkExt:'zip,rar,txt,doc,xls',upImgUrl:'UpFileTo.asp',upImgExt:'jpg,jpeg,gif,png',upFlashUrl:'UpFileTo.asp',upFlashExt:'swf',upMediaUrl:'UpFileTo.asp',upMediaExt:'wmv,avi,wma,mp3,mid',defLinkText:'點擊下載'});
}
function submitForm(){$('#formx').submit();}
</script>

CSS代碼：

<style type="text/css">
<!--
.btnCode {
        background:transparent url(xheditor/prettify/code.gif) no-repeat 16px 16px;
        background-position:2px 2px;
}
.btnFlv {
        background:transparent url(xheditor/mediaplayer/flv.gif) no-repeat 16px 16px;
        background-position:2px 2px;
}
.btnMap {
        width:50px !important;
        background:transparent url(xheditor/googlemap/map.gif) no-repeat center center;
}
-->
</style>

頁面：

<textarea id="content" name="content" style="width:860px;height:180px;background:url(images/xheditorbg.gif) no-repeat right bottom fixed"></textarea>   
<input type="button" name="Submit6" id="Submit6"  value="提交" οnclick="this.form.content.value=$('#content').val();this.form.submit()">

這樣就可以了

顯示的時候代碼高亮顯示：

代碼：

<link type="text/css" rel="stylesheet" href="xheditor/prettify/prettify.css"/>
<script type="text/javascript" src="xheditor/prettify/prettify.js"></script>

在頁面的末尾

<script type="text/javascript">
prettyPrint();
</script>