【React】react-quillを使った空行が反映されない
6月からreactを用いたサービスを運営する会社にてインターンを始めたので、ログを残しておきます。
react-quillを使った空行が反映されない
react-quillを使って、htmlをデータベースに保存していたが空行が反映されないので原因を究明してみた。
- 考えた経緯
- 原因を模索
- 解決方法
1.考えた経緯
以下のように思考した。
一旦chromeの検証ツールで見てみる
【正常な箇所】
<p><br></p>
【異常な箇所】
<p><span style="color: rgb(0, 0, 0); background-color: transparent;"></span></p>
原因を模索
考えられる原因を色々と試してみる。
- react-quillのバグ
- 保存する際に何かが原因で空行が変換されている。
- その他違う原因
react-quillのバグ
react-quill blank lineで検索 -> それらしい記事は見当たらない
保存する際に何かが原因で空行が変換されている。
-> 実際の症状を再現しようと試みるも、データベースには正常に保存されているため症状の再現が不可能。
一旦実際の症状を再現しようと色々と試みる
-> 原因がわかった
原因
空行を入れる際に空行の先頭にスペースを入れると
<p><span style="color: rgb(0, 0, 0); background-color: transparent;"></span></p>
このようになって保存されてしまうため。 スペースの分が認識されずにspanタグが入れられてしまうため保存する際の見た目では、空行が入るが出力すると空行が入らない。
