Question

My clients can enter text into textarea and have the option to use the markdown or textile filters for each textarea.

With some models (articles, newsletter, etc) they can upload images to associate with the model, which are displayed in a column next to the text of the text.

This worked fine for a while, but they have now told me that the want the ability to put the images INSIDE the text a specific positions.

What is the best way to go about this? I suppose I may have to use a wysiwyg for this, but would rather not. And how would this work for images which are not yet on the server, etc?

Answer 1

There are different directions you could go to:

• Follow the path of Confluence, which released in their new version 4.0 a rewritten WYSIWYG editor, that stores as source XHTML, not any more wiki markup.
  • Leads to an update of all pages when migrating.
  • Was pretty difficult to implement. I do not know if they use any more the TinyMCE editor of previous versions.
• Follow the format of markdown how to include images in your source format. So by typing: This is my text. !image.png! The inline image shows ..., you will have a format that is understandable.
  • You have to expand the interpretation, so that the !<filename>! will be mapped that is stored locally anyway.
  • You have to add clear-up dialogs for the images that are yet not known, so doing bulk uploads …
  • You may provide a drag area on your view, that then shows the filename and gives examples how to include that inside the text area.
• Go for something in between, by allowing users to drag images inside the editor. There are plugins written in Javascript that allow you to do that, e.g. UI Draggable for jquery
  • I have no idea how to integrate that image inside the text editor. Overlay?

So the second one is the easiest, and the user knows how to do it. If they only decide that this is the solution they want to have 🙂