How to get data including HTML from a Rich Text editor using script and 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.

Xtravagant · Accepted Answer · 2017-05-01 14:08:58Z

2

$(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.

edited May 1, 2017 at 14:08

answered May 1, 2017 at 11:27

Xtravagant

1218 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Rashid Over a year ago

Thank you for your grate help. if am using two rich text box in one form then how to get those there to different fields on save page?

Rashid Over a year ago

this is the js file i have linked to my project - bootstrap-wysiwyg.min.js

Rashid Over a year ago

where i have to keep that function you mentioned below the form?

Rashid Over a year ago

it is taking the values now but the value is taking without html. it is not taking line breakers, bold, underline or anything like that. How can i get that html value?

Xtravagant Over a year ago

on your server-side, you should decode your HTML input

|

Collectives™ on Stack Overflow

How to get data including HTML from a Rich Text editor using script and HTML

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related