Question

Hey guys I’m implementing a page that has about 9 separate divs on it that I want each to be separately editable using ckeditor. The page is being dynamically generated through php with codeigniter but I want a user to be able to make changes to the HTML before finalizing it. I have currently implemented ckeditor to edit divs as demonstrated here: http://nightly.ckeditor.com/7614/_samples/divreplace.html

However after the user is done I want to be able to save the HTML on my server since I will be converting the page to a PDF using wkhtmltopdf. As you can see on the example once you click any of the divs it opens a new editor. I need a way to submit the changes when the user is done editing the page and because I am trying to pdf the resulting HTML i cannot include a button or similar element. I am also worried that since in this example you can’t hide all the editors you can only open a new one that the PDF will show the ckeditor box. I was thinking that I could just grab the document on a javascript event and send it via ajax request to a php function that would save it to a file and then PDF the file but I am unsure how to trigger the html submit event or replace the remaining edit box. Any suggestions?

Answer 1

You can simply wrap the content you’d like to convert to PDF into a div, and serialize it into a hidden field when the form is submitted:

<form id="yourForm" method="post" action="foo">
    <!-- This DIV will be serialized... -->
    <div id="yourContentToBeSaved">
        <!-- Your editors go here... -->
        <div class="editable">
            Foo
        </div>
        <div class="editable">
            Bar
        </div>
        ...
    </div>
    <input id="hidden" type="hidden" />
    <button type="submit">Serialize the DIV, then save the form</button>
</form>

jQuery code:

$( '#yourForm' ).submit(function() {
    // Destroy all the editors.
    for( var instance in CKEDITOR.instances )
        CKEDITOR.instances[ instance ].destroy();

    // Store #yourContentToBeSaved HTML in a hidden field. You can 
    // retrieve these data with PHP on the server-side once the form is submitted.
    $( '#hidden' ).val( $( '#yourContentToBeSaved' ).html() );
});

Voilà!