HTML Extended

Information and examples

Introduction

Thanks to the HTML Extended functionality, it is possible to invoke xmldocx tags and options not available through standard HTML tags. Thus, you can add contents such as headers, footers, comments, table of contents, cross-references and many other contents types, insert new sections, access properties not available in CSS and even add WordFragments.

This feature, available for Premium licenses, integrates with the embedHTML and replaceVariableByHTML methods with a set of custom tags that can be combined even with other HTML and CSS contents.

Supported contents

This is the complete list of supported contents and their default tags:

addBookmark: phpdocx_bookmark
addBreak: phpdocx_break
addComment: phpdocx_comment
addCrossReference: phpdocx_crossreference
addDateAndHour: phpdocx_dateandhour
addEndnote: phpdocx_endnote
addFooter: phpdocx_footer
addFootnote: phpdocx_footnote
addFormElement: phpdocx_formelement
addHeader: phpdocx_header
addHeading: phpdocx_heading
addImage: phpdocx_image
addLink: phpdocx_link
addMathEquation: phpdocx_mathequation
addMergeField: phpdocx_mergefield
addPageNumber: phpdocx_pagenumber
addSection: phpdocx_section
addShape: phpdocx_shape
addSimpleField: phpdocx_simplefield
addStructuredDocumentTag: phpdocx_structureddocumenttag
addTableContents: phpdocx_tablecontents
addText: phpdocx_text
addTextBox: phpdocx_textbox
addWordFragment: phpdocx_wordfragment
addWordML: phpdocx_wordml

Tag types

Tags are divided in two types: inline and block.

The inline ones do not admit children elements. They are the following:

phpdocx_bookmark
phpdocx_break
phpdocx_crossreference
phpdocx_dateandhour
phpdocx_formelement
phpdocx_heading
phpdocx_image
phpdocx_link
phpdocx_mathequation
phpdocx_mergefield
phpdocx_pagenumber
phpdocx_section
phpdocx_shape
phpdocx_simplefield
phpdocx_structureddocumenttag
phpdocx_tablecontents
phpdocx_text
phpdocx_textbox
phpdocx_wordfragment
phpdocx_wordml

The block ones allow children, either of the HTML or the HTML Extended tags. They are the following:

phpdocx_comment
phpdocx_endnote
phpdocx_footer
phpdocx_footnote
phpdocx_header

Options for each method are added with custom data attributes. You just need to write the option name after the prefix data-. E.g.: data-bold="true", data-type="start" o data-type="default".

Examples

HTML Extended is as easy to use as standard HTML tags. It is just necessary to enable the useHTMLExtended option to start working with the custom tags.

Adding contents using custom tags and HTML:

config.xml

<?xml version="1.0" encoding="UTF-8"?>
<pdx:document xmlns:pdx="http://www.phpdocx.com/main" >
    <pdx:config>
        <pdx:output pdx:name="output" pdx:type="docx" />
    </pdx:config>
</pdx:document>

content.xml

<?xml version="1.0" encoding="UTF-8"?>
<pdx:document xmlns:pdx="http://www.phpdocx.com/main" >
    <pdx:content>
        <pdx:embedHTML>
            <pdx:data pdx:dataId="" pdx:type="HTML"><![CDATA[<p>Text content</p>]]></pdx:data>
        </pdx:embedHTML>
        <pdx:embedHTML pdx:useHTMLExtended="true">
            <pdx:data pdx:dataId="" pdx:type="HTML"><![CDATA[<phpdocx_bookmark data-type="start" data-name="bookmark_name" /><p>Text with a bookmark</p><phpdocx_bookmark data-type="end" data-name="bookmark_name" />]]></pdx:data>
        </pdx:embedHTML>
        <pdx:embedHTML pdx:useHTMLExtended="true">
            <pdx:data pdx:dataId="" pdx:type="HTML"><![CDATA[<phpdocx_break data-type="page" data-number="2" /><phpdocx_link data-text="My Link" data-url="#bookmark_name" /><p><span>More text content </span><phpdocx_link data-text="External link" data-url="http://www.google.es" /></p><phpdocx_break data-type="line" data-number="5" /><phpdocx_crossreference data-text="My cross-reference" data-type="bookmark" data-referenceName="bookmark_name" /><p style="text-align: right;font-weight: bold;font-family: Arial;"><phpdocx_dateandhour data-dateFormat="dd\' of \'MMMM\' of \'yyyy\' at \'H:mm"/></p>]]></pdx:data>
        </pdx:embedHTML>
    </pdx:content>
</pdx:document>

settings.xml

<?xml version="1.0" encoding="UTF-8"?>
<pdx:document xmlns:pdx="http://www.phpdocx.com/main" >
    <pdx:settings>
    </pdx:settings>
</pdx:document>

Add a TOC based on headings created with HTML and xmldocx tags:

config.xml

<?xml version="1.0" encoding="UTF-8"?>
<pdx:document xmlns:pdx="http://www.phpdocx.com/main" >
    <pdx:config>
        <pdx:output pdx:name="output" pdx:type="docx" />
    </pdx:config>
</pdx:document>

content.xml

<?xml version="1.0" encoding="UTF-8"?>
<pdx:document xmlns:pdx="http://www.phpdocx.com/main" >
    <pdx:content>
        <pdx:embedHTML pdx:useHTMLExtended="true">
            <pdx:data pdx:dataId="" pdx:type="HTML"><![CDATA[<phpdocx_tablecontents data-autoUpdate="true" data-stylesTOC="document.docx"/>]]></pdx:data>
        </pdx:embedHTML>
        <pdx:embedHTML>
            <pdx:data pdx:dataId="" pdx:type="HTML"><![CDATA[<h1 style="color: #b70000">1st level heading</h1><h2 style="color: #b70000">2nd level heading</h2><h3 style="color: #b70000">3rd level heading</h3>]]></pdx:data>
        </pdx:embedHTML>
        <pdx:embedHTML pdx:useHTMLExtended="true">
            <pdx:data pdx:dataId="" pdx:type="HTML"><![CDATA[<phpdocx_heading data-text="Custom heading" data-level="2" />]]></pdx:data>
        </pdx:embedHTML>
    </pdx:content>
</pdx:document>

settings.xml

<?xml version="1.0" encoding="UTF-8"?>
<pdx:document xmlns:pdx="http://www.phpdocx.com/main" >
    <pdx:settings>
    </pdx:settings>
</pdx:document>

Headers and footers:

config.xml

<?xml version="1.0" encoding="UTF-8"?>
<pdx:document xmlns:pdx="http://www.phpdocx.com/main" >
    <pdx:config>
        <pdx:output pdx:name="output" pdx:type="docx" />
    </pdx:config>
</pdx:document>

content.xml

<?xml version="1.0" encoding="UTF-8"?>
<pdx:document xmlns:pdx="http://www.phpdocx.com/main" >
    <pdx:content>
        <pdx:embedHTML pdx:useHTMLExtended="true">
            <pdx:data pdx:dataId="" pdx:type="HTML">
                <![CDATA[
                <head>
                    <style>
                        p {font-style: italic;}
                        p.header {font-size: 20px; font-weight: bold;}
                        div.footer {font-size: 10px;}
                    </style>
                </head>
                <phpdocx_header data-type="default">
                    <p class="header">
                        Custom header <strong>with strong style</strong>
                        <phpdocx_link data-text="External link" data-url="http://www.google.es" />
                    </p>
                </phpdocx_header>
                <p>Lorem ipsum dolor sit amet.</p>
                <phpdocx_footer>
                    <div class="footer">
                        <table border="1" style="border-collapse: collapse" width="600">
                            <tbody>
                                <tr width="600">
                                    <td>Cell A</td>
                                    <td><img src="image.png" width="35" height="35" style="vertical-align: -15px"></p></td>
                                    <td><phpdocx_pagenumber data-target="defaultFooter" data-type="page-of" data-textAlign="right" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </phpdocx_footer>
                ]]>
            </pdx:data>
        </pdx:embedHTML>
    </pdx:content>
</pdx:document>

settings.xml

<?xml version="1.0" encoding="UTF-8"?>
<pdx:document xmlns:pdx="http://www.phpdocx.com/main" >
    <pdx:settings>
    </pdx:settings>
</pdx:document>

Comments, endnotes and footnotes:

config.xml

<?xml version="1.0" encoding="UTF-8"?>
<pdx:document xmlns:pdx="http://www.phpdocx.com/main" >
    <pdx:config>
        <pdx:output pdx:name="output" pdx:type="docx" />
    </pdx:config>
</pdx:document>

content.xml

<?xml version="1.0" encoding="UTF-8"?>
<pdx:document xmlns:pdx="http://www.phpdocx.com/main" >
    <pdx:content>
        <pdx:embedHTML pdx:useHTMLExtended="true">
            <pdx:data pdx:dataId="" pdx:type="HTML">
                <![CDATA[
                <head>
                    <style>
                        p.italicc {font-style: italic;}
                    </style>
                </head>
                <phpdocx_comment>
                    <p>Here comes the </p>
                    <phpdocx_comment_textdocument data-text=" comment " data-italic="true" />
                    <phpdocx_comment_textcomment>
                        <p class="italicc">Text <strong>comment</strong></p>
                    </phpdocx_comment_textcomment>
                    <p>and some other text.</p>
                </phpdocx_comment>
                <h1 style="color: #b70000">A HTML Extended example.</h1>
                <phpdocx_endnote>
                    <p>Here comes the </p>
                    <phpdocx_endnote_textdocument data-text=" endnote" data-italic="true" />
                    <phpdocx_endnote_textendnote>
                        <p class="italicc">Text <strong>endnote</strong></p>
                    </phpdocx_endnote_textendnote>
                    <p>and some other text.</p>
                </phpdocx_endnote>
                <phpdocx_comment>
                    <phpdocx_comment_textdocument data-text="Here comes another comment " data-italic="true" data-bold="true" />
                    <phpdocx_comment_textcomment>
                        <p>This is some HTML code with a link to <a href="https://www.phpdocx.com">phpdocx.com</a> and a random image: 
                        <img src="image.png" width="35" height="35" style="vertical-align: -15px"></p>
                    </phpdocx_comment_textcomment>
                    <p> and some other text.</p>
                </phpdocx_comment>
                <phpdocx_footnote>
                    <p>Here comes the </p>
                    <phpdocx_footnote_textdocument data-text=" footnote" data-bold="true" />
                    <phpdocx_footnote_textfootnote>
                        <p>Text <em>footnote</em></p>
                    </phpdocx_footnote_textfootnote>
                    <p> and some other text.</p>
                </phpdocx_footnote>
                ]]>
            </pdx:data>
        </pdx:embedHTML>
    </pdx:content>
</pdx:document>

settings.xml

<?xml version="1.0" encoding="UTF-8"?>
<pdx:document xmlns:pdx="http://www.phpdocx.com/main" >
    <pdx:settings>
    </pdx:settings>
</pdx:document>

As shown in this last example, comments, endnotes and footnotes require a specific structure in order to correctly add all their content.