I'm setting up a template system where designers can submit HTML5 designs and allow users to add their own content. I'm using CKEditor 4.2 and Rails 3 for the app. I would like users to be able to load the template page and then edit the various inline editors directly, then save via JS and Ajax. I had everything working but when adding iFrame plugin I ran into some formatting issues because I was simply saving the raw HTML from the inline editors to my templates. See this question for more details: CKEditor and iFrame/YouTube/Other Embed Plugins Show Weird HTML Code
I now know I should use something like:
var data = CKEDITOR.instances.editable.getData();
But how would I manage multiple editors like this? I've told my designers to simply use
contenteditable="true"
for any div they want to be editable. Hence I have no id's to reference for each editor and don't know how many editors each template file will contain I would like to be able to save both non-editable content and of course editable content in the final template, which is just a HTML5 page.
Here is the solution I had to save the raw contents of the entire template file using a div with id:
$saveButton.click(function(e) {
// Extract contents of magboy container
var contents = $("#page-cnt").html();
// Send contents to server
$.ajax({
url: '/pages/'+PageId+'/editor_save',
type: 'POST',
data: {
containerContents: contents
},
success: function(response){
alert("contents saved");
}
});
// prevent original click behaviour
e.preventDefault();
return false;
});
So to sum up my question:
How can I implement a save function that saves the content of several CKEditor editors in a complete template page?
Thanks so much for any help and if you can help with this question, then it will answer this same question also I believe: Saving multiple inline edits with CKEditor
