xheditorエディタのWYSWYG編集モードで挿入コード機能を追加
14661 ワード
xhEditor HTMLエディタは中国人が開発したもので、jQueryに基づいて開発された簡単なミニかつ効率的な可視化XHTMLエディタであり、ネットワークアクセスに基づいてIE 6.0+、Firefox 3.0+、Opera 9.6+、Chrome 1.0+、Safari 3.22+と互換性がある.実際に使用すると、FCKeditor/CCKeditorまたは他のHTMLエディタの代わりに問題はありません.
xhEditorエディタ公式サイト:http://xheditor.com/ Features(特徴):*Small:1つのjs(50 k)+2つのcss(10 k)+1つのピクチャ(5 k)を含む4つのファイルを初期ロードし、合計65 kです.jsとcssファイルがgzip圧縮伝送されると、さらに24 k程度に削減できる.jQueryの24 Kを加えると合計48 Kしかロードされません.*Fast:jQueryエンジンに基づいて開発され、効率的なコード実行効率を提供します.*Simple:簡単な呼び出し方法で、classプロパティを追加すると、textareaをすぐに豊富なビジュアルエディタにすることができます.*Upload:AjaxアップロードとHTML 5アップロードのサポート(マルチファイルアップロード、リアルアップロードの進捗状況、ファイルドラッグアンドドロップアップ)を内蔵し、完璧なユーザーアップロード体験を追求します.*Word:Wordコードの自動検出とクリーンアップを実現し、効率的で完璧なWordコードフィルタリング方案を提供し、コードの最適化と簡素化を生成するが、いかなる詳細効果も失わない.*UBB:完全なUBB可視化編集ソリューションを提供し、安全で効率的なコードストレージを獲得すると同時に、可視化編集の便利さを享受することができます.プレゼンテーション例:*デフォルトモード:http://xheditor.com/demos/demo01.html*カスタムボタン:http://xheditor.com/demos/demo02.html*肌選択:http://xheditor.com/demos/demo03.html*その他オプション:http://xheditor.com/demos/demo04.html*Javascriptインタラクション:http://xheditor.com/demos/demo05.html*非utf-8エンコードWebコール:http://xheditor.com/demos/demo06.html*UBBビジュアル編集:http://xheditor.com/demos/demo07.html*Ajaxファイルアップロード:http://xheditor.com/demos/demo08.html*プラグイン拡張:http://xheditor.com/demos/demo09.html*iframe呼び出しファイルアップロード:http://xheditor.com/demos/demo10.html*非同期ロード:http://xheditor.com/demos/demo11.htmlダウンロードURL:http://code.google.com/p/xheditor/downloads/list使用ヘルプ:http://code.google.com/p/xheditor/wiki/Help xhEidtorの最新バージョンはv 1である.0.0 RC 3(build 100506)機能および安定性は日常的な使用要件を満たしているが、挿入コード機能はUBB編集モードのみで提供されており、所見即得モードではなく、少し残念で使用上の不便を感じさせる.残念を補うために,本人は所見で得られた編集モードでのコード挿入機能を追加することにした.まず、xhEditorの最新コードをダウンロードし、適切なディレクトリに解凍します.次に、エディタテンプレートファイルに次のコードを追加します.次のようになります.
xhEditor編集インタフェース効果図:
次に、バックグラウンドにデータを保存する場合、「
xhEditorエディタ公式サイト:http://xheditor.com/ Features(特徴):*Small:1つのjs(50 k)+2つのcss(10 k)+1つのピクチャ(5 k)を含む4つのファイルを初期ロードし、合計65 kです.jsとcssファイルがgzip圧縮伝送されると、さらに24 k程度に削減できる.jQueryの24 Kを加えると合計48 Kしかロードされません.*Fast:jQueryエンジンに基づいて開発され、効率的なコード実行効率を提供します.*Simple:簡単な呼び出し方法で、classプロパティを追加すると、textareaをすぐに豊富なビジュアルエディタにすることができます.*Upload:AjaxアップロードとHTML 5アップロードのサポート(マルチファイルアップロード、リアルアップロードの進捗状況、ファイルドラッグアンドドロップアップ)を内蔵し、完璧なユーザーアップロード体験を追求します.*Word:Wordコードの自動検出とクリーンアップを実現し、効率的で完璧なWordコードフィルタリング方案を提供し、コードの最適化と簡素化を生成するが、いかなる詳細効果も失わない.*UBB:完全なUBB可視化編集ソリューションを提供し、安全で効率的なコードストレージを獲得すると同時に、可視化編集の便利さを享受することができます.プレゼンテーション例:*デフォルトモード:http://xheditor.com/demos/demo01.html*カスタムボタン:http://xheditor.com/demos/demo02.html*肌選択:http://xheditor.com/demos/demo03.html*その他オプション:http://xheditor.com/demos/demo04.html*Javascriptインタラクション:http://xheditor.com/demos/demo05.html*非utf-8エンコードWebコール:http://xheditor.com/demos/demo06.html*UBBビジュアル編集:http://xheditor.com/demos/demo07.html*Ajaxファイルアップロード:http://xheditor.com/demos/demo08.html*プラグイン拡張:http://xheditor.com/demos/demo09.html*iframe呼び出しファイルアップロード:http://xheditor.com/demos/demo10.html*非同期ロード:http://xheditor.com/demos/demo11.htmlダウンロードURL:http://code.google.com/p/xheditor/downloads/list使用ヘルプ:http://code.google.com/p/xheditor/wiki/Help xhEidtorの最新バージョンはv 1である.0.0 RC 3(build 100506)機能および安定性は日常的な使用要件を満たしているが、挿入コード機能はUBB編集モードのみで提供されており、所見即得モードではなく、少し残念で使用上の不便を感じさせる.残念を補うために,本人は所見で得られた編集モードでのコード挿入機能を追加することにした.まず、xhEditorの最新コードをダウンロードし、適切なディレクトリに解凍します.次に、エディタテンプレートファイルに次のコードを追加します.次のようになります.<head>
<!-- // jQuery -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="xheditor/xheditor-zh-cn.min.js"></script>
<style type="text/css">
<!--
/* */
.btnCode {
background:transparent url(syntaxhighlighter/styles/code.gif) no-repeat 20px 20px;
background-position:3px 3px;
}
-->
</style>
<script type="text/javascript">
$(function() {
var ssid = $("#ssid").val();
// xhEditor
/*
// v1.0.0 RC2
var tools = "GStart,Cut,Copy,Paste,Pastetext,GEnd,Separator,";
tools += "GStart,Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,Removeformat,GEnd,Separator,";
tools += "GStart,Align,List,Outdent,Indent,GEnd,Separator,";
tools += "GStart,Link,Unlink,Img,Table,Code,GEnd,Separator,";
tools += "GStart,Source,Fullscreen,About,GEnd";
*/
// v1.0.0 RC3
var tools = "Cut,Copy,Paste,Pastetext,Separator,";
tools += "Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,SelectAll,Removeformat,Separator,";
tools += "Align,List,Outdent,Indent,Separator,";
tools += "Link,Unlink,Img,Table,Code,Separator,";
tools += "Source,Fullscreen,About";
$("#editor").xheditor({
tools:tools,
width:'100%',
height:'400',
skin:'default', //default( ),o2007blue(Office 2007 ),o2007silver(Office 2007 )
//forcePtag:false, // P (true)
hoverExecDelay:3000,
layerShadow:2,
upLinkUrl:"{{ url controller='Article' action='FileUpload' }}" + '&ssid=' + ssid,
upLinkExt:'zip,rar,txt,doc,xls,chm,pdf',
upImgUrl:"{{ url controller='Article' action='ImgUpload' }}" + '&ssid=' + ssid,
//emots:{qq:{name:'QQ',count:55,width:25,height:25,line:11},msn:{name:'MSN',count:40,width:22,height:22,line:8}} //
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="javascript">JavaScript</option><option value="css">CSS</option><option value="php">PHP</option><option value="csharp">C#</option><option value="cpp">C++</option><option value="java">Java</option><option value="perl">Perl</option><option value="python">Python</option><option value="ruby">Ruby</option><option value="vb">Visual Basic</option><option value="delphi">Delphi</option><option value="as3">Action Script 3</option><option value="sql">SQL</option><option value="plain"> </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.pasteText('<pre class="brush: '+jType.val()+';">\r
'+jValue.val()+'\r
</pre>');
_this.hidePanel();
return false;
});
_this.showDialog(jCode);
}
}
}
});
});
</script>
</head>
<body>
......
<textarea name="editor" id="editor" />{{$art.content}}</textarea>
......
</body>xhEditor編集インタフェース効果図:
次に、バックグラウンドにデータを保存する場合、「」が「<pre>」に符号化されないことを確保するために、予めデータを前処理する.それ以外の場合、ハイライトコードを正しく表示できません.コードは次のとおりです.// “<pre>” “<pre>” $data['content'] = html_entity_decode($_POST['editor']);
最後にsyntaxhighlighterコードハイライト処理コード(ダウンロードアドレス:http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download)をダウンロードし、適切なディレクトリの下に解凍します.次に、コードブラウズページテンプレートに次のコードを追加します.次のようになります.<head> <!-- // jQuery --> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushBash.js"></script> <!-- <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCpp.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushDelphi.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushDiff.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushGroovy.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushRuby.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushVb.js"></script> --> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCSharp.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPhp.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPlain.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPython.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushScala.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushSql.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPerl.js"></script> <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCore.css"/> <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemeDefault.css"/> <script type="text/javascript"> $(function(){ SyntaxHighlighter.config.clipboardSwf = '../libs/syntaxhighlighter/scripts/clipboard.swf'; SyntaxHighlighter.config.strings = { expandSource: ' ', viewSource: ' ', copyToClipboard: '', copyToClipboardConfirmation: ' ', print: ' ', help: ' ', //alert: '
', noBrush: ' ：', brushNotHtmlScript: ' html-script ：', aboutDialog: '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>About SyntaxHighlighter</title></head><body style="font-family:Geneva,Arial,Helvetica,sans-serif;background-color:#fff;color:#000;font-size:1em;text-align:center;"><div style="text-align:center;margin-top:3em;"><div style="font-size:xx-large;">SyntaxHighlighter</div><div style="font-size:.75em;margin-bottom:4em;"><div>version 2.1.364 (October 15 2009)</div><div><a href="http://alexgorbatchev.com" target="_blank" style="color:#0099FF;text-decoration:none;">http://alexgorbatchev.com</a></div><div>If you like this script, please <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2930402" style="color:#0099FF;text-decoration:none;">donate</a> to keep development active!</div></div><div>JavaScript code syntax highlighter.</div><div>Copyright 2004-2009 Alex Gorbatchev.</div></div></body></html>' } //SyntaxHighlighter.config.tagName = 'pre'; SyntaxHighlighter.config.bloggerMode = true; // <br> ， 。 //SyntaxHighlighter.config.stripBrs = false; SyntaxHighlighter.all(); }); </script> </head>
コードハイライト効果図:
フォーラム投稿:http://qeephp.com/bbs/viewthread.php?tid=10990&page=1&extra=#pid56781
