HTMLareaのツールバーのボタンがハミ出す問題

HTMLareaのツールバーのボタンがハミ出す問題

- Tatsuya Shirai の投稿
返信数: 10

以下のディスカッションからの派生です.
http://moodle.org/mod/forum/discuss.php?d=126734#p557138

 このmoodle.orgでも”エディタを大きくする”のボタンは半分ハミ出しています.
 さらにDragMath Equation Editorのようなモジュールを追加してHTMLareaにボタンを追加すると,さらに1.5個分ハミ出します.

 気になったのでソースを見てみたところ,ツールバーの作成部分に潜在的なバグがあるような気がしてきました.ポイントはツールバー部分は動的に生成される表(Table)である点です.
 通常では2行,大きくすると3行になります.その際にnewline()というjavascriptの関数を呼ぶのですが,表の行を増やす(<tr> </tr>)のではなく,表に表を追加しています.そして<table>を追加するのに</table>を追加することはない.つまりツールバー部分に生成される表はHTMLとして不完全であり,その横幅を表すoffsetWidthプロパティは不正確な値が返され,その結果,表のセルからアイコンのimageがハミ出すのではないのか.

 Wikiの編集画面ではボタンがはみ出さないが,フォーラム投稿のフォームではボタンがハミ出す.この違いはHTMLエディタを配置する領域の定義が異なる(Wikiでは左端,フォーラムではセンタリング)ことに起因すると考えると(メカニズムはともかくとして)少しだけ理解(同情?)できます.

 ちょっとツールバー作成の部分を改造してみます.

Tatsuya Shirai への返信

Re: HTMLareaのツールバーのボタンがハミ出す問題

- Tatsuya Shirai の投稿
 document.createElement()で作ったエレメントは,たとえば"div"ならば<div></div>を生成するので,わざわざ</div>を追加する必要は無いのですね.なるほど.ちょっと勘違いしていました.
Tatsuya Shirai への返信

Re: HTMLareaのツールバーのボタンがハミ出す問題

- Tatsuya Shirai の投稿

 なるほど.一行目,二行目,三行目を別々のTableにしないと,こういうことになってしまうのですね.当然といえば当然でした.どうやらここまでのところは私の勘違いのようです.

 ではなぜtoolbar全体の幅を正しく取得できないのだろうか.

添付 HTMLareaTable.jpg
Tatsuya Shirai への返信

Re: HTMLareaのツールバーのボタンがハミ出す問題

- Tatsuya Shirai の投稿

 ひょんなことから解決しました.

 何気なく,http://css-happylife.com/log/css-template/000113.shtml
こちらのページを見ていて,特に何も考えずに,lib/editor/htmlarea/htmlarea.cssの一番頭にある.htmlarea .toolbarのCSSを修正したら添付したファイルのようにボタンのハミ出し問題が解決しました.しばらく呆然としました.一番困ったのは「なぜこれで良いのか」を理解していない点です--;

 修正箇所は一箇所,lib/editor/htmlarea/htmlarea.cssの冒頭,

.htmlarea { background: #fff; }

.htmlarea .toolbar {
  cursor: default;
  background: ButtonFace;
  padding: 1px 1px 2px 1px;
  border: 1px solid;
  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
  float:left;
}
.htmlarea .toolbar table { font-family: tahoma,verdana,sans-serif; font-size: 11px; }

赤い一行を追加しただけです.

#もちろん,本当に何も考えていなかったわけではなく,この問題に関係がありそうだなぁと思って読んでいたページです.ボタンというコンテンツがはみ出さないように枠(toolbar)がきちんとサイズを自動調整してくれないといけないじゃないか,という意思はありました.

 なお,IE7とFirefox3.0.11の二つでは動作確認をしています.SafariはHTMLareaが動作しないのですよね? 携帯電話もHTMLareaが動作しませんので,事実上,IEとFirefoxの二つで動作確認は完了とします.

添付 toolbarWidthProblem.jpg
Tatsuya Shirai への返信

Re: HTMLareaのツールバーのボタンがハミ出す問題

- Tatsuya Shirai の投稿

Trackerに報告しました (MDL-19830).

HTMLarea関係のバグ報告は非常に数が多いので,もしかしたら既に他の解決方法が提案されているかも知れません.

#ああ,スッキリした.もう,気持ち悪くて気持ち悪くて.

Tatsuya Shirai への返信

Re: HTMLareaのツールバーのボタンがハミ出す問題

- Tatsuya Shirai の投稿

おっとっと,勇み足でした.

一応,確認したつもりでいたのですが,エディタを最大化したところ二段組のような変な画面レイアウトになってしまいました.ウィンドウサイズの影響かも知れません.やはり深く理解しないで試したのはまずかったですね.

Tatsuya Shirai への返信

Re: HTMLareaのツールバーのボタンがハミ出す問題

- Tatsuya Shirai の投稿

ふー,一応,セーフです.

フルスクリーン時にはhtmlarea.cssで指定したfloat:left;を無効化するように以下のコードを追加することで,この問題は押さえ込めました.

lib/editor/htmlarea/popups/fullscreen.php

<html>
<head><title><?php print_string("fullscreen","editor");?></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
@import url(../htmlarea.css);
.htmlarea .toolbar {float:none !important}
html, body {    margin: 0px; border: 0px; background-color: buttonface; } </style>

この赤い行を追加すればフルスクリーン時はいままで通り.

 でも,Wikiでちょっと見栄えが悪いですね.フォーラムでは問題ないのですが...

Tatsuya Shirai への返信

Re: HTMLareaのツールバーのボタンがハミ出す問題

- Tatsuya Shirai の投稿

Wikiで見栄えが悪い問題も解決しました.

解決方法はフルスクリーン時の対策と同じです.一旦,試して失敗し,そのまま色々と試行錯誤してから再び試したら成功しました.

mod/wiki/ewiki/ewiki.phpのfunction ewiki_page_edit_form(),

     echo '<table><tr><td>';
     if ($usehtmleditor) { //clean and convert before editing
         $options = new object();
         $options->smiley = false;
         $options->filter = false;
         $oldtext = format_text(ewiki_format($data["content"]), $moodle_format, $options);
     } else {
         $oldtext = ewiki_format($data["content"]);
     }
     print_textarea($usehtmleditor, $rows, $cols, 680, 400, "content", $oldtext);
     echo '<style type="text/css"> .htmlarea .toolbar {float:none !important}</style>';

     echo '</td></tr></table>';

この赤い行を追加して右端に無駄な白い領域が生じるのを押さえられました.

 つまりいまのところ問題(ボタンがハミ出す)のはフォーラム表示時のみです.逆に言うと,こちらにのみfloat:left;を追加することができるならば,それで良いような気もしてきました.ところがフォーラム投稿のフォームは$mformを使っているので,<style>を忍び込ませるのが難しい.とりあえずこの方法で完了と言いたいところです.

Tatsuya Shirai への返信

Re: HTMLareaのツールバーのボタンがハミ出す問題

- Tatsuya Shirai の投稿

 問題は$mformで表示するHTMLarea(取り合えずフォーラム)とprint_textarea()で表示するHTMLarea(主にWiki)が混在している点にあります.

 htmlarea.cssでfloat:left;を指定すると,$mformを使っているものはOKなのですが,print_textarea()で表示しているものはNGになる.

 実は$mform(PEAR:QuickForm)で<style>を指定できることが判明しました.たとえば以下のような感じ.

        $mform->addElement('html', '<style type="text/css">.htmlarea .toolbar {float:left !important}</style>');
        $mform->addElement('htmleditor', 'message', get_string('message', 'forum'), array('cols'=>50, 'rows'=>30));

addElement('htmleditor')を使用している箇所が少ないか,print_textarea()が少ないか,ですね.

いまgrepで調べてみたら,どちらも多い...QuickFormが45箇所,print_textareaが73箇所.どちらをとるか.


答えは意外に簡単でした.なぜ悩んだのだろう.print_textarea()自体に手を入れてしまえば良いのでした.

  1. htmlarea.cssにfloat:left;を追加.
  2. fullscreen.phpではfloat:left;をfloat:none;に変更.
  3. print_textarea()の末尾でfloat:none;に変更.

これでいまのところ何とかなりそうです.つまり修正は三箇所で済みます.

lib/weblib.phpのfunction print_textarea()の末尾に,

     if ($usehtmleditor) {
        // Show shortcuts button if HTML editor is in use, but only if JavaScript is enabled (MDL-9556)
        $str .= '<script type="text/javascript">
//<![CDATA[
document.write(\''.addslashes_js(editorshortcutshelpbutton()).'\');
//]]>
</script>';
    }
    $str .= '<style type="text/css"> .htmlarea .toolbar {float:none !important}</style>';

    if ($return) {
        return $str;
    }
    echo $str;
}

を追加.これで,Wiki,QuickMailのHTMLエディタ右端に生じるおかしな白い領域は消えました.他にもprint_textarea()を使っている箇所がありますが,症状が出るもの出ないもの(メンテナンスモードのメッセージ入力エリアは手を加えなくても問題なしでした)どちらにも対応できそうです.

Trackerに追記してきます.

Tatsuya Shirai への返信

Re: HTMLareaのツールバーのボタンがハミ出す問題

- Tatsuya Shirai の投稿

ギブアップです.

.html .toolbar ではなく,.html のCSSのみを書き換えるようにすることでステータスバーも含めて改善するのは確認できたのですが,場所によってはうまく行き,場所によっては副作用が出てしまいます.意外とややこしい.根本的な原因が分からない.print_textarea()のパラメータの与え方も利用される箇所によって随分と異なりますし,一体何がうまくできたりできなかったりする原因なのかがハッキリしません.

Tatsuya Shirai への返信

Re: HTMLareaのツールバーのボタンがハミ出す問題

- Tatsuya Shirai の投稿

 とりあえず無難な対策として,時と場合に応じてfloat:left;を出力する改造で症状が軽減します.(htmlare.css等の修正は全て不要です) lib/weblib.phpのfunction print_textarea()に対して以下の修正を行うことで,少し症状が収まります.

    if ($id === '') {
        $id = 'edit-'.$name;
    }

    if ( empty($CFG->editorsrc) ) { // for backward compatibility.
        if (empty($courseid)) {
            $courseid = $COURSE->id;
        }

        if ($usehtmleditor) {
// (Debug023): HTMLエディタ(HTMLarea)のボタンがツールバー右端にはみ出すバグ (2009/07/15)
// (Debug023): ここから追加
            $floatleft = array(
                'id_message',       // フォーラム
                'id_definition',    // 用語集
                'id_summary',       // blog, リソースHTML(要約),リソースファイル(要約)
                'id_description',   // △カレンダー,×ロールの定義,課題(編集の詳細)
                'edit-text'         // △メンテナンスモード
            );
            // 'edit-content' : Wikiは不要
            // 'id_alltext'   : リソースHTML(フルテキスト)は要約で定義変更済みなので不要
            // 'edit-submissioncomment' : 課題(評価のコメント)は不要
            if (in_array($id, $floatleft)) {
                $str .= '<style type="text/css"> .htmlarea {float:left ! important;}</style>';
            }
// (Debug023): ここまで追加
            if (!empty($courseid) and has_capability('moodle/course:managefiles', get_context_instance(CONTEXT_COURSE, $courseid))) {

 コメントにあるように,カレンダーのイベント追加時などに多少,不具合が生じます(問題はありません).見栄えが少しだけ悪い(右端に空白が生じる).でも画面を再読み込みを行えば直りますので,中途半端です...(△)