Problem
GtkHTML has a surprisingly rich set of formatting commands that allow you to build an HTML editor as shown below:
Solution
- We execute the built-in GtkHTML command with $gtkhtml->command($command_name)?>
- The command names are as listed in the code below. For each
$toolbar_definition
e.g.'Bold' => 'bold-toggle'
, the key ('Bold') is the toolbar label. The corresponding value is the name of the command ('bold-toggle').
Important Note:
- This only works for PHP-GTK2 compliled with the additional library GtkHTML.
- For linux, you have to recompile php-gtk2 to include this library.
- For windows, you may refer to the article How to install PHP-GTK2 on windows. The latest beta release from official php-gtk2 website comes complete with GtkHTML.
- In the
php.ini
, don't forget to addphp-gtk.extensions = php_gtk_html2.dll
to turn on GtkHTML. - Lastly, the most "tricky" part in running GtkHTML is that to run this script, you have to use gconfd-2 | php script.php. If you have installed the beta release of PHP-GTK2 on windows as outlined in this article, you will find the program gconfd-2.exe in the root directory of php-gtk.
- In the event that you cannot get this sample code to work, I would suggest that you try to do a fresh install of the beta-release of PHP-GTK2 (details here). It should work out-of-the-box (just need to add
php-gtk.extensions = php_gtk_html2.dll
in php.ini as explained above). Note that you can still keep your original copy of php-gtk2 while having this new version. - You will most likely see the warning
(php.exe:5348): Gdk-WARNING **: gdkselection-win32.c:1068: OpenClipboard failed: Invalid window handle.
. Not really sure how to fix this yet. The script seems to run ok, though.
Sample Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 53 54 55 56 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | <?php $window = new GtkWindow(); $window->set_title($argv[0]); $window->set_size_request(480, 600); $window->connect_simple('destroy', array('Gtk','main_quit')); $window->add($vbox = new GtkVBox()); // define toolbar definition $toolbar_definition = array( 'Copy' => 'copy', 'Cut' => 'cut', 'Paste' => 'paste', ); setup_toolbar($vbox, $toolbar_definition); // note 1 $toolbar_definition = array( 'Bold' => 'bold-toggle', 'Italic' => 'italic-toggle', 'Underline' => 'underline-toggle', 'Strikethrough' => 'strikeout-toggle', ); setup_toolbar($vbox, $toolbar_definition); // note 1 $toolbar_definition = array( 'JUSTIFY_LEFT' => 'align-left', 'JUSTIFY_CENTER' => 'align-center', 'JUSTIFY_RIGHT' => 'align-right', ); setup_toolbar($vbox, $toolbar_definition); // note 1 $toolbar_definition = array( 'INDENT' => 'indent-more', 'UNINDENT' => 'indent-less', 'Indent Zero' => 'indent-zero', ); setup_toolbar($vbox, $toolbar_definition); // note 1 $toolbar_definition = array( 'Zoom_In' => 'zoom-in', 'Zoom_Out' => 'zoom-out', 'Zoom_100' => 'zoom-reset', ); setup_toolbar($vbox, $toolbar_definition); // note 1 $gtkhtml = new GtkHTML(); $vbox->pack_start($gtkhtml); $html_text = "<h1>HTML Editor</h1> <p>Type something in this editor and format using the toolbar buttons above.</p> <p>You can also use the following shortcut keys:</p> <table border=4> <tr><th>Ctrl-B</th><td><b>bold</b></td></tr> <tr><th>Ctrl-I</th><td><i>italic</i></td></tr> <tr><th>Ctrl-U</th><td><u>underline</u></td></tr> <tr><th>Ctrl-C</th><td>copy</td></tr> <tr><th>Ctrl-X</th><td>cut</td></tr> <tr><th>Ctrl-V</th><td>paste</td></tr> </table> "; $gtkhtml->load_from_string($html_text); $gtkhtml->set_editable(true); // note 2 $window->show_all(); Gtk::main(); // setup toolbar function setup_toolbar($container, $toolbar_definition) { $toolbar = new GtkToolBar(); foreach($toolbar_definition as $item=>$command) { if ($item=='<hr>' || $command=='<hr>') { $toolbar->insert(new GtkSeparatorToolItem(), -1); } else { $stock_image_name = 'Gtk::STOCK_'.strtoupper($item); if (defined($stock_image_name)) { $toolbar_item = GtkToolButton::new_from_stock( constant($stock_image_name)); $toolbar->insert($toolbar_item, -1); $toolbar_item->connect('clicked', 'on_toolbar_button', $item, $command); } else { $toolbar_item = new GtkToolButton(new GtkButton(''), $item); $toolbar->insert($toolbar_item, -1); $toolbar_item->connect('clicked', 'on_toolbar_button', $item, $command); } } } $container->pack_start($toolbar, 0); } // process toolbar function on_toolbar_button($button, $item, $command) { echo "toolbar clicked: $item ($command)\n"; global $gtkhtml; $gtkhtml->command($command); } ?> |
Output
As shown above.Explanation
The above code is extended from the code in How to display html text using gtkhtml?
We also make use of the code from How to set up toolbar? to display the toolbar.
What's new here:
- Setup toolbar.
- Enable edit mode.
Note
Understand this one first. We will list more formatting commands in the next article.
Read more...