PHP WYSIWYG (What You See is What You Get) tools in NuSphere PhpED provide an intuitive and productive environment for building PHP applications. Visual rendering of a Web Page in a browser is straightforward when using static HTML, however the rendering of PHP code presents unique challenges for designers of PHP application because the HTML tags are typically dynamically generated. PhpED simplifies many aspects of PHP coding by providing visual tools for HTML editing, a PHP WYSIWYG Editor (by providing numerous wizards), and through support of PHP Smarty, the popular template engine for PHP.
|
|
|
PHP WYSIWYG widgets in PhpED
PhpED WYSIWYG wizards include various PHP code generators that can be implemented in PHP and HTML tags based on the parameters entered in the widget. For example, PHP MySQL code can be generated using PhpED Database Wizard. PhpED wizards and WYSIWYG widgets include:
- NuSoap Client wizard - PHP Webservices Wizard
- DB Wizard - PHP Database connection code generation wizard
- DB client - Database Connection client
- HTML forms, HTML tags and other elements widgets available on HTML tool bars
- And of course powerful PHP Viewer features
In this tutorial, we will explore how the PhpED HTML toolbar implements PHP WYSIWYG.
How to setup HTML tags and elements using WYSIWYG controls in PhpED
HTML and PHP WYSIWYG interfaces in PhpED include three group of controllers:
- HTML Document Elements Toolbar: Provides an interface for the creation of HTML Forms, Input Texts, Radio groups etc.
- HTML Tags Toolbar: Provides an interface to create and insert HTML, Body, Table, Image and Anchor tags
- HTML Color Controller: Provides a WYSIWYG interface to insert HTML color
These user interfaces provided by all of HTML and PHP WYSIWYG elements are intuitive and user friendly. In this tutorial we will take a look at some of the examples using PhpED WYSIWYG controls.
|
|
|
How to setup HTML tags using PHP and HTML WYSIWYG controls in PhpED
Setting up an HTML header tag using PhpED HTML Tags Toolbar is as simple as a few mouse clicks - to setup HTML tags you can:
- Select HTML tag button on the HTML Tags Toolbar to launch an HTML tag dialog, as shown on the illustration below
|
|
|
- Enter the document's Title, author and other attributes of the HTML document and hit OK.
- PhpED automatically brings up the Body tag dialog, where you can use the WYSIWIG color controllers to select colors for the active, non-active and visited links, text, and select a background image. You can always launch a Body tag dialog by selecting the Body tag button on HTML tags toolbar.
|
|
|
- When you select OK in the dialog box, the required HTML code is automatically inserted by the PHP Editor. The PhpED HTML and PHP Syntax color highlighting and dynamic highlighting simlifies working on HTML and PHP code in the same file.
|
|
|
How to setup HTML Document Elements using PHP and HTML WYSIWYG User Interface in PhpED
Similar to HTML tags, HTML Document Elements can be easily inserted in your PHP or HTML files with the help of HTML Document Elements Toolbar, providing a WYSIWYG User Interface for the creation of HTML forms, select, list boxes, input fields, text areas, etc. For example to create an HTML Select element you can:
- Select HTML Select button on the toolbar
- Enter Name, ID, size and other attributed of the Select element
- Enter the list of Options on the Options tab
- Specify the handlers of the events available on the Select button using Events tab and hit OK to close the dialog box.
|
|
|
- You can view the resulting layout using PhpED's embedded PHP Viewer or any external browser.
|
|
|
How to insert HTML, CSS or any other element's Color attribute using PhpED WYSIWYG Color controller
The PHP and HTML WYSIWYG color controller can be used whenever you need to generate a color's hexadecimal code. For example, if you select a slightly off-white color on the WYSIWYG controller, PhpED will automatically insert #F0F0F0 right next to the position of the cursor in the text.
|
|
|
In this tutorial you learned about the PHP WYSIWYG tools and controls available in PhpEd, and the simple and convenient ways to generate HTML and PHP code using them. Get additional information about PHP WYSIWYG on NuSphere Forum, or try it out yourself an Download a free trial of our PHP IDE today!
|