tinymceのタグの置き換え  【解決済み】

質問全般・改善要望
返信する
shiro
メンバー
メンバー
記事: 5
登録日時: 2009年10月21日(水) 16:54

tinymceのタグの置き換え

投稿記事 by shiro »

coreserverでmodx1.0.2を運用しています。
これを新しくページを作る際のテンプレートにして非公開にして置いてあります。

<div id="左カラム"></div>
<div id="右カラム"></div>

divにはcssで背景や立て幅など指定してあり、更新作業やページの作成をしてもらう方には
TinyMCEを使って直接ブログ感覚で記事を更新してもらう予定です。

新しくページを追加してもらう際に
上記のソースを利用する場合にTinyMCEを使って見出しを入れると
<div id="左カラム">
<h2>見出し2<h2>
</div>

という風になって欲しいのですが
<h2 id="左カラム">見出し2<h2>
に変わってしまって大きくレイアウトが崩れてしまいます。

div要素を残したまま、Hタグを追加するにはどこをいじれば良いでしょうか?
宜しくお願い致します。
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

Re: tinymceのタグの置き換え

投稿記事 by yama »

コード: 全て選択

<div id="左カラム">
<h2>見出し2</h2>
</div>
こちらで試してみたところ、上記のように入力できました。GUI操作のほうにクセがあるツールかもしれないので、再現手順を詳細に教えていただいていいでしょうか。できれば白紙でページを作った状態から説明いただければこちらでも手順を再現できるので都合がいいです。
shiro
メンバー
メンバー
記事: 5
登録日時: 2009年10月21日(水) 16:54

Re: tinymceのタグの置き換え

投稿記事 by shiro »

なるほどですね。
早速試して頂けてありがとうございます。


どうやら僕の環境に依存している可能性がありますね。
Pタグを自動挿入されたくなかった為に
Custom Parametersに以下を追記しています。
force_br_newlines : true,
forced_root_block : ''

こちらが関係している可能性はありそうですよね。
情報の後だしになってしまって本当に申し訳ございません。そこ以外はデフォルトで運用しています。

テンプレートがこんな感じです。
<body>
<div id="head"></dib>
<div id="wrap">
[*content*]
</div>
<div id="foot"></div>
</body

[*content*]の中見が

<div id="left"></div>
<div id="right"></div>

contentの中のdivはcssファイルでfloat:leftしてあります!
<div id="left">
ここで見出しを選択すると、直前のdivがhになってしまいます。
</div>

以上です。宜しくお願いします!
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

Re: tinymceのタグの置き換え

投稿記事 by yama »

どうも、ご協力ありがとうございます。これだけ情報あればこちらで調べられると思います。ちょっとこれから外出しますが、あとで調べてみます。

その前に、改行の扱いで設定を加えられているようなので、

http://wiki.moxiecode.com/index.php/Tin ... lements.3F
もしよければ、こちらを試していただけますか?たぶん関係ないと思いますが。

コード: 全て選択

forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false
つまりこのように記述を加えるのが正しいようです。ただしTinyMCEの不具合だと思いますがIEでは思ったとおりにいってない感じです
(そちらの現在の設定では意図どおりに使えているのですか?)
shiro
メンバー
メンバー
記事: 5
登録日時: 2009年10月21日(水) 16:54

Re: tinymceのタグの置き換え

投稿記事 by shiro »

はい!引き続き僕も触ってみます。
宜しくお願い致します。

それと本当に申し訳ないですが、まだ情報残っていました。
Custom Parametersに
content_css : "css/import.css"を
記述しております。


css/import.cssは実際サイトに読み込ませているcssになります。
今度こそ本当に情報の全てです。宜しくお願い致します。
shiro
メンバー
メンバー
記事: 5
登録日時: 2009年10月21日(水) 16:54

Re: tinymceのタグの置き換え

投稿記事 by shiro »

検証した所、やはりエディタのpタグを排除しているのが原因ぽいです。

本当に上記の通りのHTMLソースで書いた所、GUI上で空の<div id="left">をクリックしてdivの中を選択する事ができませんでした。
(文字を書くと <div id="left">の直前に挿入される)

なので<div id="left">のなかに空のpタグを入れてみました。

<div id="left">
<p></p>
</div>


上記のようにするとHタグの挙動が普通になりました。
空のPタグは削除される。

<div id="left">
<h2>ここに見出し2</h2>
</div>

なのでPタグをmargin:0,padding:0にしてリセットして今は代用しています。

ただ保存するたびに空divと空Pタグに何かを書いておかないとタグが消去されてしまいます。
なにかスマートな解決策ないでしょうか?

強引な解決方法しか今は見つかっていないので、引き続き宜しくお願い致します。
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

Re: tinymceのタグの置き換え

投稿記事 by yama »

確認しました。どうやらGUIの問題ですね。ボックス要素内のボックス要素(DIV内のH2など)を正しく認識できないようです。もともとWYSIWYGというよりワープロ指向なツールなので、こういった使い方は想定してないのかもしれませんが・・とりあえずTinyMCE開発元に報告を入れないと対応難しいと思います。英語でうまく説明できれば、対応が早い開発チームなので期待できそうですが。

P要素をmargin:0,padding:0;にするなら、P要素内に&nbsp;など空っぽい文字を入れておいて div#left p {display:none;} などとするとベターかな?という気がします。
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

Re: tinymceのタグの置き換え

投稿記事 by yama »

代替案ですけど。

コード: 全て選択

<body>
<div id="head"></div>
<div id="wrap">
<div id="left">[*content*]</div>
<div id="right">[*rightcontent*]</div>
</div>
<div id="foot"></div>
</body>
こんなふうにしてみてはどうでしょう?何かワケがあって、あえてこのようにしてないのかもしれませんが。
shiro
メンバー
メンバー
記事: 5
登録日時: 2009年10月21日(水) 16:54

Re: tinymceのタグの置き換え  【解決済み】

投稿記事 by shiro »

確認遅くなってしまって申し訳ないです。
やはりGUI操作の問題ですね。

テンプレート変数で項目ごとに切り替えるパターンと
空div内に文字を隠しておく両パターンで作業を行おうと思います。

自分で作る分にはguiで書く事も無いのですが
いざ、htmlに詳しくない方に管理画面を投げる時に
見たままの編集作業、ちょっとした追加をさせてあげたいなと思い、試行錯誤中です。

フォーラムは最近登録したばかりです。今後とも宜しくお願い致します。
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

Re: tinymceのタグの置き換え

投稿記事 by yama »

よろしくです。

これってたぶん、メインコンテンツ部分とサイドバー部分をざっくり2つに分けただけ。って感じでは。各部をシステマチックに作り込むイメージではなくて、逆にラフな使い方でサイトをCMS化したくてMODxを選んだとか。それはそれで多少ノウハウあるので、具体的に相談いただければと思います。
返信する