数日前、私はブログの挿入コードを使いやすいと感じました。そのため、SinaのHTMLエディターはTinymceに置き換えられました。コードの簡単な挿入が開発されました。 。 。以下は私の開発プロセスです。
まず、私のTinymceバージョンはバージョン:3.2.7(2009-09-22)です。
Tinymce挿入コードでは、Tinymce.execcommand( 'mceinsertcontent'、false、value)を呼び出す必要があります。 Tinymceの方法。パラメーターを変更する必要はありません。値は挿入したいものです。
たとえば、私は関数を書きました、
コードコピーは次のとおりです。
関数inserthtml(value)
{
tinymce.execcommand( 'mceinsertcontent'、false、value);
}
後で、この例では、ダウンロードが提供されます。例で。合計には3つのドキュメントがあります。
tinymce.html insertcode.php save.phpこれら3つのファイル。
tinymce.htmlは、Tinymceテキストボックスページです。
メインコードは次のとおりです。
コードコピーは次のとおりです。
<スクリプトタイプ= text/javascript src = http://www.vevb.com/tinymce/tiny_mce.js> </script>
<script type = text/javascript>
tinymce.init({
//一般的なオプション
convert_urls:false、
モード:正確、
要素:article_content、
//モード:textareas、
テーマ:Advanced、
プラグイン:サファリ、ページブレイク、スタイル、レイヤー、テーブル、保存、アドバイス、アドヴィマージ、アドバリンク、感情、inlinePopups、insertDateTime、プレビュー、メディア、検索録画、印刷、コンテキストメン、ペースト、方向性、フルスクリーン、非視覚、視覚障害者、xhtmlxtras、Wordcount、breaks
//テーマオプション
theme_advanced_buttons1:save、newdocument、|、bold、yatalic、underline、strikethrough、|、justifyleft、justifycenter、justifylight、justifyfull、styleSelect、formatselect、fontselect、fontsizeSelect、fontsizeSelect、
theme_advanced_buttons2:カット、コピー、ペースト、パステキスト、パステワード、|、検索、置換、交換、|、ブリスト、numlist、|、autdent、indent、blockquote、|、undo、redo、|、link、link、アンカー、画像、クリーンアップ、コードなど
theme_advanced_buttons3:Tablecontrols、|、Hr、removeformat、visualaid、|、sub、sup、|、charmap、emotions、iespell、media、advhr、|、print、|、ltr、rtl、|、fullscreen、
theme_advanced_buttons4:insertlayer、moveforward、movingbackward、absolute、|、styleprops、|、cite、abbr、頭字語、del、ins、attribs、|、visualchars、nonbreaking、テンプレート、ページブレイク、
theme_advanced_toolbar_location:top、
theme_advanced_toolbar_align:左、
theme_advanced_statusbar_location:bottom、
theme_advanced_resizing:true、
//コンテンツの例CSS(サイトCSSである必要があります)
content_css:css/content.css、
//リンク/画像/メディア/テンプレートダイアログのリストをドロップします
template_external_list_url:lists/template_list.js、
external_link_list_url:lists/link_list.js、
external_image_list_url:lists/image_list.js、
media_external_list_url:lists/media_list.js、
//テンプレートプラグインの値を交換します
template_replace_values:{
ユーザー名:一部のユーザー、
StaffID:991234
}
});
</script>
<script type = text/javascript>
関数inserthtml(value)
{
tinymce.execcommand( 'mceinsertcontent'、false、value);
}
</script>
ここで、JSコードはTinymceを初期化することです。ダウンロードの例にはTinymceが含まれていません。自分でダウンロードする必要があります。次に、JSコードのSRCを変更します。
コードコピーは次のとおりです。
<入力名=ボタンタイプ=ボタンonclick = window.open( 'insertcode.php'、 'insert code'、 'height = 500、width = 600、top = 300、left = 300、toolbar = no、no、no、scrollbars = no、recizable = no、no、no、no = no')価値
上記のコードは、insertCode.phpファイルを開くために使用されます。
次に、InsertCodeを見てみましょう。このファイルのコード。
まず、JSコード
コードコピーは次のとおりです。
<スクリプト言語= javascript src = http://www.gosoa.com.cn/js/jquery.js> </script>
<スクリプト言語= javascript>
関数insertCode()
{
var value = $( '#postcontent')。html();
var codetype = $( '#codetype')。val();
// window.opener.inserthtml( '<textarea rows = 3 cols = 50 name = code class ='+codetype+'>'+value+'</textarea>');
window.opener.inserthtml( '<pre name = code class ='+codetype+'>'+value+'</pre>');
window.close();
}
</script>
次はPHPおよびHTMLコードです
コードコピーは次のとおりです。
<?php
error_reporting(0);
$ content = $ _post ['content'];
if(!empty($ content))
{
$ codetype = $ _post ['codetype'];
echo '<div id = postcontent>';
$ content = htmlspecialchars($ content);
echo $ content;
echo '</div>
<入力タイプ=非表示名= codetype id = codetype value = '。$ codetype。' />
<入力型=ボタン名=送信値= onclick = insertCode()style = border:1px solid#000;ラインハイト:18px;幅:60px;/> ';
}それ以外
{
?>
<divスタイル=マージン:0 auto>
<form id = form1 name = form1 method = post action = insertcode.php>
<label>挿入するコードの種類を選択します
<name = codetype id = codetype>を選択します
<オプション値= 'php'> php </option>
<オプション値= 'js'> js </option>
<オプション値= 'html'> html </option>
<オプション値= 'c'> c </option>
<オプション値= 'ASP'> ASP </option>
<オプション値= 'xml'> xml </option>
<オプション値= 'java'> java </option>
<オプション値= 'java'> java </option>
<オプション値= 'csharp'> c#</option>
<オプション値= 'sql'> sql </option>
</select>
</label>
<label>
<textarea name = content id = content cols = 30行= 20 style = width:600px;高さ:200px;ボーダー:1pxダッシュ#333> </textarea>
</label>
<p>
<ラベルスタイル=パディング左:50px;>
<入力タイプ=送信name = submit value = submit style = border:1px solid#000;ラインハイト:18px;幅:60px;/>
</label>
</p>
<p> </p>
</form>
</div>
<?php
}
?>
insertCode.phpでは、insertCode()関数を使用して、tinymce.htmlページのinserthtml()関数を呼び出し、tinymce.htmlページにコードを挿入します。
コードでは、なぜ '+value+'が必要なのですか?
ページを表示しているため、SynTaxhighlighterプラグインを使用してコードを強調表示します。
ここで説明するもう1つのポイント、$ content = htmlspecialchars($ content);コード自体のHTMLSpecialCharsエスケープ操作を実行しました。このようにして、データベースに挿入されたコードは安全です。
OK、save.phpをもう一度見てみましょう。このページは、提出されたコンテンツを表示するために使用されます。
メインコードは次のとおりです。
コードコピーは次のとおりです。
<?
$ article_content = $ _post ['article_content'];
関数トランスコード($ str)
{
if(empty($ str))
{
falseを返します。
}
$ str = str_replace( ''、 ''、$ str);
$ str = str_replace( ''、 ''、$ str);
$ str = str_ireplace( '<br>'、n、$ str);
$ str = str_ireplace( '<pre'、 '<pre name = code'、$ str);
$ strを返します。
}
Echo Transcode($ article_content);
?>
<スクリプトclass = javascript src =/tinymce/lightcode/scripts/shcore.js> </script>
<スクリプトclass = javascript src =/tinymce/lightcode/scripts/shbrushcsharp.js> </scrip>
<スクリプトclass = javascript src =/tinymce/lightcode/scripts/shbrushphp.js> </scrip>
<スクリプトclass = javascript src =/tinymce/lightcode/scripts/shbrushjscript.js> </scrip>
<スクリプトclass = javascript src =/tinymce/lightcode/scripts/shbrushjava.js> </scrip>
<スクリプトclass = javascript src =/tinymce/lightcode/scripts/shbrushvb.js> </scrip>
<スクリプトclass = javascript src =/tinymce/lightcode/scripts/shbrushsql.js> </scrip>
<スクリプトclass = javascript src =/tinymce/lightcode/scripts/shbrushxml.js> </scrip>
<スクリプトclass = javascript src =/tinymce/lightcode/scripts/shbrushdelphi.js> </script>
<スクリプトclass = javascript src =/tinymce/lightcode/scripts/shbrushpython.js> </scrip>
<スクリプトclass = javascript src =/tinymce/lightcode/scripts/shbrushruby.js> </scrip>
<スクリプトclass = javascript src =/tinymce/lightcode/scripts/shbrushcss.js> </script>
<スクリプトclass = javascript src =/tinymce/lightcode/scripts/shbrushcpp.js> </scrip>
<スクリプトclass = javascript>
dp.syntaxhighlighter.highlightall( 'code');
</script>
わかりました、それは終わりました。