How to add a Header & Footer in TinyMCE editor?

Question

I am trying to add a Header & Footer in TinyMCE editor, so the user could get a predefined "Blank" page to edit and have default Header & Footer. User only needs to input the customized content.

Is there a way to accomplish this?

Thanks.

Answer 1

Yes, this is possible. You need to add the header and footer to the content when the editor initialzes. But keep in mind that you will have to remove it before saving if you do not want to have them stored in the db. Here is the init code to make it work. You will need to make use of the setup parameter

// Adds an observer to the onInit event using tinyMCE.init
tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onInit.add(function(ed) {
         var header = "<header>ABCD</header>",
             footer = "<div>footer</div>",
             content = ed.getContent();

         content = header + content + footer;
         ed.setContent(content);
      });
   }
});

Additionally you will need to define your added tags as valid elements in the tinymce configuration. Have a look at the valid_elements setting for this (maybe you can use the extended_valid_elements setting).