FPDF jQuery WYSIWYG Script Editor
Back

Help / Documentation How to use editor | How to use FPDF editor jQuery plugin

This editor helps you to create a PHP script to create an FPDF. Without any experimentations. Create your PDF, copy the code and paste it into your PHP file. Voila, ready!

How to use the editor

Info: Due to the PDF paper size this should be opened with a desktop PC. This editor is not suitable for cell phones or tablets.

The handling is very easy. Simply click on the desired FPDF element in the menu to add it.
Then drag and drop to the desired position and right-click on the element to open the context menu with the setting options.

1. Step: Click in the menu on the desired element which you want to insert

2. Step: After the element is added to the editor you can move it by drag and drop. Just move it to the position where you want to place it.

3. Step: Right-click (will open the context menu) on the element to change the current settings.

With the context menu you get all responding settings for the selected element. More information can be found on http://www.fpdf.org

Change value: To change a the value on an element (Cell, Multicell, Link, Text, Write, Image) right-click and select 'Change value', enter the new value and click 'Set'.
Delete Element: You can delete an element on 2 ways:
  • Right-click on the element and then click "Delete" in the context menu
  • Drag and drop the element out of the editor
Change colors: There are 3 invisible elements:
  • SetDrawColor: defines the color used for all drawing operations (lines, rectangles and cell borders)
  • SetTextColor: defines the color used for text.
  • SetFillColor: defines the color used for all filling operations (filled rectangles, multicell and cell backgrounds).
With a right-click on these elements you can set grey scale (0-255) or a color value (RGB 0-255).
If you set one of these elements to the editor will affect all elements below. It means if you set e.g. SetTextColor to red (255, 0 0) all elements below this invisible element will have a red text color until you set a new SetTextColor. (the same with SetDrawColor and SetFillColor).
Invisible elements
Change width: To change the width (except invisble elements) of an element right-click and select 'Change width', enter the new value and click 'Set'.
Change height: To change the height (except invisble elements) of an element right-click and select 'Change height', enter the new value and click 'Set'.

Each element has different setting options

Setting options

Cell: Delete, Change value, Change width, Change height, Border, Font, Font size, Font style, Set fill, Text align
MultiCell: Delete, Change value, Change width, Change height, Border, Font, Font size, Font style, Set fill, Text align
Text: Delete, Change value, Change width, Change height, Font, Font size, Font style
Write: Delete, Change value, Change height, Font, Font size, Font style
Rect: Delete, Change width, Change height, Style
Link: Delete, Change link, Change width, Change height, Font, Font size, Font style
Line: Delete, Change width, Change height
Image: Delete, Change file, Change width, Change height, Image type
Ln: Delete, Change height
SetDrawColor, SetTextColor, SetFillColor: Delete, Grey scale, Color value

You can add PHP script and variables too. Just use the format '{:$php_var:}' as new value

Hello World

Will generate following output:

...
$pdf->Cell(0, 5, 'Hello '.$world, 0, 1, 'L', false);
...

All elements have all the settings that are specified by FPDF. Further help can be found on http://www.fpdf.org