title: Make CKEditor visible with a button click
body: <p>Hi usually i find answer of my every question here but this time i have to ask one... ;)</p>
  
  <p>I am working on a web page and I want to make a text editable with ckeditor and what i have achieved till now is when you go on the text and click on it ckeditor will appear and you can edit the text.
  But Now I want that is on clicking a button(showing small pencil) which I placed on the top of text should ckeditor appear to edit that text.</p>
  
  <p>I am new to Javascript so really need your help.
  Would appreciate it :)</p>
  
  <p>HTML Code:</p>
  
  <pre><code>echo ("&lt;hr&gt;&lt;h4&gt;" . PROCESS_VIEW_DESCRIPTION . "&lt;/h4&gt;&lt;button id=\"edit_img\"&gt;&lt;img src=\"../data/image/button/edit_page.png\"/&gt;&lt;/button&gt;
              &lt;div class=\"full editable\"&gt;
              &lt;p&gt;" HERE IS THIS LONG TEXT "&lt;/p&gt;
              &lt;/div&gt;");
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>$(function(){
  $('.editable').each(function(){
      var id = $(this).attr('id');
      if(id == undefined || id == ''){
          id = 'content_'+Math.floor(Math.random() * 99999999);
          $(this).attr('id',id);
      }
  
      // default
      $('#'+id+'.editable:not(.simple,.full)').ckeip({
          e_url: $(this).data('handler'), // action file which handle $_POST['content']
          e_hover_color: '#ffa07a',
          ckeditor_config : {
              width:'100%',
              toolbar:
              [
                  ['Bold','Italic','Underline','Strike','Subscript','Superscript'],
                  ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                  ['NumberedList','BulletedList'],
                  ['TextColor','BGColor' ],
                  ['RemoveFormat' ],'/',
                  [ 'Format','Font','FontSize' ],
                  ['Outdent','Indent'],
                  [ 'Link','Unlink','-','ShowBlocks'],'/',
                  ['NewPage'],
                  ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar' ],
                  ['Cut','Copy','Paste','PasteText','PasteFromWord'],
                  ['Undo','Redo','-','Source','-','Maximize']
              ],
          }
      });
  
      $('#'+id+'.full.editable').ckeip({
          e_url: $(this).data('handler'), // action file which handle $_POST['content']
          ckeditor_config : {
              width:'100%'
  
          }
      });
  
      $('#'+id+'.simple.editable').ckeip({
          e_url: $(this).data('handler'), // action file which handle $_POST['content']
          ckeditor_config : {
              width:'100%',
              toolbar:
              [
                  ['Bold','Italic','Underline'],
                  ['Maximize']
              ]
          }
      });
  
  });
  </code></pre>
  
  <p>});</p>