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

[計算式プラグイン](https://qiita.com/rex0220/items/ae83c6d5ce50ff7a9a73)で、リッチエディター項目に指定できるタグを調べてみました。

# 概要

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

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

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

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

![2025-02-09_12h03_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/3adcc21d-0f1e-b370-f0ad-c60e7443f081.png)

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

![2025-02-09_13h03_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/75b1f169-cfdc-bf6a-0bef-d581a196a28e.png)

## 調査方法

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


## ChatGPT の調査結果

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

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

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

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

---

## 変化したタグの一覧

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

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

### 2. `
`（取り消し線タグ）が削除

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

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

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

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

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

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

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

---

## 変化したタグのまとめ

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

---

## 結論

1. **リッチエディターは「表示専用」**
   - フォーム要素（`<input>` / `<select>` / `<button>` など）が削除される。
   - `<label>` は保持されるが、実際のフォーム機能はなくなる。

2. **リンクの `rel="nofollow"` は自動追加**
   - **SEOやセキュリティ対策** のため、外部リンクは `nofollow` が適用。

3. **一部のタグ（`
` など）は削除**
   - 一部のスタイルタグは無効化される。

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>` | 取り消し線 | ⚠️ **非推奨（`
` または `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: ...;"` に変更可能。

#### **修正案（推奨）**
```html
<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>` → `
` または `text-decoration: line-through;` に変更。

#### **修正案**
```html
<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;` が影響していないか確認すべき。

#### **修正案**
```html
<blockquote style="margin-left: 40px;">
```

---

### **4. `div` の入れ子が多い**
#### **問題点**
- `div` の中に `ol` と `ul` を一緒に入れると、意味が不明瞭。
- スタイルを調整するだけなら `div` で囲まず `style` を `ol` / `ul` に直接適用できる。

#### **修正案**
```html
<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>` | 非推奨 | `
` または `text-decoration: line-through;` を `style` で指定 |

### **🛠 推奨される修正後のHTML**
```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>
```