PHP で、TinyMCE を使う。

TinyMCE という AJAX (JavaScript) ベースの HTML エディタのライブラリがある（オンラインのデモはこちら）。これは単体のエディタとして使えように提供されているものではなく、Drupal などの CMS と連動できることを目的として作られている。もちろん自分でこのライブラリを利用する HTML ページを 1枚書いて、オフラインで使ってもよいのだが、せっかくなので PHP と連動させてみた。作った HTML ソースは任意のメールアドレスに送信できるようにした。

ツールバーのカスタマイズは実はそんなに難しくない。詳しくはコードを見ていただきたいが、独断と偏見の最小構成で以下のようにカスタマイズしてみた。

TinyMCE ツールバーカスタマイズ例

設置の仕方だが、ウェブサーバに tinymce などのディレクトリを作ってそこに TinyMCE を解凍して置き、以下のスクリプトを index.php などの名前で保存してそのファイルを同ディレクトリにを置けばよい。

以下のスクリプトを使った TinyMCE のデモはこちら


<?php

<pre>// Copyright (c) 2006 twinkle.cc
// https://perltips.twinkle.cc/
// perltips@gmail.com

$ADMIN_EMAIL = 'perltips@gmail.com';
$TZ = -8;    // PST

$COOKIE_ID='tinymce';
$DOMAIN='tinymce.twinkle.cc';
$RELATIVE_PATH='/';
$COOKIE_EXPIRE = time() + 10 * 365 * 24 * 3600;    //有効期限 10年

// クッキー発行
setcookie($COOKIE_ID, $_POST['email'], $COOKIE_EXPIRE, $RELATIVE_PATH, ".$DOMAIN");
require_once 'phpMyBorder2.class.php';
$pmb = new PhpMyBorder();

    if($_POST['edit-body'] && $_POST['email']) {
        mb_language('ja');
        mb_internal_encoding('UTF-8');
//            setlocale(LC_TIME, 'ja_JP');
        $date = gmdate('Y/m/d H:i', time() + 3600 * ($TZ + date('I')));
        $content = $_POST['edit-body'];
        $from = "From: $ADMIN_EMAIL";
        $to = $_POST['email'];
        $subject = 'tinymce.twinkle.cc (' . $date . ')';
        // メール送信
        $result = mb_send_mail($to, $subject, $content, $from);
    }
?>




オンライン HTML エディタ - Powered by TinyMCE
<script language="javascript" type="text/javascript" src="./jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">

tinyMCE.init({
theme : "advanced",
mode : "exact",
elements : "edit-body",
plugins : "save,preview,contextmenu",
plugin_preview_width : "500",
plugin_preview_height : "600",
width: "600",
theme_advanced_toolbar_location : "top",
//    theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_resizing_use_cookie : true,
theme_advanced_buttons1 : "newdocument,formatselect,fontselect,fontsizeselect,cut,copy,paste",
theme_advanced_buttons2 : "undo,redo,separator,bold,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,numlist,bullist,separator,outdent,indent,separator,forecolor,separator,preview,separator,cleanup,save,separator,code",
theme_advanced_buttons3 : "",
save_enablewhendirty : true,
save_callback : "mySave",
content_css : "styles-content.css",    // テキストエリアのフォントサイズを指定
popups_css  : "styles-popups.css",    // ポップアップウィンドウのフォント名を指定
apply_source_formatting : true,        // 出力する HTML を整形してくれる。デフォルトはオフ。
language    : "ja_utf-8"            // 日本語対応
});

function mySave () {
if(document.form.email.value == '') {
    email = prompt('メールアドレスを入力してください。','');
    document.form.email.value = email;
}
return;
}

</script>



<p>


メールアドレス：">


マニュアル


</p>
<p align="center">
<textarea id="edit-body" name="edit-body" rows="30" cols="22">
<?php
print $_POST['edit-body'];
?>
</textarea>
</p>


Copyright © 2006 twinkle.cc All Rights Reserved.

PHP で、TinyMCE を使う。

Comments

Drupal で、TinyMCE のデモを作ってみた。