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!

35 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. Thank you for the nice screenshot

    ReplyDelete
  10. This was really helpful, thanks!

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

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

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

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

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

    ReplyDelete
  16. In 2018+ checkout the CodeMix plugin for Eclipse. It provides the most powerful HTML editor for Eclipse as well great tools for JS, CSS, TS, Angular/Ionic, & React. CodeMix does it by providing all the smart editing and debug features of Visual Studio Code directly within Eclipse. https://www.genuitec.com/sox/tech/html5-with-codemix/

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

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

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

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

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

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

    ReplyDelete