Home / All Articles / How to submit ckeditor textarea value in html format or text via form?

How to submit ckeditor textarea value in html format or text via form?

Ajax jQuery textarea CKEDITOR form submit code

First you include some important library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.ckeditor.com/4.10.1/standard/ckeditor.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.5.9/adapters/jquery.js"></script>

Ajax code

$(document).ready(function(){
$('#add_page_details_to_DB').click(function() {
var dataStrings = $('form#create_page_to_DB').serialize();

//for ckeditor textarea field 
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}

$.ajax({
url: "/admin/add-city-content",
type: "POST",
data: dataStrings,
success: function(response) {
if(response.status == true){
window.location.replace("/admin/manage-city-pages");
}
else {
console.log("Listing Not Inserted");
}
}
});
return false;
});
})

HTML Form code

<form role="form" id="create_page_to_DB" method="post">
<label>Page Title/City Name</label> <input type="text" name="page_title">
<label>Search Header Text</label>
<textarea class="ckeditor" name="search_header_editor"></textarea><br>
<label>Content Area</label>
<textarea class="ckeditor" name="content_area_editor"></textarea>

<div class="seo">
<h1 class="seo_start"> SEO Tags</h1>
<div class="seo_pad">
<label>Title</label> <input type="text" name="seo_title">

<h4 class="seco_second"> Meta Tags</h4>
<div class="seo_pad1">
<label>Description</label> <input type="text" name="description">
<label>Keywords</label> <input type="text" name="keywords">
<label>Canonical</label> <input type="text" name="canonical">
</div>

<h4 class="seco_second"> OG Tags</h4>
<div class="seo_pad1">
<label>Title</label> <input type="text" name="og_title">
<label>URL</label> <input type="text" name="og_url">
<label>Type</label> <input type="text" name="og_type">
<label>Image</label> <input type="text" name="og_image">
<label>Site Name</label> <input type="text" name="og_site_name">
<label>Description</label> <input type="text" name="og_description">
</div>

<h4 class="seco_second"> Twitter Tags</h4>
<div class="seo_pad1">
<label>Card</label> <input type="text" name="twitter_card">
<label>Site</label> <input type="text" name="twitter_site">
<label>Domain</label> <input type="text" name="twitter_domain' ">
</div>
</div>
</div>
<div class="center_button">
<input type="submit" id="add_page_details_to_DB" value="Submit">
</div>
</form>

and add ckeditor script code

<script>
CKEDITOR.replace( 'search_header_editor' );
CKEDITOR.replace( 'content_area_editor' );
</script>

About Sushil Kumar

Check Also

What is higher order function in JavaScript?

A higher-order function is a function that either takes another function as an argument or …

Leave a Reply

Your email address will not be published. Required fields are marked *