Mazn.net

やってみて 調べてみて 苦労しなけりゃ 箱は動かじ

ブラウザ上でのWYSIWYG HTMLエディター

   

このサイトで使用しているWordPressでも記事作成するときに使用しているようなWYSIWYGのHTMLエディターを自分のWebアプリに組み込もうとしてみた。

まずどのようなHTMLがあるか調べてみたところ、以下の物を発見。

一番上のfckeditorをまずは使ってみたので、メモ。
※事前にApacheやIISといったWebサーバを用意しておいてください

fckeditorのzipファイルをダウンロードし、zipファイル を展開。展開してできたディレクトリを”fckeditor”というディレクトリ名でWebサーバに配置。
次にエディタを表示させるhtmlファイル(index.html)を以下のように記述。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
      window.onload = function()
      {
        var oFCKeditor = new FCKeditor( 'mytext' ) ;
        oFCKeditor.BasePath = "fckeditor/" ;
        oFCKeditor.ReplaceTextarea() ;
      }
</script>
<title>fckeditor</title>
</head>
<body>
fckeditor
<br>
<textarea id="mytext" rows="50" cols="40"></textarea>
</body>
</html>

ここで、

var oFCKeditor = new FCKeditor( 'mytext' ) ;

の’mytext’ と

<textarea id="mytext" rows="50" cols="40"></textarea>

の”mytext”を合わせることで、テキストエリアをHTMLエディタに切り替えることができます。

fckeditorとhtmlファイルの配置は以下の通り。

/ - index.html
  - fckeditor/ - fckconfig.js
               - fckeditor.js
               -  ・・・・・ いろいろなファイルやディレクトリ

あとはWebブラウザでこのhtmlファイルにアクセスすればOK。エディタとしての機能は充実していて、使いやすそうだがちょっと動作が重たい気がします。

 - IT技術, プログラミング

336px

Message

メールアドレスが公開されることはありません。

  関連記事

no image
VirtualBox 5.0上のUbuntuの時間がずれる@Windows10

Windows 10 上にVirtualBox 5.0をインストールして、Ubu …

no image
すでに同名のdebパッケージがインストールされているか確認する@Ubuntu 14.04

リポジトリにはまだ登録されていないパッケージを手動でdpkgを使ってアップデート …

no image
rubyの文字コードについて考える

rubyでは、1.6以降漢字コードを特別に解釈しなくなったようです。 maznは …

no image
Cygwinでscreenコマンドが使えなくなる@Windows 10

Windows 10 上のCygwin (64bit版使用)で、screen コ …

no image
EntityBean @ JBoss 4.2

JBoss 4.2でEntityBeanを作ってみた。 @Idアノテーションは書 …

no image
pythonスクリプトをダブルクリックで起動する→拡張子関連づけ詳細設定@Windows 7 with python 2.7

拡張子 .py を持ったファイルをダブルクリックで起動する方法です。 ※Wind …

no image
ciscoコマンド覚え書き

普段あまりcisco製品触ることないので単なる覚え書き いろいろな情報を一気に取 …

no image
LinuxでWindowsのように休止状態を使用する@Debian etch

etchからは正常に休止(hibernate s4)が使用できるようです。 # …

no image
VMware Player 3.0 でのネットワーク設定

VMware Player 3.0 にはネットワーク設定の画面がついていないので …

no image
ddコマンドと圧縮・展開@CentOS 5

dd コマンドの便利な使い方のあれこれです。 通常ddコマンドは、if, ofの …