PerlのHTML-TreeBuilderとJavaScriptのTinyMCEでWebサイトに記事作成機能を付けてみましょう。

Webサイトに記事作成機能を付ける方法

TinyMCEの導入- TinyMCEの特徴- TinyMCEのダウンロード- TinyMCEの設置-

従来、Dreamweaver やホームページビルダーなどのホームページ作成ソフトを使ってページを作成して
FTPなどでアップロード、メニューに項目を追加する流れが主流でした。

ブログやCMSは、Webブラウザで記事を作成することで詳しい知識や専門のソフトウェアを必要とせずに誰でも簡単に記事を作成できるのが特徴。
その手軽さ故、ある程度詳しい人でもブログを使った記事の配信をしている人も多い。

既に多くのブログでTinyMCEについて解説されてあるのだが幾分、TinyMCEの設置方法ばかりで編集結果をサーバー上に保存する方法は、なかなか説明されていなかったので、サーバーに保存する方法について解説します。

TinyMCEの導入-

TinyMCEは、無償で配布されているオープンソースのJavaScript製のHTMLエディタです。
ブログやCMSの記事作成機能として利用されています。もちろんブログだけでなく通常のWebサイトにも使えます。

TinyMCEの特徴-

Webブラウザで記事を作成できるのでアップロードなどの手間が省ける。
凝ったことをしなければHTMLの知識などは、不要。
スタイルシートをエディタ部分に適応できるので視覚的にもわかりやすい。
比較的、綺麗なHTMLを生成することができる。
プラグインで機能を拡張することができる。

TinyMCEのダウンロード-

http://tinymce.moxiecode.com/

DownloadからMain packageをダウンロードして任意のフォルダに解凍する。

TinyMCEの設置-

examplesフォルダにある『full.html』をブラウザで開けば、ローカルでも使えます。
但しTinyMCEが使えるだけで保存機能もなく適切な設定もされていません。

TinyMCEの設定は、HTMLファイルに記述します。デフォルトで入ってるfull.htmlから抜粋すると
下記のような感じで記述されています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Full featured example</title>
<!-- TinyMCE -->
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
        // Example content CSS (should be your site CSS)
        content_css : "css/content.css",
        // Drop lists for link/image/media/template dialogs
        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",
        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        }
    });
</script>
<!-- /TinyMCE -->
</head>
<body>
    <h3>Full featured example</h3>
    <!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
    <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
デフォルトのHTML
    </textarea>
</body>
</html>

TinyMCEの設定

設定は、tinyMCE.initに決められた値を記入する。

<script type="text/javascript">
    tinyMCE.init({
  // 略
    });
</script>

mode : "textareas",

項目と値をコロン : で区切って書く。
値は、"abc" のようにダブルクォーテーションで囲む。シングルクォーテーションでも良い。
最後の項目以外は、, カンマを最後に加える。?

主な設定項目

項目	概要	推奨、主な値 ( - は、デフォルト推奨)
language	ボタンやツールバー、ダイアログに表示する言語	ja
docs_language	ドキュメントの言語	ja
height	エディタの高さ	100%
width	エディタの?I?	90%
nowrap	エディタ内の自動改行	false
apply_source_formatting	HTMLの自動整形(preやtextareaが崩れる)	false
table_inline_editing	インラインテーブルをFirefox/Mozillaで使うか	true
content_css	エディタ（編集領域）に適応するスタイルシート	MainStyle.css
theme_advanced_blockformats	フォーマットから挿入できるタグ	p,div,h1,h2,h3,h4,h5,h6,pre,code
mode	どの要素をエディタにするかの指定。	textareas
theme	外見（テーマ）の指定	advanced
skin	外見（スキン）の指定	-
dialog_type	ダイアログの表示方法	modal
plugins	使用するプラグインの指定	-
theme_advanced_buttons1	ツールバーの一段目に設置するボタンを指定	-
theme_advanced_buttons2	ツールバーの二段目に設置するボタンを指定	-
theme_advanced_buttons3	ツールバーの三段目に設置するボタンを指定	-
theme_advanced_buttons4	ツールバーの四段目に設置するボタンを指定	-
theme_advanced_toolbar_location	ツールバーの位置	-
theme_advanced_toolbar_align	ツールバーのボタンの整列方向	-
theme_advanced_statusbar_location	ステータスバーの位置	-
theme_advanced_resizing	サイズを変更できるようにするか	true

次のドキュメント：所有者ApacheになってFTPから消せないファイルの削除前のドキュメント：SyntaxHighlighterを使うとHTML-lintで警告される。

印刷用ページとして表示しています。
このページを印刷するには、ここをクリックしてください。
通常の表示に戻るには、ブラウザの更新ボタンかF5キーを押してください。

このドキュメントへのトラックバック

コメント

名前

Webサイト、ブログのURL

投稿する内容をよく確認して送信して下さい。

コメントは、まだありません。

トラックバック

トラックバックURL

トラックバックURLと内容をよく確認して送信して下さい。

トラックバックは、まだありません。

HTML lint

CSS Validation Service ページを編集アクセス情報