Member Avatar for spidey

hi!
i want to know how to bold, italize or underline the text written in a textarea. it's like writing a thread in forums like daniweb's. also, how to put links.

i think it has buttons to click and when submitted, the text will become bold, italized or underlined. as well as inserting hyperlinks.

i need to create this function as soon as possible. hope to hear solutions from you.

thanks in advance and more power!!

  • 2 Contributors
  • 1 Reply
  • 547 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by roryt

Dani AI

Generated

Practical options for (and a quick complement to the scripts mentioned):

Two common approaches: (A) add a small toolbar that wraps the selected text in markup (BBCode or HTML) and convert/sanitize when rendering, or (B) embed a ready-made WYSIWYG editor if full rich editing is required. Option A is lightweight and easy to implement; option B saves effort on paste handling, undo, and edge cases.

Minimal, reliable wrap function for a textarea (works in modern browsers with an IE fallback):

function wrapSelection(textarea, openTag, closeTag) {
  textarea.focus();
  if (typeof textarea.selectionStart === 'number') {
    var start = textarea.selectionStart;
    var end = textarea.selectionEnd;
    var val = textarea.value;
    textarea.value = val.slice(0, start) + openTag + val.slice(start, end) + closeTag + val.slice(end);
    var caret = start + openTag.length + (end - start) + closeTag.length;
    textarea.selectionStart = textarea.selectionEnd = caret;
  } else if (document.selection) { // old IE
    textarea.focus();
    var range = document.selection.createRange();
    range.text = openTag + range.text + closeTag;
  }
}

Usage: call wrapSelection(txa, '<b>', '</b>') for bold, or use BBCode like wrapSelection(txa, '[b]', '[/b]'). For links, prompt for a URL and wrap the selection with <a href="...">...</a> after validating the URL (reject empty or javascript: URIs).

Important server-side notes: never trust client markup. Either store BBCode and convert it on render, or sanitize incoming HTML on the server (allow-list tags/attributes, remove javascript: in hrefs). Cross-site scripting is the main risk here; implement server-side filtering or use a well‑maintained sanitizer.

Practical tips: make toolbar buttons use mousedown (prevent default) so the textarea keeps selection, save/restore selection if the toolbar must blur the textarea, and add keyboard shortcuts (Ctrl+B/Ctrl+I). If handling images, paste, or mobile editing is needed, use a maintained editor (TinyMCE/CKEditor or similar) rather than rolling everything from scratch.

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.