Apr 08

TinyMCEを使ったビジュアルエディタJavascript WYSIWYG Editor

HTML コメントはページの下に

TinyMCEを使ってWYSIWYGエディタ

HTMLのテキストエリアに追加して、簡単にWORDのようなエディタ化することが出来ます。タグを自分で書くことなく、WORDを使っているかのように簡単に出来てしまうというものです。

JavaScriptで作られていて、カスタマイズも比較的容易に出来るようになっています。勿論、日本語化も簡単です。

ダウンロード

TinyMCE HPより、ダウンロードします。
本体と、Languageパックをダウンロードします。

TinyMCEをダウンロード

Language Packページでは、必要な言語にチェックを入れ、画面下に行きダウンロード。

Language Packをダウンロード

セットアップ

解凍したら、 langpackのフォルダをtiny_mceフォルダ内に移動しましょう。
上書きで、LanguagePackが追加されます。

LanguagePackを、TinyMCE以下に上書き

tiny_mce/langs/に行ってみると、確かにja.jsが追加されています。

LanguagePackを移動した

一番簡単なのは、examplesを見ることです。
Ｗｅｂにアップし、index.htmlを見てみましょう。↓に置いてみました。

http://www.geocities.jp/live_t_k/tinytest/examples/

Full featuredを見ると、Wordっぽいテキストエディタになりましたね。

とりあえずサンプルを見てみる

メニューなどを日本語化

メニューなどを日本語化するには、JavaScriptのtinyMCE.init内に言語選択を書くだけです。

language : “ja”,

日本語を有効にする

とだけ書けば、すぐ日本語化されます。

あとは、フォームにして、送信されたものをＤＢに入れれば、Google Docsを自作した気分になれます。

参考ＵＲＬ

TinyMCE
http://tinymce.moxiecode.com/

TinyMCE wiki
http://wiki.moxiecode.com/index.php/TinyMCE:Index

WordPress plugin TinyMCE Advanced
http://lovelog.eternal-tears.com/wordpress/wp-plugin/tinymce-advanced-ja/

Webのあれこれ格納庫
http://web.hirot.jp/archives/000168.php

TinyMCE with PHP
http://wiki.moxiecode.com/index.php/TinyMCE:PHP_Example

前後の記事

« 携帯サイトをPCで見る。FireFoxに偏っているが。｜｜phpでPDF作成メモ »

関連した記事

トラックバック＆Pingback

この記事が気に入ったりした方は、自分のブログを書くときに「下のURLをコピーして、自分のブログ投稿時のトラックバック欄にペースト」してください。つながります。
URL:

コメント　（ 0 ）

コメント記入欄

Copyright(c) 小山太郎.com　All rights reserved.