Help us understand the problem. What is going on with this article?

【React】react-quillを使った空行が反映されない

More than 1 year has passed since last update.

6月からreactを用いたサービスを運営する会社にてインターンを始めたので、ログを残しておきます。

こちらのはてなブログでも書きましたが、Qiitaにも書いておきます!
https://hidelog.hatenablog.com/entry/2018/08/13/104719

react-quillを使った空行が反映されない

react-quillを使って、htmlをデータベースに保存していたが空行が反映されないので原因を究明してみた。

  1. 考えた経緯
  2. 原因を模索
  3. 解決方法

1.考えた経緯

以下のように思考した。

一旦chromeの検証ツールで見てみる

【正常な箇所】
html
<p><br></p>

【異常な箇所】
html
<p><span style="color: rgb(0, 0, 0); background-color: transparent;"></span></p>

原因を模索

考えられる原因を色々と試してみる。

  • react-quillのバグ
  • 保存する際に何かが原因で空行が変換されている。
  • その他違う原因

react-quillのバグ

react-quill blank lineで検索
-> それらしい記事は見当たらない

保存する際に何かが原因で空行が変換されている。

-> 実際の症状を再現しようと試みるも、データベースには正常に保存されているため症状の再現が不可能。

一旦実際の症状を再現しようと色々と試みる

-> 原因がわかった

原因

空行を入れる際に空行の先頭にスペースを入れると
html
<p><span style="color: rgb(0, 0, 0); background-color: transparent;"></span></p>

このようになって保存されてしまうため。
スペースの分が認識されずにspanタグが入れられてしまうため保存する際の見た目では、空行が入るが出力すると空行が入らない。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away