Thursday, May 2, 2013

Using facebox with jwysiwyg

Recently I worked on a project which is required me to create an interface for emailing. I decided to use an ajax form, and I found facebox which is initial made by defunkt (founder of github): I folked and modified facebox to fit my project's needs:

All I have to do is apply the power of jwysiwyg library ( to apply the rich format text-editor to the textarea:



    reveal: function(data, klass) {
      if (klass) $('#facebox .content').addClass(klass)
      $('#facebox .content').empty().append(data)
      // check if there is a textarea, if yes, apply make it a wysiwyg editor
      // using jwysiwyg library
      if ($('#facebox .content #mytextarea').length) {
 $('#facebox .content #mytextarea').wysiwyg();
      $('#facebox .popup').children().fadeIn('normal')
      $('#facebox').css('left', $(window).width() / 2 - ($('#facebox .popup').outerWidth() / 2))


Remember to put a textarea in the html file you want to load with facebox:



<textarea id='mytextarea'></textarea>

Here is the results: