Member Avatar for GraficRegret

i am creating a page with a simple text field in it so I can post what I type into the text field to my database and retrieve it later with another program, is there a way to add options to format the text to my liking as I am entering, say I want it bold at one point and italicised at another, how do I add those options to the text field?

  • 2 Contributors
  • 5 Replies
  • 92 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

A quick recap: asked how to add the little formatting buttons that let you click, type, and continue editing; suggested marking/tagging the text and later found a build-your-own tutorial. Two realistic approaches remain: adopt a maintained rich-text component, or build a focused editor yourself. Below are practical, modern pointers that the thread doesn't yet cover.

If you build your own, use a contenteditable element as the editing surface and control formatting by manipulating the Selection/Range rather than relying on browser shortcut hacks. Implement toolbar actions to wrap or replace the current selection with semantic markup (inline tags or classes) and normalize pasted content on paste events. Avoid fragile browser-specific shortcuts and plan an undo/redo history and paste cleaning (strip Word cruft, unwanted styles).

Storage and security: keep a single canonical representation in the database. Options are sanitized HTML (use a sanitizer on submit and again on render) or a portable markup like Markdown and render to HTML on display. Never trust client-side sanitation alone — perform server-side sanitization before storing or before serving to other users to prevent XSS. Also use parameterized queries for DB writes so formatting buttons do not open injection vectors.

UX and robustness tips: present a minimal, discoverable toolbar (bold, italic, links, lists, headings), provide keyboard shortcuts, and make the toolbar keyboard-accessible (ARIA roles and focus management). Test copy/paste from other apps and on mobile browsers — selection handling differs and toolbars may steal focus. Common debugging checks: inspect the editor innerHTML to see what you really saved, verify server-side sanitization policies, and reproduce across browsers to catch inconsistent behavior.

Tieback: the tutorial you found is a good starting point for mechanics, and ’s tagging idea is the core concept. For production use, prioritize sanitization, accessibility, and cross-browser testing over clever shortcuts.

Recommended Answers

All 5 Replies

Member Avatar for JorgeM

How would you "tag" the text to be styled a certain way? where you considering wrapping the text a certain way. For example, if you wanted bold text..

<b>This is Bold</b>

If so, you can do it this way, upload the text as you see it in this example. Then when you display it on another page, if you just fill an element with this exact data, it will show up in the browser as bolded text.

You may want to consider encoding the HTML before you upload and just decode it before you display it. That way the text will be treated as a literal.

Member Avatar for GraficRegret

I need buttons like the ones that show up above the window you type in to post here, so that I can add the formating on the fly.That way I can just click the button and then type what I want and then move on with the edditing done and not many problems on the editing end.

Member Avatar for JorgeM

Ok, so take a look at these editing tools. CKEditor and TinyMCE.

Member Avatar for GraficRegret

Thanks I actually found a tutorial on how to build my own Rich Text Editor in HTML. Here is tyhe link if anyone is interested in it, its very helpfull and makes an excelent starting point if you want to make your own.

Member Avatar for JorgeM

thanks for the follow up. your link is helpful.

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.