Entering Page Breaks in CKEditor

Question

I have an ASP.NET MVC 4 application that uses the CKEditor control (4.4.5) to capture HTML which is then rendered to a Word (docx) document.

When I use the CKEditor "Page break" button, it produces

<div style="page-break-after: always"><span style="display: none;">&nbsp;</span></div>

which is retained in the editor's HTML, however it is not rendered in Word.

What does work in Word is:

<br> <br style="page-break-after: always;" />

But I am finding that my CKEditor setup strips this out each time you save data in the CKEditor box.

Can I change CKEditor to put in the code that Word recognizes with the page break button, or should I be considering another option to resolve this?

Answer 1

I've created this tiny plugin for version 4.x:

CKEDITOR.plugins.add('wordpagebreak', {
    icons : 'wordpagebreak',
    init : function(editor) {

        var pluginName = 'wordpagebreak';

        editor.addCommand(pluginName, {
            exec : function(editor) {
                var html = '<br class="wordpagebreak" clear="all" ' + 
                               'style="mso-special-character: line-break; ' +
                                      'page-break-before: always">';
                var element = CKEDITOR.dom.element.createFromHtml(html);
                editor.insertElement(element);
            }
        });

        editor.ui.addButton(pluginName, {
            label : 'Word Page Break',
            icon : 'wordpagebreak',
            command : pluginName,
            toolbar : 'insert'
        });
    }
});