Member Avatar for emily-bcot

I'm working on the Help system. In the Help system, there is the WYSIWYG Editor to allow users to input content. However, the content includes the text and image. My question is How to store the content of WYSIWYG Editor into database?

I really appreciate all your help. Thanks!

  • 2 Contributors
  • 4 Replies
  • 1K Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Stefano Mtangoo

Dani AI

Generated

You store what the editor sends: an HTML string. The safe pattern is to persist sanitized HTML in a TEXT/MEDIUMTEXT column and use parameterized SQL for the insert. In PHP, HTML Purifier is a battle‑tested sanitizer (allowlist tags/attributes you want, like p, ul/li, a[href], img[src|alt]). Pair that with PDO prepared statements so user input never touches your SQL directly. OWASP’s XSS guidance backs using a real HTML sanitizer for rich content. ()

Example: sanitize and save the editor’s HTML.

<?php
$raw = $_POST['content'] ?? '';

// 1) Sanitize HTML
require 'path/to/HTMLPurifier.auto.php';
$config = HTMLPurifier_Config::createDefault();
$config->set('HTML.Allowed', 'p,ul,ol,li,br,strong,em,a[href|title|rel],img[src|alt|title|width|height]');
$config->set('URI.AllowedSchemes', ['http'=>true, 'https'=>true]);
$purifier = new HTMLPurifier($config);
$body = $purifier->purify($raw);

// 2) Insert with PDO
$pdo = new PDO('mysql:host=localhost;dbname=help','user','pass',[
  PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION,
  PDO::ATTR_EMULATE_PREPARES=>false,
]);
$stmt = $pdo->prepare('INSERT INTO help_articles (body_html) VALUES (:body)');
$stmt->execute([':body'=>$body]);

Images are handled by upload + URL. The editor’s image button hits your upload endpoint; you return a public URL; the editor inserts <img src="..."> into the HTML. Keep it safe:

  • Validate type with PHP’s Fileinfo (finfo) and enforce a size limit; use an allowlist like image/jpeg, image/png, image/gif. Rename to a random filename and store in a dedicated folder. (php.net)
  • Follow OWASP’s file‑upload checks (allowlist extensions, randomize names, scan if possible, never trust client‑supplied Content-Type). (cheatsheetseries.owasp.org)
  • Consider a simple CSP header to reduce XSS blast radius when rendering help pages (e.g., restrict scripts to self; limit image sources). (developer.mozilla.org)

That complements ’s note to clean input, and gives you a workflow you can drop into your Help system today.

Recommended Answers

All 4 Replies

Member Avatar for Stefano Mtangoo

I'm working on the Help system. In the Help system, there is the WYSIWYG Editor to allow users to input content. However, the content includes the text and image. My question is How to store the content of WYSIWYG Editor into database?

I really appreciate all your help. Thanks!

No and Yes!
No, in that there is no such a thing...and Yes, you can code a class/function to do that
Just remember to clean the data and escape them to avoid attacks

Member Avatar for emily-bcot
No and Yes! No, in that there is no such a thing...and Yes, you can code a class/function to do that Just remember to clean the data and escape them to avoid attacks

Thanks for your reply, evstevemd! But I still got confused. Here I attached a screenshot . In this case, How did they store content(includes text, image, list) of the Editor into the database?

Thanks again?

stakeoverflow.jpg 36.3 KB
Edited by emily-bcot because: n/a
Member Avatar for Stefano Mtangoo

Thanks for your reply, evstevemd!
But I still got confused. Here I attached a screenshot[ATTACH]21581[/ATTACH]. In this case, How did they store content(includes text, image, list) of the Editor into the database?

Thanks again?

usually those editors are embeded in <textarea>right here!</textarea> in a normal form. So the thing is catched using normal POST. and then you clean it with library like html purifier and insert in database.
I hope it clears the confusion!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.