Dear Reader, let us we know that “How to get CKEditor Textarea Value using jQuery“. In one of the project’s mailing scenario, there was a need to add the CKEditor Textarea to add mail body content. It was easy to add the editor to the page, but it was a little bit struggling to get contents from CKEditor using jQuery.
Start Step Wise:-
Step 1.
Added CKEditor using this Code:-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div> <label>Content:</label> <textarea name='mailContents' id='mailContents' placeholder="Please enter Mail Body Contents." cols="4" rows="4" aria-invalid="false"></textarea> </div> <script type="text/javascript" src="/assets/ckeditor/ckeditor.js" ></script> <script type="text/javascript"> CKEDITOR.replace('mailContents', { width: 500, height: 150, toolbar: [['Source', 'Bold', 'Italic', 'PasteText', 'SpellCheck', 'ckeditor_wiris_formulaEditor', 'ckeditor_wiris_CAS']], customConfig: 'configSimple.js', resize_enabled: false }); </script> |
It will look like this image attached and we need to get TextArea Contents.
In General, we would use the following code for getting contents on submitting of form. But that does not work when using CKEditor Text Area for the input of contents.
1 2 3 4 5 6 7 |
var mailContents = $('#mailContents').val(); alert(mailContents+' mailContents'); //or var mailContents = $('#mailContents').text(); alert(mailContents+' mailContents'); //or var mailContents = $('#mailContents').html(); alert(mailContents+' mailContents'); //or var mailContents = $("textarea#mailContents").val(); alert(mailContents+' mailContents'); |
The above code works as long as it is a textarea. Once you add the CKEditor class to the textarea the textarea is replaced with a rich text editor and above code will not get the value.
Step 2.
Now to get the contents on submitting a form, you have to use the following code:-
1 2 3 |
var mailContents = CKEDITOR.instances.mailContents.getData(); //or var mailContents = CKEDITOR.instances['mailContents'].getData(); alert(mailContents+' mailContents'); |
It will give the Result like:-
1 2 |
<div> Hello, This is Test Mail Contents. </div> |
So again you need to remove <div> tag and get exact actual placed contents.
Step 3.
Hence need to follow this code too.
1 2 3 4 5 |
var element = $(mailContents); //convert string to JQuery element element.find("div").remove(); //remove div elements var newString = element.html(); //get back new string alert('__'+newString+'__'); var mail_contents = $.trim(newString); alert('__'+mail_contents+'__'); |
Now you will get the Mail body content i.e CKEditor Textarea Value as it is, which is without any <div> tag and without any left, right extra space.
And if you want to get CKEditor TextArea Value as it is (with proper formattings, like with bold, italic styles).Like below image attached:-
Step 4.
And want to send this in AJAX data parameter. Then you need to add the code below:-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var qId = $('#qid').val(); //alert(qId+' qId'); var emailIds = $('#emailIds').val(); //alert(emailIds+' emailIds'); var mailContents = CKEDITOR.instances['mailContents'].getData(); //alert(mailContents+' mailContents'); var mail_contents = encodeURIComponent(mailContents); $.ajax({ method : "POST", data : "qId=" + qId + "&emailIds=" + emailIds + "&mail_contents=" + mail_contents, url : "/WebPreparations/sendMail.php", async : false, success: function (result) { //alert(result);return false; alert('Mail Send Successfully'); }, error: function (res) { alert(result); } }); |
As Data will be posted in this format.
Step 5.
POST Parameters:-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
qId 118 quoteComments <div> <strong>Dear Sir,<br /> </strong></div> <div> </div> <div> This is test mail contents...........</div> <div> </div> <div> <em>Thanks & Regards,<br /> </em></div> <div> <em><strong>Team<br /> </strong></em></div> quoteEmailIds chandana57@yopmail.com,chandana58@yopmail.com,rukhsad@yopmail.com |
POST Source:-
1 2 3 4 5 6 7 8 9 10 11 12 |
qId=118 "eEmailIds=chandana57@yopmail.com,chandana58@yopmail.com,rukhsad@yopmail.com "eComments=%3Cdiv%3E%0A%09%3Cstrong%3EDear%20Sir%2C%3Cbr%20%2F%3E%0A%09%3C%2Fstrong%3E%3C%2Fdiv%3E%0A%3Cdiv%3E %0A%09%26nbsp%3B%3C%2Fdiv%3E%0A%3Cdiv%3E%0A%09This%20is%20test%20mail%20contents...........%3C%2Fdiv %3E%0A%3Cdiv%3E%0A%09%26nbsp%3B%3C%2Fdiv%3E%0A%3Cdiv%3E%0A%09%3Cem%3EThanks%20%26amp%3B%20Regards%2C %3Cbr%20%2F%3E%0A%09%3C%2Fem%3E%3C%2Fdiv%3E%0A%3Cdiv%3E%0A%09%3Cem%3E%3Cstrong%3ETeam%3Cbr%20%2F%3E%0A %09%3C%2Fstrong%3E%3C%2Fem%3E%3C%2Fdiv%3E%0A |
2 Comments:
nike basketball shoes April 25, 2018
Thank you so much for providing individuals with remarkably splendid opportunity to check tips from this website. It is often so useful and also jam-packed with a great time for me and my office acquaintances to visit your website particularly 3 times weekly to read through the newest guidance you have. Of course, I’m just actually contented for the exceptional strategies you give. Selected 1 points on this page are particularly the most impressive I’ve had.
Webpreparations Team April 25, 2018
Thanks a ton, Dear Reader 🙂