title: Lightbox 2 with ember js and Froala editor (image preview on click)
body: <p>I am using ember js as my front end MVC. I have a Question and Answers module which is similar to stack overflow where there are 2 fields one for the title and the other for the description.</p>
  
  <p>Since the description is a text area and I have plugged it with <a href="http://editor.froala.com/" rel="nofollow">Froala wysiwug edito</a>r.</p>
  
  <p>Now I get the content typed in the froala text editor in ember by using</p>
  
  <pre><code>var editorText = $('.froala-element');
  var desciption = editorText.html();
  </code></pre>
  
  <p>in the ember controller.</p>
  
  <p>For example, if I console log what comes from the textarea </p>
  
  <pre><code>&lt;p&gt;&lt;img class="fr-fin" data-fr-image-preview="false" alt="Image title" src="/img/4ad38ae5b4a73cbad30987ac441075998d1e6b35.jpg" width="300"&gt;&lt;/p&gt;&lt;p&gt;&lt;br&gt;&lt;/p&gt;
  </code></pre>
  
  <p>And I save this string in the database. All works good.</p>
  
  <p>Now I want to use <a href="http://lokeshdhakar.com/projects/lightbox2/" rel="nofollow">lightbox plugin</a></p>
  
  <p>And as you notice, to make use of the plugin the <strong>image needs to be wrapped inside an anchor tag and added few data-lightbox attributes</strong></p>
  
  <p>Since I am stroing the image tag markup in the database, what is the best approach wrap the image inside the <code>anchor tag</code></p>
  
  <p>I got 2 options - 
  1) Before saving the image in the database, do a pattern match with javascript and find the image and wrap it inside an anchor tag.
  2) In the <code>didInsertElement</code> hook of ember view, find all the images on the page and perform a <code>dom manuplation</code> and wrap the images inside anchor tag.</p>
  
  <p>Is there any other way I could get this working ? Need some suggestions.</p>