title: How to get data including HTML from a Rich Text editor using script and HTML
body: <p>I got a rich text box editor form online and i have added to my webpage.the image of the Rich Text box is attached here.
  <a href="https://i.stack.imgur.com/YnmUq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YnmUq.png" alt="enter image description here"></a></p>
  
  <p>code on my html body is</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wysiwyg-editor" id="editor1"&gt;
                                  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the script is </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
     jQuery(function($){
   
   function showErrorAlert (reason, detail) {
    var msg='';
    if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
    else {
     //console.log("error uploading file", reason, detail);
    }
    $('&lt;div class="alert"&gt; &lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;'+ 
     '&lt;strong&gt;File upload error&lt;/strong&gt; '+msg+' &lt;/div&gt;').prependTo('#alerts');
   }
  
   //$('#editor1').ace_wysiwyg();//this will create the default editor will all buttons
  
   //but we want to change a few buttons colors for the third style
   $('#editor1').ace_wysiwyg({
    toolbar:
    [
     'font',
     null,
     'fontSize',
     null,
     {name:'bold', className:'btn-info'},
     {name:'italic', className:'btn-info'},
     {name:'strikethrough', className:'btn-info'},
     {name:'underline', className:'btn-info'},
     null,
     {name:'insertunorderedlist', className:'btn-success'},
     {name:'insertorderedlist', className:'btn-success'},
     {name:'outdent', className:'btn-purple'},
     {name:'indent', className:'btn-purple'},
     null,
     {name:'justifyleft', className:'btn-primary'},
     {name:'justifycenter', className:'btn-primary'},
     {name:'justifyright', className:'btn-primary'},
     {name:'justifyfull', className:'btn-inverse'},
     null,
     {name:'createLink', className:'btn-pink'},
     {name:'unlink', className:'btn-pink'},
     null,
     {name:'insertImage', className:'btn-success'},
     null,
     'foreColor',
     null,
     {name:'undo', className:'btn-grey'},
     {name:'redo', className:'btn-grey'}
    ],
    'wysiwyg': {
     fileUploadError: showErrorAlert
    }
   }).prev().addClass('wysiwyg-style1');
  
   
   /**
   //make the editor have all the available height
   $(window).on('resize.editor', function() {
    var offset = $('#editor1').parent().offset();
    var winHeight =  $(this).height();
    
    $('#editor1').css({'height':winHeight - offset.top - 10, 'max-height': 'none'});
   }).triggerHandler('resize.editor');
   */
   
  
   
   
   
  
  
   
  
  
   
  
   //RESIZE IMAGE
   
   //Add Image Resize Functionality to Chrome and Safari
   //webkit browsers don't have image resize functionality when content is editable
   //so let's add something using jQuery UI resizable
   //another option would be opening a dialog for user to enter dimensions.
   if ( typeof jQuery.ui !== 'undefined' &amp;&amp; ace.vars['webkit'] ) {
    
    var lastResizableImg = null;
    function destroyResizable() {
     if(lastResizableImg == null) return;
     lastResizableImg.resizable( "destroy" );
     lastResizableImg.removeData('resizable');
     lastResizableImg = null;
    }
  
    var enableImageResize = function() {
     $('.wysiwyg-editor')
     .on('mousedown', function(e) {
      var target = $(e.target);
      if( e.target instanceof HTMLImageElement ) {
       if( !target.data('resizable') ) {
        target.resizable({
         aspectRatio: e.target.width / e.target.height,
        });
        target.data('resizable', true);
        
        if( lastResizableImg != null ) {
         //disable previous resizable image
         lastResizableImg.resizable( "destroy" );
         lastResizableImg.removeData('resizable');
        }
        lastResizableImg = target;
       }
      }
     })
     .on('click', function(e) {
      if( lastResizableImg != null &amp;&amp; !(e.target instanceof HTMLImageElement) ) {
       destroyResizable();
      }
     })
     .on('keydown', function() {
      destroyResizable();
     });
       }
  
    enableImageResize();
  
    /**
    //or we can load the jQuery UI dynamically only if needed
    if (typeof jQuery.ui !== 'undefined') enableImageResize();
    else {//load jQuery UI if not loaded
     //in Ace demo dist will be replaced by correct assets path
     $.getScript("assets/js/jquery-ui.custom.min.js", function(data, textStatus, jqxhr) {
      enableImageResize()
     });
    }
    */
   }
  
  
  });
    &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I post the data which i am entering inside the rich text box. I want to get with it's HTML code for saving to database. Please help me. I am a beginner. </p>