運営サイト
パートナーサイト
ヨシダ制作メモ
らくがき日報ゆるゆるスマホbiz活用ひまつぶしゲーム選ゆるゆるPHP入門CakePHPでCMS

ウェブ制作のあれこれをメモります。

  |   ヨシダ制作メモ TOP  |   elRTE,elFinder… >>

elRTE,elFinder(jQueryベースのWYSIWYGエディタ)のインストール方法 その1

2010年05月10日 10:30

有名なWYSIWYGエディタにCKEditorやTinyMCEがありますが、画像などをアップロードするファイルマネージャーが両方とも有償になっています。
そんなところに今年の3月、ロシア発jQueryベースの「elRTE(WYSIWIGエディタ)」と「elFinder(ファイルマネージャー)」がリリースされていました。無償です。(※執筆時バージョンrc4)
Open source WYSIWYG editor for website
※elFinder is issued under a 3-clauses BSD license.
※elFinder uses and comes with jQuery and jQuery-UI witch are issued under MIT and GPL licenses.

デモはこんな感じ

開発者さんありがとう!と快哉を叫びつつウェブサイトに設置しようとしたところ、まだ発表されて日が浅いためドキュメントが少ない上にフォーラムもメインがロシア語のため分からない…!

と、設置するのにいくつかはまった点があったので備忘録としてここに記しておきます。

 

●elRTE(WYSIWIGエディタ)インストール
elRTEの設置自体は非常に簡単です。

elRTE公式サイト、右カラムの「DOWNLOAD」からTGZまたはZIPをクリックしてダウンロード&解凍します。
解凍フォルダ直下の
elrte.htmlをブラウザで開くと、そこにWYSIWYGエディタが現れます。あらカンタン。
ですが、今回はもうちょっとカンタンにするためにelrte.htmlを書き換えます。
 
elrte.html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>elRTE</title>

<!-- jQuery and jQuery UI 読み込み -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="js/ui-themes/base/ui.all.css" type="text/css" media="screen" charset="utf-8">

<!-- elRTE javascript読み込み -->
<script src="js/elrte.full.js" type="text/javascript" charset="utf-8"></script>

<!-- elRTEスタイルシート読み込み -->
<link rel="stylesheet" href="css/elrte.full.css" type="text/css" media="screen" title="elRTE" charset="utf-8">

<script type="text/javascript" charset="utf-8">
$().ready(function() {
	var opts = {
		height   : 450, // エディタ領域の高さを変更できます。
		toolbar  : 'complete', // ツールバーの内容を変更できます。※1
	}
	$('#editor').elrte(opts); // id="editor"の要素に反映されます。
})
</script>
</head>

<body>
<div id="editor">
エディタ本文スペースです。
</div>
</body>
</html>
※1 : toolbarの値を以下に変更することでツールバーの内容を変更できます。
・tiny:bold, italic, underline, strike, subscript, superscript
・compact:tinyの内容 + save, undo/redo, text alignment, list, link, fullscreen
・normal:compactの内容 + copy/paste, colors, paddings, block-elemet, images
・complete:normalの内容 + text size, style and font formating
・maxi:completeの内容 + tables

js/elrte.full.js
2569行目から始まるtoolbarsに設定を記述することにより、ツールバーをカスタマイズ可能です。
custom  : ['save', 'copypaste', ~~~]
今回オプション値で設定したのはheightとtoolbarになりますが、そのほかにも色々設定ができます。
詳しくは本家wiki「Options」項目をどうぞ。
 
  |   ヨシダ制作メモ TOP  |   elRTE,elFinder… >>