Q&A
> その際に画像や文字デザインの設定も組み込みたい
文書の段落などの体裁やフォントのサイズや色、任意の場所に画像も組込んだデータを作ってDBに保存したいということだと思いますが、であれば、文書のフォーマットはHTMLそのものにすればいいんじゃないかと思いますけど、そうしない理由は何ですか？
HTML形式で入力してもらう方法がわかなないということですか？
実現したいこと
文章登録フォーム作成にあたり改行をDBにサニタイズの上保存し、間に画像の挿入や太字などの設定を実現したいと考えております。
発生している問題・分からないこと
HTML textareaタグにて改行の保存は実現しております。ですが文章が一塊になっている影響で画像の挿入については、決まった場所に決まった数のみしか出力ができません。
この画像を好きな位置に好きな数挿入するようにすることは可能でしょうか。
また文字をサニタイズ、改行を保持したうえでデザインする方法があればご教示お願いいたします。
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
力技としてすべて一行ごとにDB保存する方法は試しましたが後の編集といった管理の面でほかの方法はないかと模索しております。
補足
具体的に処理の説明を追記します。
文章登録フォーム ー（DB登録）→ 登録内容をDBから出力
登録フォームのイメージとしてはteratailの質問投稿フォームのような形をイメージしております。
出力する際には文章登録の改行をそのまま出力したいという意図がございます。
また、その際に画像や文字デザインの設定も組み込みたいと考えております。
回答ありがとうございます。
文章入力に関して複数人になるため、形式はメモ帳のように入力内容がそのまま反映できる形を模索しております。
> メモ帳のように入力内容がそのまま反映できる形
メモ帳だた、フォントのサイズを変えたり文書の中に画像を埋め込んだりすることはできませんよね。それでは質問の趣旨と合いませんよ。
markdownで進めるようですが、ちょっと腑に落ちません。
いろいろな意見の人が居ますから「これが絶対」とは言いませんが...
> 改行をDBにサニタイズの上保存し
「サニタイズ」という言葉を使うという事は、入り口で危険なモノを除去しようという考え方だと思います。
渡されたデータを改変する事と等しく、「修正後のモノ」と「修正後の様に入力されたモノ」の区別がつかなくなるので元に戻せないのが問題になると考えます。
データは渡す相手にとって安全である様にエスケープする様にすれば、この様な問題は起こらないはずです。
> HTML textareaタグにて改行の保存は実現
改変してないデータ文字列を HTMLとして表示する際に（htmlspecialchars()を通した後） nl2br()を通せば実現できます。
textareaタグに縛られないので、自由な表記が可能だと思います。
しかし全ての HTMLタグの入力を許容するのは危険極まりないので、特定のモノだけを許容するとか、markdownのサブセットのみを受け入れるとかで制限するのがお手軽だと思います。
＿＿僕なら後者にして HTMLタグは全て削除
＿＿これは HTMLタグを有効な入力（期待する入力）とは見做さないという事
＿＿（有効な入力であるかの選別＝バリデーション）
＿＿または全てを受け入れ（＝入力データに手を入れない）htmlspecialchars()を通した後
＿＿（特定の）markdownの処理をして、nl2br()を通して HTMLとして出力
> 画像や文字デザインの設定も組み込みたい
利用者に自由に入力させるのではなく、入力を許すのは表示すべき文字だけにして、文字の装飾等は AJAX経由でのみ許す方法を考えるかなぁ...
自力で実装するより、定番のWYSIWYGエディタライブラリを使った方が安全ではないですかね。たとえば：
https://ckeditor.com/
https://qiita.com/kenzooooo/items/ecdce2b12a72cb750a18
ご提案のCKEditorは、HTMLを知らない人がボタン操作で HTMLを生成する為のツールの様な気がします（公式サイトを読んでいません）が、合っているでしょうか？
僕は一般利用者に HTMLの直接入力を許すのはとても危険というスタンスなので、「定番のWYSIWYGエディタライブラリを使った方が安全」とは思えないです。
なるほど、そうですか。
もしかして、9/7のコメントがtezcelloさんのコメントへの批判だとお読みになっているのであれば、それは誤解です。あちらは質問に対してのコメントでした。
回答1件
0
ベストアンサー
<textarea>タグを使わずに、
- 文章そのものは
<p>タグ - 明示的な改行は
<br>タグ - 画像は
<img>タグ - 太字は
<strong>タグ
に変換してDBに保存するとよいと思います。
投稿2025/09/05 21:45
総合スコア1586
回答ありがとうございます。
大変恐縮ですが質問がございます。
<textarea>タグを使用しないとなると、どのように改行や画像を認識し変換すればよいでしょうか。
<input>タグを使用し、別途画像挿入用のボタン等を設置するイメージでしょうか。
ご回答いただけますと幸いです。
それは、このシステムの詳細が質問に提示されていないので、回答できません。
質問の主旨は、DB保存方法では？
<textarea>タグは改行が保存されますが、他のタグが入らないです。
<textarea>タグを使用しなければ他のタグが使えるのでは、という提案です。
(質問は編集できますので、追加情報があれば追記してください)
回答ありがとうございます。
質問の内容、情報が不足しており申し訳ございません。
質問内容はDB保存方法で認識に間違いございません。
ですがそのDB保存方法にあたり、DB保存後に別途出力するという前提がございました。
出力する際に文章保存時の改行をそのまま出力したいという意図がございます。
また、その際に画像や文字デザインの設定も組み込みたいと考えております。
ご回答いただけますと幸いです。
ああ、なるほど、やりたいことが見えてきました。
TakaiYさんのコメントにあるようにHTMLで入力してもらうか、今どきならMarkdownで入力してもらうのは、どうでしょうか？
HTMLとMarkdown間で変換するライブラリは既にありそうですし、タグを限定して自前で変換してもいいと思います。
どちらの形式でも、DB上は単なる文字列です。
(最初の回答は、入力されたフリーのテキストを、こちらでHTMLに変換したらよいのではという意味です。)
回答ありがとうございます。
Markdown記法は思いつきませんでした...！
少し調べたところMarkdown記法にて、今回実現したいことは達成できそうだと思いました。
非常に助かりました。
ありがとうございます。
あなたの回答
tips
プレビュー
