LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@rex0220

rex0220 計算式プラグイン リッチエディターに指定できるタグ調査

Last updated at Posted at 2025-02-09

計算式プラグインで、リッチエディター項目に指定できるタグを調べてみました。

概要

リッチエディター項目で、font タグなど現在では非推奨のものも使われている。
とりあえず代表的なタグを設定して、利用できるか調べてみた。
ChatGPT で、テスト用HTMLを用意して、結果の比較も行った。
style の属性についても同様に調査した。

結果 input などの form 要素は削除され、style は透明度・シャドー・回転が削除された。

逆にリッチエディターへ手動で入力された場合の html を ChatGPT で調べて問題点など挙げてもらった。
font, b, i, strike など非推奨となったタグが使われており、リッチエディターのバージョンアップが必要と考えられます。

  • リッチエディターに html セット

2025-02-09_12h03_36.png

  • リッチエディター手動入力時の html 調査

2025-02-09_13h03_13.png

調査方法

  • ChatGPT で、代表的なタグを利用した HTML サンプルを用意
  • 文字列複数行に張り付けた html を計算式プラグインでそのままリッチエディターにセット
  • リッチエディターの表示結果(html)を ChatGPT で比較
  • style の属性についても同様に調査

ChatGPT の調査結果

下記は、ChatGPT の調査結果をマークダウン形式にして、そのまま張り付けたものです。

  • リッチエディターの出力結果と元のHTMLの比較
  • リッチエディターの style 属性適用結果の違いを調査
  • リッチエディターのHTMLレビュー結果

リッチエディターの出力結果と元のHTMLの比較

リッチエディターに設定した結果を解析し、変化したタグを特定しました。

変化したタグの一覧

1. <span class="control-value-richtext-gaia"> で全体が囲まれた

  • 変更点: <body> の直下にあった要素が <span> にラップされた。
  • 推測される理由: リッチエディターがコンテンツを 独自のスタイル管理用に <span> でラップ している可能性がある。

2. <s>（取り消し線タグ）が削除

  • 元のHTML: 
    <p><u>下線 (u)</u> / <s>取り消し線 (s)</s></p>
  • 変更後: 
    <p><u>下線 (u)</u> / 取り消し線 (s)</p>
  • 変更点: <s> タグが削除され、単なるテキストとして表示される。
  • 推測される理由: リッチエディターが <s> タグを 無効なタグとして削除 した可能性。

3. <a>（リンクタグ）に rel="nofollow" が追加

  • 元のHTML: 
    <a href="https://www.example.com">これはリンクです</a>
  • 変更後: 
    <a href="https://www.example.com" rel="nofollow">これはリンクです</a>
  • 変更点: rel="nofollow" が追加された。
  • 推測される理由: リッチエディターのセキュリティポリシー により、外部リンクに nofollow を自動付与している。

4. <form>（フォーム要素）が完全に削除

  • 元のHTML: 
    <form>
  <label for="text">テキスト入力:</label>
  <input type="text" id="text" name="text">
  <button type="submit">送信</button>
</form>
  • 変更後: 
    <label>テキスト入力:</label>
送信
  • 変更点:
    • <form> タグ自体が削除
    • <input> / <button> も削除
    • <label> のみが残った
  • 推測される理由:
    • リッチエディターは 入力フォームのタグをサポートしない。
    • <input> や <button> などのインタラクティブ要素は 自動的に削除される。

5. <br> が追加されている

  • 元のHTML: 
    <label>ドロップダウン:</label>
<select>
  <option value="A">選択肢 A</option>
  <option value="B">選択肢 B</option>
</select>
  • 変更後: 
    <label>ドロップダウン:</label>
選択肢 A選択肢 B
  • 変更点:
    • <br> が追加され、ドロップダウンメニューがプレーンテキストとして表示される。
  • 推測される理由:
    • <select> が削除されたため、単なるテキストとして残った。
    • そのため、改行 (<br>) を追加してレイアウトを維持した可能性。

変化したタグのまとめ

元のタグ 変更後のタグ 変更の理由
<body> <span class="control-value-richtext-gaia"> でラップ リッチエディターのスタイル管理
<s>（取り消し線） 削除 不可視化または未対応
<a>（リンク） rel="nofollow" が追加 セキュリティ対策
<form> 削除 インタラクティブ要素がサポート外
<input> / <textarea> / <select> / <button> 削除 フォーム要素がリッチエディターで無効化
<select> 選択肢 A選択肢 B のテキストに変換 選択UIの削除
<br> 一部自動追加 フォーム要素削除によるレイアウト調整

結論

  1. リッチエディターは「表示専用」

    • フォーム要素（<input> / <select> / <button> など）が削除される。
    • <label> は保持されるが、実際のフォーム機能はなくなる。

  2. リンクの rel="nofollow" は自動追加

    • SEOやセキュリティ対策 のため、外部リンクは nofollow が適用。

  3. 一部のタグ（<s> など）は削除

    • 一部のスタイルタグは無効化される。

  4. リッチエディターの内部構造に <span.control-value-richtext-gaia> が追加

    • すべてのコンテンツが リッチエディター専用の <span> にラップ される。

リッチエディターの style 属性適用結果の違いを調査

以下の違いを確認し、変更・削除されたスタイルを特定しました。

変更・削除された style プロパティ

プロパティ 元の指定 リッチエディター結果 変更点
color color: red; ✅ 維持 問題なし
font-size font-size: 24px; ✅ 維持 問題なし
font-weight font-weight: bold; ✅ 維持 問題なし
font-style font-style: italic; ✅ 維持 問題なし
text-decoration text-decoration: underline; ✅ 維持 問題なし
background-color background-color: yellow; ✅ 維持 問題なし
padding padding: 10px; ✅ 維持 問題なし
border border: 2px solid blue; ✅ 維持 問題なし
text-align text-align: center; ✅ 維持 問題なし
line-height line-height: 1.8; ✅ 維持 問題なし
letter-spacing letter-spacing: 2px; ✅ 維持 問題なし
word-spacing word-spacing: 5px; ✅ 維持 問題なし
width width: 200px; ✅ 維持 問題なし
height height: 100px; ✅ 維持 問題なし
border-radius border-radius: 10px; ✅ 維持 問題なし
display display: inline-block; ✅ 維持 問題なし
opacity opacity: 0.5; ❌ 削除 透明度が適用されない
box-shadow box-shadow: gray 5px 5px 10px; ❌ 削除 ボックスシャドウが無効化
text-shadow text-shadow: gray 2px 2px 5px; ❌ 削除 テキストシャドウが無効化
font-family font-family: "courier new", monospace; ✅ 維持（ただし &quot; でエスケープ） 影響なし
transform transform: rotate(10deg); ❌ 削除 回転が無効化

リッチエディターで削除されたスタイル

  • ❌ opacity → 透明度 (opacity: 0.5;) が削除
  • ❌ box-shadow → ボックスシャドウ (box-shadow: gray 5px 5px 10px;) が削除
  • ❌ text-shadow → テキストシャドウ (text-shadow: gray 2px 2px 5px;) が削除
  • ❌ transform → 変形 (transform: rotate(10deg);) が削除

考察

✅ 基本的な color, font-size, background-color, border, padding, margin などは維持
❌ 視覚的なエフェクト（影・透明度・回転など）は削除
❌ アニメーション系 (transform) も無効化

これは リッチエディターのセキュリティポリシー や ブラウザの互換性 による可能性が高いです。

リッチエディターのHTMLレビュー結果

使用されているタグの一覧

タグ 用途 レビュー
<div> セクションのグループ化 ✅ 適切な使用。ブロック要素のグループ化に使用。
<font> フォントサイズ・色の変更 ⚠️ 非推奨タグ（HTML4のレガシータグ）。style に変更推奨。
<blockquote> 引用のためのインデント ✅ 適切な使用。border や padding を省略すべき。
<b> 太字 ⚠️ 非推奨（strong 推奨）。
<i> 斜体 ⚠️ 非推奨（em 推奨）。
<u> 下線 ⚠️ 非推奨（text-decoration: underline; 推奨）。
<strike> 取り消し線 ⚠️ 非推奨（<s> または text-decoration: line-through; 推奨）。
<a> リンク ✅ 適切な使用。target="_blank" かつ rel="nofollow noopener noreferrer" あり、安全。
<ol> 番号付きリスト ✅ 適切な使用。
<ul> 箇条書きリスト ✅ 適切な使用。
<li> リスト項目 ✅ 適切な使用。

問題点 & 修正案

1. <font> タグの使用（非推奨）

問題点

  • <font> はHTML4で非推奨（style を使うべき）。
  • size 属性は style="font-size: ...px;" に置き換え可能。
  • color も style="color: ...;" に変更可能。

修正案（推奨） 

<span style="font-size: 16px;">DDD</span>
<span style="color: #ff0000;">TEST</span>
<span style="color: #0000ff; font-weight: bold;">テスト　
    <a href="https://rex0220.stores.jp/" target="_blank" rel="nofollow noopener noreferrer">リンク</a>
</span>

2. <b> / <i> / <u> / <strike> の使用（非推奨）

問題点

  • <b> → <strong> に変更すべき。
  • <i> → <em> に変更すべき。
  • <u> → text-decoration: underline; をCSSで指定。
  • <strike> → <s> または text-decoration: line-through; に変更。

修正案 

<strong><em><span style="text-decoration: underline;">GGG</span></em></strong>
<span style="color: #0000ff; text-decoration: line-through;">DDD</span>

3. blockquote の style に不要な border: none; padding: 0px;

問題点

  • border: none; padding: 0px; が影響していないか確認すべき。

修正案 

<blockquote style="margin-left: 40px;">

4. div の入れ子が多い

問題点

  • div の中に ol と ul を一緒に入れると、意味が不明瞭。
  • スタイルを調整するだけなら div で囲まず style を ol / ul に直接適用できる。

修正案 

<ol>
    <li>ｆｆｆ</li>
    <li>ｆｆｆ</li>
</ol>
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

まとめ

✅ 正しく使用されているタグ

  • <div>（レイアウト管理）
  • <blockquote>（引用）
  • <a>（リンク）
  • <ol> / <ul> / <li>（リスト）

⚠️ 改善すべきタグ

タグ 問題点 修正方法
<font> 非推奨（HTML4の古い仕様） style で色・サイズを指定
<b> 意味のない太字 <strong> を使うべき
<i> 意味のない斜体 <em> を使うべき
<u> 下線指定が非推奨 text-decoration: underline; を style で指定
<strike> 非推奨 <s> または text-decoration: line-through; を style で指定

🛠 推奨される修正後のHTML 

<div>ABC <span style="font-size: 16px;">DDD</span></div>

<blockquote style="margin-left: 40px;">
    <span style="font-size: 16px;">DDDD</span><br>
    <div style="text-align: center;">FFF</div>
    <div style="text-align: right;">DDDD</div>
</blockquote>

<div><strong><em><span style="text-decoration: underline;">GGG</span></em></strong></div>

<div>
    <span style="color: #ff0000;">TEST </span>
    <span style="color: #0000ff; font-weight: bold;">テスト <a href="https://rex0220.stores.jp/" target="_blank" rel="nofollow noopener noreferrer">リンク</a></span>
</div>

<div><span style="color: #0000ff; text-decoration: line-through;">DDD</span></div>

<ol>
    <li>ｆｆｆ</li>
    <li>ｆｆｆ</li>
</ol>
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?