Thursday, July 26, 2012

How to add an HTML Editor for Eclipse

I started using Eclipse to work with PhoneGap(Cordova). However, editing HTML files in Eclipse was not nice - it felt similar to using Windows notepad.  I found the following information on stackoverflow about adding a HTML editor: http://stackoverflow.com/questions/54868/what-is-the-best-html-editor-for-eclipse 

This post details the instructions for adding Web Page Editor to your installation of Eclipse (if it wasn't installed with your version initially). It is really simple, but I've detailed it out anyway.

I'm using Eclipse Juno (SDK Version 4.2.0). It's probably a similar process in other versions. 

1. Go to Help --> Install New Software...



 2. Select the Juno repository (http://download.eclipse.org/releases/juno/) from the 'Work with:' menu:


3. In the search box, enter 'web' to filter the results, and select 'Web Page Editor':


4. Click Next:



5. Accept the terms and click Finish:



6. Wait for the install to run:



7. You might see this - just click OK:



8. Click Yes when ready:



Now that you have finished installing this, and restarted, you might notice that none of the text in your existing html files has changed colour in the editor as you might expect. I wasn't sure how to adjust this, so thanks to balla85 for figuring this out for me. All you need to do is go to the Window --> Preferences menu as shown:


Then for both *.htm and *.html, click on the 'HTML Editor' in the window below and click the 'Default' and 'OK' to apply. The result should be similar to below:



Anyway that was pretty easy wasn't it? Now get working!

28 comments:

  1. This was really helpful, thanks!

    ReplyDelete
  2. "Now that you have finished installing this, and restarted, you might notice that none of the text in your existing html files has changed colour in the editor as you might expect."

    Simply go to Window > Preferences > General > Editors > File associations.
    Set "HTML Editor" as default associated editor for *.htm and *.html.

    At confirm it doesn't work automatically, but you just need to right-click on any html page of your project, Open With > HTML Editor. At this point at double click on any other html file, it will be opened with the HTML editor. (Worked for me, Eclipse Juno)

    ReplyDelete
    Replies
    1. Thank you for that! I have updated the blog to show how it's done according to your instructions. :)

      Delete
  3. Thank you for taking the time to post this.

    ReplyDelete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
  5. keep up the good works..
    hoping to see more useful posts by you
    thanks

    ReplyDelete
  6. man... that file associations thing had me baffled. Thanks for posting this guide or I don't think I would ever have figured it out.

    ReplyDelete
  7. This comment has been removed by a blog administrator.

    ReplyDelete
  8. Thanks you ! The screenshots helped a lot.

    ReplyDelete
  9. This was really helpful, thanks!

    ReplyDelete
  10. This was really helpful. Thanks a lot for taking out the time and posting this !! I appreciate it.

    ReplyDelete
  11. Delta Decisions Inc. is a premiere web development firm specializing in e-commerce and business websites. We offer services including website design, web hosting, SEO servives, pay-per-click, google adwords, website branding and much more.
    website hosting Toronto

    ReplyDelete
  12. Hi,

    This post is written in a very good and entails a lot of useful information for me. I am glad to find a good way of writing the post.

    website development company in New York

    ReplyDelete
  13. Thanks for the wonderful information .text to HTML converter
    Keep sharing

    ReplyDelete
  14. Your post is providing some really good information. I liked its essence and enjoyed reading it. Keep sharing such important posts about this blog and its much more helpful for us . ที่ปรึกษาแบรนด์

    ReplyDelete