FileIt

HTML to Word/PDF

• Created: 03/23/2012
• latest Update: 03/24/2012
• By: Koen Vendrik
• Email: k.vendrik@gmail.com

Thank You for Puchasing FileIt

Installation

First of all thank you for Purchasing my project.
In the following Sections I will explane how you can use and modify FileIt.

Installation Word

Quick Installation

Navigate to the Word folder and copy the Include folder to your server. Now go to the HTML or PHP file where you want the converter to be and include the following code where you want your editor to be on the page.

<?php include("Include/index.html"); ?>

You're Done, Note that you need to make sure that the path to the file is correct so if you would rename the Include folder to let's say for example Converter then you would need to replace Include in the code by Converter and your code would look like this.

<?php include("Converter/index.html"); ?>

When you are useing a include tag it tells the browser that it should include the page into the page you are using the include tag in. So when the HTML file you're using the include tag in is in another folder then the path of the Editor and PHP files won't be correct anymore. So the last thing you need to do is open index.html in a editor and make sure that you are useing the right paths on everything between the head tags and on the form action element. For example if you placed the Include folder on the root of your server and you included the index.html file in one of your webpages on the root of your server then you would need to add Include/ before every code between the head tags and to the action element in the form so the browser would know where the files are located. When you did this then your code would like like this.

<script type="text/javascript" src="Include/Editor/ckeditor.js"></script>

<script src="Include/Editor/editor.js" type="text/javascript"></script>

<link href="Include/Editor/editor.css" rel="stylesheet" type="text/css" />

 

<form action="Include/Word.php" method="post">

Costum Installation (only if you have knowledge of coding)

If you need the Word converter then you should take a look inside the Word map and copy the following files/maps to your server.

         -        Word.php
         -        Editor  (Located in the Root directory)

Now you copied all the neccessary files to run the Word converter. The next thing you need to do is copying the neccesery locations to you HTML file.

You need to copy the following between your Head tags

<script type="text/javascript" src="Editor/ckeditor.js"></script>

<script src="Editor/editor.js" type="text/javascript"></script>

<link href="Example/Editor/editor.css" rel="stylesheet" type="text/css" />

 

Again you will need to adjust the Path to the location of the Word.php

Installation PDF

Quick Installation

Navigate to the PDF folder and copy the Include folder to your server. Now go to the HTML or PHP file where you want the converter to be and include the following code where you want your editor to be on the page.

<?php include("Include/index.html"); ?>

You need to make sure that the path to the file is correct so if you would rename the Include folder to let's say for example Converter then you would need to replace Include in the code by Converter and your code would look like this.

<?php include("Converter/index.html"); ?>

When you are useing a include tag it tells the browser that it should include the page into the page you are using the include tag in. So when the HTML file you're using the include tag in is in another folder then the path of the Editor and PHP files won't be correct anymore. So the last thing you need to do is open index.html in a editor and make sure that you are useing the right paths on everything between the head tags and on the form action element. For example if you placed the Include folder on the root of your server and you included the index.html file in one of your webpages on the root of your server then you would need to add Include/ before every code between the head tags and to the action element in the form so the browser would know where the files are located. When you did this then your code would like like this.

<script type="text/javascript" src="Include/Editor/ckeditor.js"></script>

<script src="Include/Editor/editor.js" type="text/javascript"></script>

<link href="Include/Editor/editor.css" rel="stylesheet" type="text/css" />

 

<form action="Include/PDF/PDF.php" method="post">

Costum Installation (only if you have knowledge of coding)

If you need the PDF converter then you should copy the following files/maps to your server.

         -        PDF (Located in the Root directory)
         -        Editor  (Located in the Root directory)

Now you copied all the neccessary files to run the PDF converter. The next thing you need to do is copying the neccesery locations to you HTML file.

You need to copy the following between your Head tags

<script type="text/javascript" src="Example/Editor/ckeditor.js"></script>

<script src="Example/Editor/editor.js" type="text/javascript"></script>

<link href="Example/Editor/editor.css" rel="stylesheet" type="text/css" />

 

Again you will need to adjust the Path to the location of the PDF Map.

Styling

Quick Installation Styling

If you need to adjust the styling to get the editor in a specific position then you can do this by opening the index.html file in your editor and adding classes or id's to the style tag. You could for example style the editor so it would be 70% of your page and it would be positioned in the center of the page. To do this you would need to add a class or id to the style tag. Let's say we name it container.

#container {

             width: 70%
             margin-left: 15%;
}

This code tells the browser that the editor is 70% of the page and that it should be pushed to the right by 15%.
Now you have the code you need to tell the browser to apply it to the page. To do this you would need to add a div tag at the top of the body. so you would need to add the following code below the <body> tag.

<div id="container">

And then you would have to need to tell the browser to close it at th end of the body by using a </div> tag. So you would need to add a </div> tag above the </body> tag.

Now you're done styling your editor. You can if you want add everything between the style tags to your own CSS and  make a link to it by adding the following code to the head tag in the FileIt HTML file.

<link rel="stylesheet" type="text/css" href="path/to/file/style.css">

You would need to replace the path/to/file/stye.css with your own path and file name.

You can also use the div tag in your own HTML file instead of in the FileIt index.html file. To do this you would still need to add the container id to your CSS or between the style tags but instead of adding the div tags to the HTML file you would need to add them to the include tag.

<div id="container">
<?php include("Include/index.html"); ?>
</div>

Costum Installation Styling

You would need to add your own CSS and make a link to CSS it by adding the following code to the head tag in the FileIt HTML file.

<link rel="stylesheet" type="text/css" href="path/to/file/style.css">

You would need to replace the path/to/file/stye.css with your own path and file name.

You could for example style the editor so it would be 70% of your page and it would be positioned in the center of the page. To do this you would need to add a class or id to your CSS. Let's say we name it container.

#container {

             width: 70%
             margin-left: 15%;
}

This code tells the browser that the editor is 70% of the page and that it should be pushed to the right by 15%.
Now you have the code you need to tell the browser to apply it to the page. To do this you would need to add a div tag at the top of the body. so you would need to add the following code below the <body> tag.

<div id="container">

And then you would have to need to tell the browser to close it at th end of the body by using a </div> tag. So you would need to add a </div> tag above the </body> tag.

You can also use the div tag in your own HTML file instead of in the FileIt index.html file. To do this you would still need to add the container id to your CSS but instead of adding the div tags to the HTML file you would need to add them to the include tag.

<div id="container">
<?php include("Include/index.html"); ?>
</div>

Modify Word

The Word.php file is very short and easy to edit. Word.php includes the following code.

<?php

header("Content-type: application/vnd.ms-word");

header("Content-Disposition: attachment;Filename=Editor.doc");

 

echo "<html>";

echo "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Windows-1252\">";

echo "<body>";

echo $_REQUEST['editortext'];

echo "</body>";

echo "</html>";

?>

 

Filename

If you want to edit the default filename you should edit the following line:

header("Content-Disposition: attachment;Filename=Editor.doc");

This like tells the browser that the file is a attachment and that it should be downloaded. It also tells the browser that
the name of the file should be Editor and the extension should be .doc. The only thing you need to do to edit the file name is change Editor.doc to another name like for example Text.doc.

Content

The content of the file is decided in the following code.

echo "<html>";

echo "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Windows-1252\">";

echo "<body>";

echo $_REQUEST['editortext'];

echo "</body>";

echo "</html>";

This code tells the browser that it should request the text that was typed inside the editortext text area. Let's say you need your Word file to always have 2 sentinces with your company's name and number at the bottom of the content the user types. To do this you would need to edit the PHP file so it would add those things. Your code would like something like this.

echo "<html>";

echo "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Windows-1252\">";

echo "<body>";

echo $_REQUEST['editortext'];

echo "<strong>Company Name</strong>";

echo "<strong>Phone Number:</strong>2376729283";

echo "</body>";

echo "</html>";

Modify PDF

Details

The HTML PDF converter code uses the PDF.php file as action. This file is located inside the PDF map and includes the following codes.

$pdf->SetCreator(PDF_CREATOR);

$pdf->SetAuthor($_REQUEST['author']);

$pdf->SetTitle($_REQUEST['title']);

$pdf->SetSubject($_REQUEST['subject']);

$pdf->SetKeywords($_REQUEST['keywords']);

Those code lines tells the browser where to get the PDF details. As you can see it requests some of the HTML forms to set those details. You could edit this so for example the people who see the file will always know that the PDF file was generated on your site. To do this you would have to replace $_REQUEST['author'] by for example "http://www.example.com".

Content

$html = $_REQUEST['pdftext'];

This code is used to request the content of the PDF. The code tells the browser to use the text from the pdftext field from your HTML file as content for the PDF. You could change this to your own content by replacing $_REQUEST['pdftext'] by for example "exampletext".

Language

require_once('PDF/config/lang/eng.php');

This code tells the browser that the language used is English. You can change this to any language you want by going to the languages folder in PDF/config/lang and changing the code to any file in that folder.

Layout

To edit things like margin and the layout of your file you would need to edit the tcpdf_config.php. This file is located in the /PDF/config/ map and can be edited to your needs. By default it will request form inputs that are specified by the user. This can obviously be changed by replaceing any $_REQUEST['example'] value by a "example" value.

Support

If you have any problems or questions after reading this documentation then you can contact me trough my Envato contact page.