The requirement is to allow the user of the website to create dynamic documents with placeholders. The placeholders can contain any item from a defined list.


Hello {name}, I'm contacting you to let you know that the new version {version} of {software} is now available on {website}.

I just made this up, but it illustrates the point. A possible solution is to have a simple text box and a button 'insert placeholder'. If user clicks on a placeholder {whatever}, a dialog pops up that lets the user modify the placeholder (from a list) or remove it. The 'insert placeholder' button would let the user to insert a new placeholder where the cursor is placed.

I'm wondering what is a better way to handle this.

  • Just to clarify: users can modify the template document while also being able to choose placeholder values? How do users edit the pre-defined lists used to populate placeholders?
    – kastark
    Jul 30 '12 at 14:22
  • @dhmholley: I'd guess it's either a newsletter system, or formalized communication with customers. When I was working for an HR-like company, the clerks had to send all communication through the web interface, but they could edit the template before sending.
    – Aadaam
    Jul 30 '12 at 14:34
  • Users can enter any kind of document in free form and insert placeholders anywhere they like. The placeholders are set by the developer as they will tie to business object fields. No, it's not a newsletter system. There's no "template" document. Users can't edit the placeholder list.
    – Matyas
    Jul 30 '12 at 14:49

Provide a rich text editor toolbar like what you see here, and make a combobox-like selection of available placeholders.

The more interesting part comes on the rendering of the edited text, as the placeholder is expected to be an atomic token, therefore two behaviours are wouldbe expected in my opinion:

  • highlighted handling: usually, a "capsule", with light blue background
  • atomic handling in selection, deletion, and copy-paste: you cannot delete half of the placeholder, if you hit backspace next to it, the whole thing disappears; you also can't select half of it, it's either part of the selection or it is not;
  • if you copy a text containing a placeholder to-and-from the clipboard, its properties are retained

That said, it's not that easy to create such an editor. Perhaps it's easier to go with simple syntax highlighting, using codemirror or similar stuff.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.