• MovableTypeのリッチテキストエディタ用プラグイン TinyMCE5の自動バリデーションで困っています。
    HTML5ではdlタグ直下にdivタグを使用することが許容されていますが、TinyMCE5でこれをやると、HTML直接入力モードからリッチテキストモードに切り替えた時に、dlとdt,ddの間のdivタグだけ消えてしまいます。

    プラグインの構成ファイルで関係ありそうな場所を探して、推測で手を加えたりしてみましたが上手くいきません。adapter.jsのvalid_childrenに+dl[div]を書き足すのも試しましたがダメなようです。

    同じ問題を解決したことがある方がいたら、変更箇所と内容を教えてください。TinyMCEの詳細なバージョンは5.10.2です。
  • 回答でなくて申し訳ないけど、今、実案件でMT使ってる人どらくらいいるんだろうという疑問しか生まれなかった。
  • TinyMCE の公式に問い合わせた方がいい。正式にパッチが当たるかもよ
  • html5で許可されていると言ってもdlの中にdivは変だと思う。
  • 返信先: @oVfBrvさん <dl>
     <div class="item">
      <dt>a</dt>
      <dd>aaaa</dt>
     </div>
     <div class="item">
      <dt>b</dt>
      <dd>bbbb</dt>
     </div>
    </dl>

    いや、こんな感じでグルーピングするのはおかしくないと思うぞ。
  • 返信先: @M26FHCさん ありですが、なんかhtml5以前の名残で気持ち悪いし
    多くの人がdlの中にdiv入れずに別の方法取ると思います。
  • 返信先: @oVfBrvさん 古い考えだね。
  • 返信先: @oVfBrvさん 重要なのはhtmlがアクセシビリティ上問題なくて、かつ、CSSで見た目が整理できる状態なのだから、なんか気持ち悪いという極めて個人的な感想でコードは書かないよ
  • 返信先: @oVfBrvさん HTML Living Standard でも許容されてる。個人的に「気持ち悪い」という感情で排除しても別に構わないが、それはコメ主個人に限定される。
    ttps://momdo.github.io/html/grouping-content.html#the-dl-element
  • スレ主(GPkQXK)2022年12月21日
    みなさんご意見ありがとうございます。
    その後、出来る限りの読み解きを試みたので、同じことを調べてたどり着いた人向けに結果を書いておきます。


    まずvalid_childrenは、昔でいうブロック要素を外からaタグで囲むような場合に、バリデーションで強制整形されるのを防ぐためのものですが、
    リスト系のタグ(ul,ol,dl)の整形にまつわる部分はTinyMCE内でプラグインという形で別途実装されていました。そちらがvalid_childrenに勝ってしまうという感じに見受けられました。

    構成ファイルはすべての処理がこまかく関数化されて恐ろしく深い入れ子になっており、私の知見では読み解ききれず。
    加えて、「親ul/ol/dlの直下に子li/dt/ddがある」という前提でolやulとひとまとめに書かれている箇所もありました。
    dl>div>dt,ddという3階層をありにするには、新しく分岐を設けてdl専用のプラグインを追加するくらいの変更が必要なのでは…という感触でした。


    サクッと無効化できないかなくらいに思っていたのに、これでは途方もないので、結局不本意ながらHTML側を、dl>divをdiv>dlに置き換えてとりあえずしのぎました。
    (実は最初からこうする余地があったんですが、できることならdl>divが許容されると便利だな~と前々から思っていたので、方策を探ってみた次第です)

    配布元に問い合わせるにもTinyMCE公式って本拠地アメリカだな~と思って腰が引けてしまいました。
    現在はバージョン6台が存在するようですが、MT本体も最新バージョンにアップデートしないと不具合が発生するようで、TinyMCE6ならdl>div問題が解決するかどうか確認していません。

    dl直下のdiv自体は、公式に認められているし、何かと便利でかなりよく使います。むしろ今回妥協策として採用した「子要素にdtが一つしかないdlを連続で並べる」というのはセマンティック的にも気持ち悪く、凄く負けた気分です。(CSSの変更が最小限で済む方策がそれしかなかったので…)
    MTはWordPressみたいにセキュリティ面で狙われにくいし、何かあっても静的ファイルが残るし、選ぶ意味あります。少なくともローカルの大企業や大学みたいな案件じゃ全然使っていますよ。