Rarely have I ever had a need to edit HTML in Flex Builder. Other editors (Dreamweaver, for instance) were always available or I managed to get by with Flex Builder’s built-in plain text editor. Lately, however I’ve been working with HTML and Flex together more often and I decided to hunker down and get an HTML-editor plug-in installed in Flex Builder.

A quick solution was installing the PHP Development Toolkit plug-in (PDT) which could handle not only PHP code hinting and editing (if you needed that sort of thing), but also handled HTML as well.

Here were the steps I had to run through to get the PDT plug-in working in Flex Builder 3. First, we’ll need to install some pre-requisite frameworks and tools (like GEF, EMF and WST):

• First, from within Flex Builder, click

        Help –> Software Updates –> Find and Install –>
        Search for new features to install

• Check Europa Discovery Site and click Finish

• Expand Europa Discovery Site results

• Uncheck “Show the latest version of a feature only”

• Find these groups and check the version listed:

        Graphical Editors and Frameworks
          • Graphical Editing Framework 3.3.2

        Java Development
          • Eclipse Java Development Tools 3.3.2

        Models and Model Development
          • Eclipse Modeling Framework (EMF) Runtime + End-User Tools 2.3.2
          • XML Schema Infoset Model (XSD) Extender SDK 2.3.2

        Web and JEE Development
          • Web Standard Tools (WST) Project 2.0.2

• Click Next

• Click the I accept the terms in the license agreement radio button

• Click Finish

Now that that’s done, we’ll get on to the PDT installation:

• From within Flex Builder again, click

        Help –> Software Updates –> Find and Install–>
        Search for new features to install

• Click New Remote Site, and type in “PDT” for the name and http://download.eclipse.org/tools/pdt/updates/ for the URL

• Click Finish

• Uncheck “Show the latest version of a feature only”

• Expand PDT

• Check PDT SDK 1.0.3 and click Finish

• Restart the Flex Builder workbench

• Once Flex Builder has restarted, click Window in the upper toolbar, then click

        Preferences –> General –> Editors –> File Associations

• Select “.html” and “.htm” and for each extension highlight “HTML Editor” and click Default. .
• Once you’re all done click OK.

That’s it!