Editing html, css and JavaScript files stored on a local computer, either to provide a private web site, or prior to uploading the files to an on-line host.
All the wysiwyg html editors I have looked at are extremely poor at rendering web sites, and pretty poor at creating and editing html (never mind css and JavaScript). The much better, open-source html (etc.) editor “NetBeans” on the other hand, has no ability to render html. Each time a NetBeans edit needs to be checked, it is therefore necessary to go out of NetBeans and refresh the edited page in a conventional browser, before going back into NetBeans.
The system below automates this process, thus giving the flexibility of direct coding, while still preserving the ease of use, and the rapid feedback given by a wysiwyg editor. There are two parts to the solution. The first opens the page currently being displayed by Firefox in NetBeans; the second refreshes the page being displayed by Firefox from NetBeans.
· Windows (Tested on 32 bit XP SP3, and 64 bit Windows 7).
· html (and other) files on either the local computer or accessible by Windows file sharing.
· NetBeans (Tested on PHP version 7.2, both with and without the XAMPP apache server)
· Firefox (Tested on version 15.0.1)
Note that web pages containing the official Twitter Widget, kill “Auto Update” (although any Twitter Widgets can be moved to a new web page, which can then be embedded in the original page within an iframe)
Install the open-source html editor – NetBeans, E.g. by going to www.netbeans.org, Click on [Download FREE], and then on the [Download] button at the bottom of the PHP column. Click [Save] and select the “Download” directory (or [Save File]). Double click the downloaded file “netbeans-...-php-windows.exe”, and click [OK]. The Publisher: should be “Oracle America. Inc”. If so click [Run] (or [Yes]), and follow the instructions. My version defaulted to install into …
C:\Program Files\NetBeans 7.2\bin\netbeans.exe
… but if yours installs differently, then edit the batch file accordingly.
Copy the text in the box below to Notepad.
::PURPOSE
::For opening a file in NetBeans, as per
::http://jim.axiomatic.biz/edit-web/netbeans-firefox.html
::EDIT
::netbeans installation directory contains version, so
set NetBeansDir=NetBeans 7.2
::REQUIREMENTS
::1)32 or 64 bit Windows + Netbeans
::2)Invoke this batch file with a local file:url as param
::3)url can contain spaces but not other special chars
::GET FILE
TO BE OPENED
::Fetch the url of the file to be opened in NetBeans
set Url=%1
::Remove the first 8 chars of the url prefix so that
::file:///<directory>:<path>/<file-name>, leaves
::
<directory>:<path>/<file-name>
::or
::file://///<remote computer>/<path>/<file-name>,
leaves
:: //<remote
computer>/<path>/<file-name>
set NoPrefix=%Url:~8%
::replace all %20 with spaces as per the reverse of
::www.dostips.com/forum/viewtopic.php?t=250
setlocal enabledelayedexpansion
set NoSpace=!NoPrefix:%%20= !
echo %NoSpace%
::replace all the url / characters, by DOS \ characters
set ToBeOpened=%NoSpace:/=\%
::FIND
NETBEANS 32 BIT PROGRAM DIRECTORY
::From http://social.msdn.microsoft.com/Forums
::/zh/winforms/thread/69dc2aac-9956-40a0-9826-da48b9003a8e
set ProgDir=%ProgramFiles(x86)%
if not "%ProgDir%"=="" GOTO ProgDirFound
set ProgDir=%ProgramFiles%
:ProgDirFound
::OPEN
THE FILE IN NETBEANS
"%ProgDir%\%NetBeansdIR%\bin\netbeans.exe" ^
--open "%ToBeOpened%" --console suppress --nosplash
Take care that no line breaks have been added by text wrapping, and ensure that no spaces are added to the end of any of the lines.
Create a directory “C:\NetBeans”, and save the Notepad file as …
“C:\NetBeans\NetBeans.bat”
Install the Firefox add-on “Open With”, E.g. by …
> Firefox > Tools > Add-ons > Get Add-ons. Then search for “Open With”.
If necessary, click “Available Add-ons” to see those available to install. Then select “Open With”, (or go to http://www.darktrojan.net/software/addons/openwith ), and click [Install], and then “Restart Now”.
When the Add-on is installed do…
> Firefox > Tools > Add-ons > Extensions > Open With > [Options] > [Add] . Then navigate to …
> C:\NetBeans, The batch file will not be visible, but enter file name…
NetBeans.bat
[Open]
Click the up arrow as required to position NetBeans.bat to the top of the list.
Ensure that view menu: is set to “Display as menu items”
Close the “Open With Options”, and “Add-ons Manager” tabs.
Install the Firefox add-on “Auto Reload”, E.g. by …
> Firefox > Tools > Add-ons > Get Add-ons, and search for “Auto Reload”.
If necessary click “Available Add-ons” to see add-ons available to install (or go to https://addons.mozilla.org/en-US/firefox/addon/auto-reload/?src=api ). Select “Auto Reload”, click [Install], and then “restart now”.
When the Add-on is installed, browse one of the html files on your computer that needs editing. Right click the Tool Bar, click “Customise...” and drag the “Auto Reload” icon on to one of your toolbars. Then set Auto Reload to monitor that file, by clicking the ...
Firefox > “AutoReload” icon
> [Create]
> [Add Files...]. Then navigate to the html file currently being viewed, select the file, and click …
> [Open]
> [OK]. Then speed the re-rendering of edited files by reducing the default 1 second delay by ….
> Min delay before reload: = 1000 -> 100 ms
> [OK]
Display a local html file in Firefox. Then …
> Firefox > View > Open with NetBeans.bat
A DOS window should then open, process the batch file, and open the local html file in NetBeans. (In case of problems, append “pause” to the end of the batch file, to preserve the DOS window).
Display both the NetBeans and Firefox windows. E.g. in each of them, close any unwanted panels and toolbars. Then as necessary, click “Restore down”, drag the title bar slightly to expose one edge, and drag the edge inwards to reduce the window to half size, thus enabling both windows to be seen at the same time.
Save the edited html file in NetBeans (E.g. by pressing Ctrl+S ). The web page should automatically refresh in Firefox.
Each web page can be associated with as many files as required, or even the contents of whole directories, so making changes to any of these files, automatically visible.
Other html editors are easier to include in the “Open With” list, including even MS Office Word 2007 upwards.
The above system does not provide the formatting buttons or graphical editing facilities that can be provided by a wysiwyg editor, but it does add an automatically updating display to NetBeans auto-complete and other coding aids. This is especially useful on dual monitor systems, or when the directories on which the local files reside are shared between two computers, one on which the files are edited, the other being used to display the result.
NetBeans start up parameters http://wiki.netbeans.org/FaqStartupParameters
NetBeans configuration file http://wiki.netbeans.org/FaqNetbeansConf
To associate file types with NetBeans in Windows http://wiki.netbeans.org/FaqCliOpen
There is an early discussion of file/url/uri conversion problems at http://netbeans.org/bugzilla/show_bug.cgi?id=36162
UNC paths appear to have been implemented in NetBeans 6.5 http://netbeans.org/bugzilla/show_bug.cgi?id=46813
One NetBeans user requested a menu option to open a file from a url http://netbeans.org/bugzilla/show_bug.cgi?id=123235
There are possible alternatives to AutoRefresh in XRefresh (but it did not work on my Windows XP, Firefox 15.01), live.js (which seems to require a special line of javascript to be inserted in the page), or the new XP version of LiveReload from the Mac App Store.
The Firefox add-on “Auto Refresh”, solves the Twitter problem by adding a context menu which allows you to specify a refresh interval. If using Opera, just right click, select “Reload Every”, and set a custom refresh interval – suggested by Benno Markiewicz at http://netbeans.org/projects/www/lists/nbusers/archive/2012-09/message/172
There is a possible alternative editor/browser system in http://plugins.netbeans.org/plugin/38508/embedded-browser, http://wiki.netbeans.org/EmbeddedBrowserPlan68 but it seemed to have multiple problems in NetBeans 6.2 Windows XP
There is a possible alternative in the NetBeans Chrome extension discussed at http://netbeans.org/bugzilla/show_bug.cgi?id=215635 (but I could not find the files).
I also found reference to an openfile utility, but I could not find the add-on at http://utilities.netbeans.org/
Some people have suggested that, with its emphasis on testing, Firebug provides a better development environment. The missing “Save Changes” button is then provided by Backfire, or Chris Pederick’s Web Developer toolbar to save the result.
See how this html document was created using Word 2007 - Web page, Filtered, or go home to http://jim.axiomatic.biz