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!

56 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. మీ పోస్ట్ నాకు చాలా ముఖ్యం. ధన్యవాదాలు మరియు మీరు ఆనందం అనుకుంటున్నారా.

    Lều xông hơi khô

    Túi xông hơi cá nhân

    Lều xông hơi hồng ngoại

    Mua lều xông hơi

    ReplyDelete
  22. Có lẽ cần phải trải qua tuổi thanh xuân( Phương pháp học toán tư duy ) mới có thể hiểu được tuổi xuân là khoảng thời gian ta( dạy trẻ học toán tư duy ) sống ích kỷ biết chừng nào. Có lúc nghĩ, sở dĩ tình yêu cần phải đi một vòng tròn lớn như vậy, phải trả một cái giá quá đắt như thế,( Học toán tư duy có tốt không ) là bởi vì nó đến không đúng thời điểm. Khi có được( Toán mầm non ) tình yêu, chúng ta thiếu đi trí tuệ. Đợi đến khi( Bé học đếm số ) có đủ trí tuệ, chúng ta đã không còn sức lực để yêu một tình yêu thuần khiết nữa.

    ReplyDelete
  23. Ngày nay, bàn học không chỉ có chức năng để học nữa mà còn như một vật trang trí trong phòng của các bé. Khác hẳn với bé gái, bàn học dành cho bé trai mang vẻ năng động và tinh nghịch. Vì vậy, hãy tham khảo những mẫu bàn học dành cho bé trai dưới đây để tìm ra mẫu phù hợp cho con mình nhé!

    ReplyDelete