TinyMCE の編集ボタンの配置カスタマイズ方法

2012年1月31日 17:14 TinyMCE の編集ボタンの配置カスタマイズ方法

以前、自作のフォームに TinyMCE を導入して WYSIWYG エディタにする方法という記事を書きましたが、今回はその続編です。

上記の記事のコードを元にTinyMCEを自作フォームのtextareaに適用すると、編集用のツールバーには四行にわたって大量のボタンが表示されます。

もちろんWYSIWYGエディタなので多機能なのは良いのですが、中には「これいらねーだろ」ってボタンや、インターフェイスによっては「色々あると重すぎるから必要なボタンだけでいいや」というケースなんかもあるかと思います。

そういった場合、TinyMCE設置用のJavaScriptの以下の部分を修正すれば、設置するボタンの種類を変更できます。

<script language="javascript" type="text/javascript">
tinyMCE.init({
	mode : "textareas",
	theme : "advanced",
	plugins : "safari,spellchecker,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,imagemanager,filemanager",

	// 以下の四行が各行のボタンの設定箇所
	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,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
	// ↑ボタン配置設定ここまで↑
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_resizing : true,

	content_css : "styles.css",
});
</script>

それぞれ、「theme_advanced_buttons1」「theme_advanced_buttons2」「theme_advanced_buttons3」「theme_advanced_buttons4」が、一~四行目に何のボタンを配置するかという設定部分です。

それぞれの行に「save,newdocument,|,bold,italic,underline,strikethrough,|,...」という具合に、カンマ区切りで設定するボタンの種類が書かれています。
それぞれのボタンがどういう名前と紐付けられているかは、実際の画面と比較すれば容易でしょう。
また、「|」は区切り線です。区切り線をツールバー内に入れる場合も、「|」自体をカンマで区切って入れます。

上記のコードでは四行にわたってツールバーが表示されますが、この行数を減らしたい、という場合、表示したくない行以降の「theme_advanced_buttons*」の項目自体を削除してしまえば大丈夫のようです。
ただし、例えば、

	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 : "",

という風に、「この行からは要らないよ」という行の設定を「""」で空に設定しないと、環境によっては空行が挿入されて見た目が変になってしまったりしてしまうケースがあるようですので注意。

関連するブログ記事
スポンサード リンク
カテゴリー
JavaScript
タグ
JavaScript | textarea要素 | TinyMCE | WYSIWYG | xhtml

コメント(9) | トラックバック(0)

 

JavaScript で setTimeout を使って定期的に処理を行なう方法

JavaScript で、数秒おきとか数分おきに定期的に自動で処理を行なう方法の解説です。
ブラウザ上でタイマー的なことを実現したり、Ajax 非同期通信と平行してブラウザ上の何らかの値を監視したりするのにも使えます。

window.setTimeout() を使うと、指定した時間の後に処理を実行できるので、これを利用してループを行ないます。

// 最初の実行
TimerCount();

function TimerCount(){
	// ここに定期的に行なう処理を書く

	// 1秒ごとに実行
	window.setTimeout("TimerCount()",1000);
}

setTimeout の書式は 「setTimeout(処理,待機する時間(1/1000秒単位))」となっているので、1秒ごとに実行する場合は 1000 を指定します。1分なら 60000 ですね。

関連するブログ記事
カテゴリー
JavaScript
タグ
JavaScript | setTimeout

コメント(13) | トラックバック(2)

 

自作のフォームに TinyMCE を導入して WYSIWYG エディタにする方法

以前、MT4 のお勧め WYSIWYG エディタ TinyMCE-MTPluginというエントリでも紹介した TinyMCE ですが、元々は WYSIWYG(なんかボタンが沢山あってワープロ感覚でHTMLを編集できるやつ)エディタ用の汎用スクリプトなので、Movable Type 等の CMS だけでなく、当然自作のフォームにも導入することができます。

というわけで、今回は自作のフォームに TinyMCE を導入して、WYSIWYG エディタにする方法の解説です。

TinyMCE のソースをダウンロードする

TinyMCEのサイトで、本体のソースをダウンロードしましょう。

ダウンロードページから、最新の Main package をダウンロードすれば良いと思います。

圧縮ファイルを解答すると、「examples」「jscripts」というディレクトリが出てきます。
これをまとめて、WYSIWYG のフォームを設置したいところへアップロード。

フォームページを用意する

texrarea 要素のあるフォームhtml を用意します。
その html 内に、TinyMCE を呼び出す JavaScript を記述してください。

以下、サンプルソースです。

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-script-type" content="text/javascript;charset=UTF-8" />
<title>WYSIWYGエディタ</title>
<!-- 下記の行の src 属性は、TinyMCE をアップしたディレクトリを指定 -->
<script language="javascript" type="text/javascript" src="./jscripts/tiny_mce/tiny_mce.js"></script> 
<script language="javascript" type="text/javascript">
tinyMCE.init({
	mode : "textareas",
	theme : "advanced",
	plugins : "safari,spellchecker,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,imagemanager,filemanager",

	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,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_resizing : true,

	// WYSIWYGエディタに適用する CSSファイルを指定する
	content_css : "styles.css",
});
</script>


</head>

<body>

<form method="post" action="wysiwyg.cgi">
  <!-- 以下のテキストエリアが WYSIWYG になる -->
  <textarea name="textbody" cols="100" rows="15"></textarea><br />
  <input type="submit" value="投稿" />
</form>

</body>
</html>

これで、以下のような WYSIWYG エディタが表示されるはずです。

01.JPG
関連するブログ記事
カテゴリー
JavaScript | xhtml/html
タグ
form要素 | JavaScript | textarea要素 | TinyMCE | WYSIWYG | xhtml

コメント(8) | トラックバック(0)

 

perl / PHP / JavaScript 各言語での URL(URI)エンコード・デコード方法まとめ

日本語等の2バイト文字を URL として使用するための、URLエンコード・デコード方法を、perl / PHP /JavaScript の各言語別にまとめてみました。

と言っても、PHP と JavaScript はそれ専用の関数が用意されてるから簡単なんですけどね。

perl で URLエンコード・デコード

perl で URLエンコードするには、以下のようにします。

$word =  "はぴはぴはっぴー♪";
$word =~ s/([^0-9A-Za-z_ ])/'%'.unpack('H2',$1)/ge;
$word =~ s/\s/+/g;

これで「はぴはぴはっぴー♪」という文字列が「%82%cd%82%d2%82%cd%82%d2%82%cd%82%c1%82%d2%81%5b%81%f4」という文字列にエンコードされます。

続いて、perl での URLデコード方法。

$word =  "%82%cd%82%d2%82%cd%82%d2%82%cd%82%c1%82%d2%81%5b%81%f4";
$word =~ s/+/\s/g;
$word =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/ge;

これで「%82%cd%82%d2%82%cd%82%d2%82%cd%82%c1%82%d2%81%5b%81%f4」という文字列が「はぴはぴはっぴー♪」という文字列にデコードされます。

PHP で URLエンコード・デコード

前述の通り、PHP にはURLエンコード・デコード用の関数が用意されているので、非常に簡単です。

#-- URLエンコード
$word = "はぴはぴはっぴー♪";
$encoded = urlencode($word);

#-- URLデコード
$encoded = "%82%cd%82%d2%82%cd%82%d2%82%cd%82%c1%82%d2%81%5b%81%f4";
$word = urldecode($encoded);

JavaScript で URLエンコード・デコード

PHP と同じく、JavaScript にも URLエンコード・デコード用の関数が用意されているので、同じく簡単です。

// URLエンコード
var word = "はぴはぴはっぴー♪";
var encoded = encodeURI(word);

// URLデコード
var encoded = "%82%cd%82%d2%82%cd%82%d2%82%cd%82%c1%82%d2%81%5b%81%f4";
var word = decodeURI(encoded);
関連するブログ記事
カテゴリー
JavaScript | PHP | perl/CGI
タグ
decodeURI | encodeURI | JavaScript | perl | PHP | urldecode | urlencode | 正規表現

コメント(1) | トラックバック(0)

 

JavaScript で「このページを印刷」ボタンを設置する方法

わざわざエントリー上げるほどのことなのかという気もしますが、備忘録ということで。

ブラウザで表示しているページの印刷は、JavaScipt の、

window.print();

で行なえます。

なので、サイト上に印刷ボタンを設置したければ、

<form method="get" action="#">
  <input type="button" value="印刷する"
  onclick="window.print();" />
</form>

とでも書いておけば以下のようなボタンが表示されます。

関連するブログ記事
カテゴリー
JavaScript
タグ
form要素 | input要素 | JavaScript | xhtml | 印刷

コメント(5) | トラックバック(0)

 

ボタンクリックでテーブルに行を追加する JavaScript

ユーザー側から任意の複数行のデータをフォームから受け取る場合に、入力フォームのテーブルの行を、ボタンクリックで動的に追加していく処理というのは、結構使えるんじゃないかなと思います。

例えば、以下のようなテーブルがある場合。

<table border="1" cellspacing="0" cellpadding="4" id="table1">
  <tr>
    <th>名前</th>
    <th>住所</th>
    <th>TEL</th>
  </tr><tr>
    <td class="name"><input type="text" name="name" value="" size="10" maxlength="20" /></td>
    <td class="address"><input type="text" name="address" value="" size="10" maxlength="20" /></td>
    <td class="tel"><input type="text" name="tel" value="" size="10" maxlength="20" /></td>
  </tr>
</table>

「insertRow」や「insertCell」を使って、「table1」という ID を持つテーブルに、行を追加します。

var table1 = document.getElementById("table1");
var row1 = table1.insertRow(1);	// 行を追加
var cell1 = row1.insertCell(0);	// 一つ目のセルを追加
var cell2 = row1.insertCell(1);	// 二つ目のセルを追加
var cell3 = row1.insertCell(2);	// 三つ目のセルを追加

「insertRow」「insertCell」の各引数は、何番目の行・セルを追加するかを指定します。
IEでは引数なしでも動きますが、FireFoxでは引数が必須なので注意。

で、最初のサンプルでは各セルに class を指定していたわけですが、追加したセルに class を指定するには、「setAttribute」「className」等を使います。

cell1.setAttribute("class","name");
cell2.setAttribute("class","address");
cell3.setAttribute("class","tel");
cell1.className = 'name';
cell2.className = 'address';
cell3.className = 'tel';

また、セルの中身である input 要素等を入れるのには、「innerHTML」を使います。

var HTML1 = '<input type="text" name="name" value="" size="10" maxlength="20" />';
var HTML2 = '<input type="text" name="address" value="" size="10" maxlength="20" />';
var HTML3 = '<input type="text" name="tel" value="" size="10" maxlength="20" />';
cell1.innerHTML = HTML1;
cell2.innerHTML = HTML2;
cell3.innerHTML = HTML3;

ただ、これだとボタンをクリックされる毎に追加される input 要素の name 属性が、全て「name」「address」「tel」になってしまうので、別途カウンタを回して「name1」「name2」......みたいな感じになるようにした方が良いでしょう。

この辺の事も踏まえたうえでのサンプルコードは以下。

<script type="text/javascript">
var counter = 0;
function AddTableRows(){
	// カウンタを回す
	counter++;

	var table1 = document.getElementById("table1");
	var row1 = table1.insertRow(counter);
	var cell1 = row1.insertCell(0);
	var cell2 = row1.insertCell(1);
	var cell3 = row1.insertCell(2);

	// class の付与は UserAgent によって
	// 挙動が違うっぽいので念のため両方の方法で
	cell1.setAttribute("class","name");
	cell2.setAttribute("class","address");
	cell3.setAttribute("class","tel");
	cell1.className = 'name';
	cell2.className = 'address';
	cell3.className = 'tel';

	var HTML1 = '<input type="text" name="name' + counter + '" value="" size="10" maxlength="20" />';
	var HTML2 = '<input type="text" name="address' + counter + '" value="" size="10" maxlength="20" />';
	var HTML3 = '<input type="text" name="tel' + counter + '" value="" size="10" maxlength="20" />';
	cell1.innerHTML = HTML1;
	cell2.innerHTML = HTML2;
	cell3.innerHTML = HTML3;
}
</script>

<table border="1" cellspacing="0" cellpadding="4" id="table1">
  <tr>
    <th>名前</th>
    <th>住所</th>
    <th>TEL</th>
  </tr><tr>
    <td class="name"><input type="text" name="name0" value="" size="10" maxlength="20" /></td>
    <td class="address"><input type="text" name="address0" value="" size="10" maxlength="20" /></td>
    <td class="tel"><input type="text" name="tel0" value="" size="10" maxlength="20" /></td>
  </tr>
</table>
<form method="GET" action="#">
  <input type="button" value="テーブルに行を追加" onClick="AddTableRows();" />
</form>

実際の挙動

名前 住所 TEL

ボタンクリックでテーブルに行が追加されるはずです(ちゃんと動くかな)。
各行の input 要素の name 属性も、「name1」「name2」......となっていくはず。

関連するブログ記事
カテゴリー
JavaScript
タグ
class属性 | form要素 | input要素 | JavaScript | name属性 | table要素 | td要素 | tr要素 | xhtml

コメント(1274) | トラックバック(2)

 

「お気に入りに追加」「ブックマークに追加」ボタンのまとめ

いわゆる、ブラウザの「お気に入り」「ブックマーク」への追加ボタン・リンクのソースのまとめです。

Internet Explorer の場合

フォームの場合は以下のような感じ。

<form method="GET" action="#">
<input type="button" value="お気に入りに追加"
onClick="window.external.AddFavorite('URI','タイトル');" />
</form>

アンカーテキストの場合は、以下のような感じ。

<a href="javascript:window.external.AddFavorite('URI','タイトル');">お気に入りに追加</a>

FireFox の場合

フォームの場合は以下のような感じ。

<form method="GET" action="#">
<input type="button" value="お気に入りに追加"
onClick="window.sidebar.addPanel('サイト名','URI','')" />
</form>

アンカーテキストの場合は、以下のような感じ。

<a href="javascript:window.sidebar.addPanel('サイト名','URI','')">お気に入りに追加</a>

Opera の場合

<a href="URI" rel="sidebar" title="サイト名">お気に入りに追加</a>

au の EZweb の場合

<a href="device:home/bookmark?url=URI&amp;title=サイト名">お気に入りに追加</a>

DoCoMo の iモード や Softbank のケータイに関しては、資料が見つかりませんでした。

ソーシャルブックマークの場合

ソーシャルブックマークに関しては、はてなブックマークをはじめ、日本国内のサービスだけでも20種類くらいあるみたいです。

これら全てに対応したボタンを表示するのはちょっと辛いですが、それらを統合してひとつのボタンで対応できる、「AddClips」というサービスがあるので、こちらを利用すると良いかと思います。

「設置したボタンを通じて、どのソーシャルブックマークサービスに何回登録されたか」というデータも見ることができるので、非常に便利です。


参考: JavaScriptでFirefox使用者の閲覧しているページをブックマークするにはどうすればよいのでしょうか? - 教えて!goo

関連するブログ記事
カテゴリー
JavaScript | モバイル(携帯電話・ケータイ)Web
タグ
AddClips | au | a要素 | Firefox | form要素 | input要素 | Internet Explorer | JavaScript | Opera | xhtml | はてな | はてなブックマーク | ソーシャルブックマーク | ブックマーク | モバイル

コメント(22) | トラックバック(0)

 

このブログについて

阿部辰也

Webコンサルタントやシステムエンジニア、執筆業などをやっている、グッドホープ代表・阿部辰也のブログです。
Web技術系のTipsから仕事の話、趣味の話まで色々と。
人生は所詮生まれてから死ぬまでの壮大な暇つぶし。
だったら有意義に暇をつぶして生きましょー。

阿部辰也へのお仕事のご依頼・問合せはこちらからどうぞ。

Twitter: @t_abe
読書メーター: ID:Tatsuya

このブログのサイトマップ
このブログのはてなブックマーク数

Feed/RSS購読

タグクラウド

最近のトラックバック

阿部辰也の著書

77のキーワードで知る インターネットで稼ぐ 図解 ブログ・メルマガ・Webサイト構築の基本

77のキーワードで知る インターネットで稼ぐ 図解 ブログ・メルマガ・Webサイト構築の基本

頑張って書いたのに、出版後すぐに出版社が倒産して印税も貰えずじまいで俺涙目(笑)。

Powered by Movable Type 5.02

スポンサード リンク

はてなブックマーク



あわせて読みたい

t-abeの今読んでる本

t-abeの最近読んだ本

t-abeの今やってるゲーム

t-abeの最近やったゲーム