Using TinyMCE's pagebreak Plugin with valid_elements

TinyMCE’s pagebreak plugin is a handy way of providing users a way of marking breaks in content by placing a HTML comment in the source code denoting the break. However, if you are using the editor’s valid_elements attribute to restrict HTML elements used in the content (a good idea if you don’t want all sorts of messy markup getting added) you need to make sure you allow comment tags.

The official documentation doesn’t make it clear how comments are represented as valid elements, but what you need to include is --[*], something like this:-

tinymce.init({
    selector: "textarea",
    plugins: "pagebreak",
    menubar: "insert",
    toolbar: "pagebreak",
    valid_elements: "p,br,--[*]"
});

Update 10/08/2017: It seems that the above doesn’t work with newer versions of TinyMCE. Instead you must allow your img tags to have the class attribute:-

tinymce.init({
    selector: "textarea",
    plugins: "pagebreak",
    menubar: "insert",
    toolbar: "pagebreak",
    valid_elements: "p,br,img[class]"
});