{ plugins: [ "code" ], toolbar: 'undo redo | insertperson insertprocedure italic | bullist', content_css: 'test-mce.css', custom_elements: "charge,~person,~procedure,en", valid_elements: "charge,p,i,person[pid],procedure[pid],en", Xsltforms_usersetup: function(editor) { function insertPerson () { insertElem('person'); } function insertProc () { insertElem('procedure'); } function insertElem(gi) { var s = '<' + gi + '>' + editor.selection.getContent() + '</' + gi + '>'; editor.insertContent(s); } editor.addButton('insertperson', { text: "Person", onclick: insertPerson, tooltip: "Insert person element" }); editor.addButton('insertprocedure', { text: "Procedure", onclick: insertProc, tooltip: "Insert procedure element" }); } } <charge> <p>uncertain<en><p>Gruen (<i>Historia</i> 1966) 38 suggests a <procedure pid="c-maiestas" lang="lat">maiestas</procedure> trial for seditious behavior as tribune.</p></en></p> </charge>

5 February 2017. This page illustrates the use of TinyMCE as a mixed-content editor within an XForm, using XSLTForms. The form defines two custom buttons (Person and Procedure) and numerous custom elements including person and procedure.

Raw resulting value:

See (a) the related XHTML document and (b) the related XForm (without user exist) for the same data and the same customization in different contexts. Note in particular that the buttons labeled 'Person' and 'Procedure'

It may also be noted that the I (italics) button italicizes a phrase (and turns it green), but the change does not appear in the 'raw resulting value', apparently because the button inserts an em element, not an i element, and em is not listed among the valid elements in the customization, so it is removed when the data are cleaned up for export by TinyMCE. (The endnote is also moved out of the paragraph, because TinyMCE does not recognize en as a legitimate child of p.)