Cookbook

INTRODUCTION

PRACTICAL PHPDOCX

CONVERSION PLUGIN

COOKBOOK

SNIPPETS

API DOCUMENTATION

HTML API DOCUMENTATION

JAVASCRIPT API DOCUMENTATION

XML API DOCUMENTATION

CASE STUDIES

WYSIWYG DOCX editor

phpdocx Advanced and Premium licenses allow to create a WYSIWYG editor for DOCX documents. It is possible to transform DOCX to HTML to see it or modify it in a WYSIWYG editor and then turn it to a DOCX again.

To perform these transformations it is necessary to call two methods:

1- transform - available on transformDocAdvHTML: DOCX to HTML
2- embedHTML - available on the CreateDocx class: HTML to DOCX

Both methods use only PHP native classes, so there's no need to install additional tools.

Supported contents and styles of each method are detailed on the documentation pages.

As a practical example, let's work with a DOCX that contains texts with styles, tables, lists and images.

1- Transform the DOCX to HTML

$transformHTMLPlugin = new TransformDocAdvHTMLDefaultPlugin();

$transform = new TransformDocAdvHTML('document_cv.docx');
$html = $transform->transform($transformHTMLPlugin);

2- Show the HTML obtained in the previous step with any modern WYSIWYG editor like CKEditor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.ckeditor.com/4.10.0/standard/ckeditor.js"></script>
    <style type="text/css">
        /* center the editor */
        body {
            padding: 30px;
            display: flex;
            align-items: center;
            text-align: center;
        }

        .container {
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="container">
    <h2><label for="editor1">Document Editor</label></h2>
    <textarea id="editor1">
        <?php echo file_get_contents('output.html') ?>
    </textarea>
</div>
<script>
    CKEDITOR.config.width = '850';
    CKEDITOR.config.height = '800';
    CKEDITOR.replace( 'editor1', {
        allowedContent: true
    });
</script>
</body>
</html>

For the sake of the example, CKEditor works here with the standard settings. Anyway, it is possible to include more features like font sizes, preset styles, math equations… This editor and many others allow customization to add just the desired options.

phpdocx transforms DOCX to HTML, generating non-inline CSS styles by using style tags. Some WYSIWYG editors require using inline styles. In these cases, it is advisable to convert the HTML obtained with phpdocx to an HTML with inline styles. Many tools and libraries fit this purpose, including native PHP solutions: https://stackoverflow.com/questions/3990706/php-class-to-inline-css-styles.

3- Modify freely the contents with the WYSIWYG editor using the supported options. Then generate the DOCX with the embedHTML method

<?php

require_once 'classes/CreateDocx.php';

$docx = new CreateDocx();

$html = file_get_contents("output-ckeditor.html");
$docx->embedHTML($html, array('downloadImages' => true));

$docx->createDocx('output');

This document can be exported to PDF, DOC, ODT, RTF and other formats with the conversion plugin, or back to HTML with the aforementioned steps.

The methods reviewed here count with multiple options, detailed in its own documentation pages. Supported tags and styles are also explained there.