Member Avatar for mikki2

Hi! How do i add "extras" to comment boxes like is done in the comment box, which you will use to reply this post? You know, the "change font color" icon, "bold", "italics", etc...

i checked daniweb's source code and i saw <script> tags and an array within a variable containing the font types. Is there a particular name for this type of comment box?

Thanks

  • 2 Contributors
  • 2 Replies
  • 107 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by mikki2

Dani AI

Generated

As correctly noted, those "extras" are provided by a WYSIWYG editor. Many simple implementations you see on forums are just a small toolbar wired to a contenteditable element (or an iframe in designMode). The font list you spotted in the source is typically an array used to populate a select control for font choices.

A minimal approach you can try quickly is a contenteditable div and a few toolbar buttons. A common pattern is to keep toolbar buttons as type="button" and prevent them from blurring the editor so the selection stays active:

<div id="editor" contenteditable="true" style="min-height:120px;border:1px solid #ccc;padding:8px"></div>

<button type="button" onmousedown="event.preventDefault();"
        onclick="document.execCommand('bold', false, null)">B</button>

Note: document.execCommand still works in most browsers but is considered legacy. For production, use a maintained editor library (examples: TinyMCE, CKEditor, Quill, Draft.js, ProseMirror) — they handle selection, paste cleanup, image uploads and cross-browser quirks for you.

Important production considerations: always sanitize/scrub incoming HTML on the server (allowlist tags/attributes) to prevent XSS; provide a plain-text fallback (textarea) for non-JS clients; test paste behavior and mobile UI; and handle selection loss (use mousedown prevention or save/restore Range) and keyboard shortcuts. For a comment box, prefer a well-supported library unless you want to maintain all edge cases yourself.

Recommended Answers

All 2 Replies

Member Avatar for ~s.o.s~

> Is there a particular name for this type of comment box?

Yes, it's called a WYSIWYG (What-you-see-is-what-you-get) editor. Here is one which you can use for your site.

Member Avatar for mikki2

Thanks! I would have never guessed that was the name...

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.