如何使用脚本和HTML从Rich Text编辑器获取包括HTML的数据

Question

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.

code on my html body is

<div class="wysiwyg-editor" id="editor1">
                                
</div>

the script is

<script type="text/javascript">
            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);
        }
        $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+ 
         '<strong>File upload error</strong> '+msg+' </div>').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' && 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 && !(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()
            });
        }
        */
    }


});
        </script>

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.

</div>

Answer 1

$(function() {
  $('#editor1').keyup(function() {
    $('#hiddenCode').val(parseMe($(this).html()));
    
    // Sample output, which enables you to see the effect
    // Besides, this decodes your HTML entities
    $('#output').html(
      $('#hiddenCode').html(
        $('#hiddenCode').val()
      ).text()
    );
  });

  $('#editor2').keyup(function() {
    $('#hiddenCode2').val(parseMe($(this).html()));
  });

  // This will encode your HTML input
  function parseMe(value) {
    return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  }
});

/* layout only */

#editor1,
#editor2 {
  width: 300px;
  border: 1px solid #000;
  padding: 20px;
  margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wysiwyg-editor" id="editor1" contenteditable="true"></div>
<div class="wysiwyg-editor" id="editor2" contenteditable="true"></div>

<textarea id="hiddenCode" name="htmlCode"></textarea>
<textarea id="hiddenCode2" name="htmlCode2"></textarea>

<!-- Sample output -->
<div id="output"></div>

To hide those textareas above, just put the hidden attribute

If you hit the submit button, you can freely get the data because of those textareas. You can access them with their name attrubites.

</div>