TinyMCEの使いこなしを探るトピ - My Forums

Re: TinyMCEの使いこなしを探るトピ

yama — Apr 13, 2011, 06:25 AM

http://modx.jp/blog/529.html

上記ページに参考記事を書きました

Re: TinyMCEの使いこなしを探るトピ

yama — Jul 13, 2009, 09:01 PM

背景画像を工夫すればこういうこともできますね

Re: TinyMCEの使いこなしを探るトピ

yama — Feb 05, 2008, 11:05 AM

コンテンツはボリューム感とリズム感が重要。CSSを調整すると、長文を書くのも楽しくなります。
見出しタグやリストタグ、引用タグなどを積極的に使えるようになると思います。
下記のサンプルイメージでは、少しNucleusっぽい配色にしてみました。

※上記サンプル内の文章はMODxをよく理解していない昔に書いたものなので気にしないでください。
　MODx自体も未熟だったし。。。MODxは機能型コンテンツに向いてないってことはないですよ

Re: TinyMCEの使いこなしを探るトピ

yama — Feb 04, 2008, 02:01 AM

次は、編集領域のカスタマイズの話。

デフォルトではこのような状態です。

フォントが小さいうえ行間が狭いので読みづらいです。編集領域のマージンがピチピチに詰まっているのも窮屈です。

このようにカスタマイズできます。

ツール→MODx設定→インターフェースとその他の機能→CSSファイルへのパスでロケーションを指定して、編集領域用の
CSSを置くと、このように編集領域の見た目をカスタマイズできます。
ちなみに上記のサンプルイメージのCSSは以下のようにしています。textareaじゃなくてbodyに設定します。

body {
	font-size:12px;
	font-style: normal;
	line-height: 150%;
	color: #000000;
	background-color: #FFFFFF;
	font-family: Verdana, Arial, sans-serif;
	text-align: left;
	padding: 0px;
	margin: 10px;
	background-repeat: repeat-x;
	background-image:url(tinymcebg.gif);
	}

a {
	text-decoration: none;
	}

a:link {
	text-decoration:none;
	color: #0000FF;
	}

a:visited {
	text-decoration:none;
	color: #0000FF;
	}

a:active {
	color: #0000FF;
	}

a:hover {
	color: #FF0000;
	}

TinyMCEの使いこなしを探るトピ

yama — Feb 04, 2008, 12:23 AM

Tipsコーナーに相当するボードがないので、こちらでトピ立てます。

MODxで標準で同梱されているTinyMCEですが、そのまんまだといろいろ使いにくい気がします。
ツールバーの並びやタブブラウザとの相性、立ち上がりの重さ、編集ウィンドウのデザインなど。
使いやすくするための方法がいろいろあるので、ここで紹介します。

まず、ツールバーカスタマイズの話題から。

標準では上記のような並びになっていますが、個々に見ていくと、いくつか気付く点があります。

フォントの色の変更はどうするの？
せっかくWYSIWYGなのにtable編集ができない
全選択とか印刷とか、ほとんど使わなさそうなアイコンがある
「検索」と「検索・置換」のアイコンは実際には同じ機能なので、ダブっている
よく使う順番とかを考慮してないようで、使いにくい
アイコンの数が多くて、投稿画面を開くのにワンテンポ遅れる

実際の構成設定は以下のようになっています。

読み込むプラグイン：style,advimage,advlink,searchreplace,print,contextmenu,paste,fullscreen,nonbreaking,xhtmlxtras,visualchars,media

ツールバー1：undo,redo,selectall,separator,pastetext,pasteword,separator,search,replace,separator,nonbreaking,hr,charmap,separator,image,link,unlink,anchor,media,separator,cleanup,removeformat,separator,fullscreen,print,code,help

ツールバー2：bold,italic,underline,strikethrough,sub,sup,separator,bullist,numlist,outdent,indent,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,styleselect,formatselect,separator,styleprops

というわけで、下記のようにカスタマイズしてみました。

アイコンの数を減らすことで、読み込むプラグインの
数も減らすことができるので、若干ながら負荷軽減にもつながります。

もっとシンプルでもよければ、こんな感じで。MODx設定の選択肢にも「simple」ってのがありますけど、
確かにアイコンの数は少ないけど構成が今ひとつだったりします。

実際の設定例は以下のとおり。

プラグイン：table,style,advimage,advlink,searchreplace,contextmenu,paste,fullscreen,media
ツールバー1：undo,redo,|,bold,forecolor,backcolor,formatselect,fontsizeselect,|,styleprops,removeformat,code,|,help
ツールバー2：image,media,link,unlink,anchor,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,|,outdent,indent,|,table,|,hr,|,search,|,pastetext,pasteword,|,fullscreen

プラグイン：advimage,advlink,contextmenu,paste,fullscreen
ツールバー1：bold,forecolor,backcolor,|,formatselect,fontsizeselect,|,image,link,unlink,|,bullist,numlist,|,code,fullscreen

MODxはユーザごとにツールバーをカスタマイズできるので、担当部署の特性に応じて設定するといいと思います。