Programming Tools: HTML WYSIWYG Editors

NVu, an HTML editor now in beta release, has the potential to be the next great WYSIWYG HTML editor.

Editor's Note: This article has been updated since its original publication.

I have a dirty little secret. When I started to build my first Web site a few years back, I used Microsoft's FrontPage. The main reason I chose to use FrontPage was its WYSIWYG facility. It made creating tables, changing the look of the text, renaming HTML pages and many other tasks a snap. For the professionals among you, this may be heresy, but after cleaning up the generated code, I had a useful site. For a number of years, I have been looking for equivalent Linux products. The wait may be almost over.

Although nothing yet approaches FrontPage's ease-of-use, we now have a number of products that are truly WYSIWYG editors. They may grow into something much more.

NVu

From the set of Linux HTML editors now available, the most advanced seems to be NVu (New View). NVu offers users the ability to:

  • Import complete sites.

  • Publish the current set of Web pages to the Web.

  • Export pages as ASCII text.

  • Spell check pages.

  • View pages in normal, tagged HTML, full HTML and preview modes.

  • Set a wide variety of encodings, including None, Unicode (UTF-8) and Western (ISO-8859-1).

  • Create tables easily.

  • Create forms easily.

  • Insert special symbols visually, quickly.

  • Insert a table of contents based on text styles.

  • Insert custom PHP code or comments.

  • Write in a left-to-right or right-to-left direction, for those using Hebrew or Arabic.

In addition, NVu offers a number of tools, including a powerful built-in style sheet editor called CaScadeS. It operates in one of two modes, beginner and expert. NVu also has a markup cleaner and validator, extensions and themes facilities and Web development tools, such as a Javascript console, DOM inspector and Component Viewer. Figure 1 shows a NVu snapshot of a typical Web site in normal view.

Figure 1. Snapshot of a Typical Web Site in Normal View

Figure 2. Same Snapshot, in HTML Tag Mode

Figure 3. Same Snapshot Portion, in HTML Source Mode

In Figure 4, I used the CSS editor to display part of the style sheet for the www.python.org site.

Figure 4. CSS Editor at Work

Figure 5. A Simple Table to Show Smileys with Labels

Figure 6 shows the clean HTML that NVu produces for the simple table example depicted in Figure 5.

Figure 6. Simple Table Example in NVu

There is a caveat to the code in Figure 6, however. By default, NVu generates files with an xhtml extension. The extension tells browsers to use strict HTML scanning rules when processing the file. Under these rules, the clause http-equiv="content-type" in line 5 causes an error in some browsers, particularly Firefox. There are two workarounds. Option one is to delete the offending clause. Option two is to rename the file so it has an .html non-strict extension. That is, a.xhtml becomes a.html .

In trying to resolve this extension problem, I used the excellent open-source Web editor, Quanta Plus. It gave me a second opinion. Although it is not a WYSIWYG editor in the same sense as NVu is, Quanta Plus has many useful features and is worth keeping handy.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

The best html editor I know about

Andrew Castenon's picture

Do not struggle! Use the best editor I have used. This is the one. Make it a trial.

http://www.dreamweaver-html-editor.com/

Want to use a real html editor, a html visual and wysiwyg coder right now?

You can Create Valuable Content for your site & do not care about the html code… ever!
Focus your energy and Creative Juices by Adding Value to your site

Want to see how I passed from building only 4 pages to Create more than 20 pages per week of Valuable Content in my site, by working the same hours?

And how I really started enjoying the creative process?

The most time consuming task when I build a new Key Focused Content Page (KFCP) is to find the correct html tags combination to use.

I just have the right wording and ideas to put. I know my topic and am the expert in the field. Also I did a thoughtful research of the topic.

Amaya

Anonymous's picture

For some simple jobs such as editing easy tables, the web browser Amaya works ok. I edit pages that have .php extensions but are really in the main html tables. Nvu won't edit files with a .php extension, otherwise I would undoubtedly use it. Of course, Dreamweaver has no problem with such things. (Maybe I will just use wine to run Dreamweaver!) In the meantime, Amaya is adequate for most of my purposes. (Unfortunately, it has dependency problems in the 64-k version of Suse 10.1, so I recently had to cheat to get it working.)

I'm using the 0.9 version,

Anonymous's picture

I'm using the 0.9 version, and it's pretty nice. But 30megs? Sheesh. My window manager isn't that big...

wysiwyg editors are to webpag

Anonymous's picture

wysiwyg editors are to webpages as vb is to REAL programming.

So right man! When I code

Anonymous's picture

So right man! When I code anything I do it in BINARY because that's the LEETEST! !!1!!oneoneoneone!!1!11!!!!!

Tiny MCE is the best online W

Anonymous's picture

Tiny MCE is the best online WYSIWYG.
Its not really an IDE but more of a web tool that you can use for your site. I actually host it on one of my pages and just use it to gen the html code that i'm too lazy to write my self (VIM).

Give it a try.

http://tinymce.moxiecode.com/

Another Tool for the Linux Web Developer

brockers's picture

I generally don't use WYSIWYG editors for making web pages but when I do NVu has been very handy. Overall I like the functionality, CSS editing, and project management tools of Quanta+ much better; but its nice to have another tool I can use. As far as bluefish is concerned, I find that there is nothing in bluefish that is not functionally better when compared to Quanta... the same cannot be said of NVu.

Bobby

Bluefish Rules

hmart's picture

Try Bluefish, a text editor packed with a lot of features and snippets.

Who needs a WYSIWYG tool?

Depends on what you are doing...

Scott M. Stolz's picture

Who needs a WYSIWYG tool?

It depends on what you are doing.

If I am wanting to whip out a very simple 5 page site with no database use and no (or very minimal) php/asp or other scripting, then a WYSIWYG is the preferred way of making the web pages. A heck of a lot faster than hand-coding it!!!

On the other hand, anything that uses php/asp or another scripting language and uses a database, then WYSIWYG is pretty useless. Sometimes I simply code in a text editor if I have too, because a WYSIWYG Editor usually just messes things up for those kinds of sites.

I say, use the proper tools for the job. WYSIWYG is better for making certain kinds of sites. On other kinds of sites, the WYSIWYG gets in the way and some other software is better.

Instead of arguing which one is better, realize that it really depends on what you are doing. That's why I use both kinds of editors. Whatever is best for that particular job.

WYWIWYG is necessary!

Anonymous's picture

WYWIWYG editors are very useful! it's not dispensable!
It accelerates the development of robust visual web applications without woring about coding HTML tags.
Who say that WYWIWYG editors even for php/asp applications are totaly dispensable, don't know the importance of building precise and sofisticated web interfaces.

Someone who can spell.

Anonymous's picture

Someone who can spell.

Someone who can spell.

Anonymous's picture

Someone who can spell.

welling

intuited's picture

i guess people who use "what you wee is what you get" editors are excluded from that? what about those using "what you site is what you get" editors?

Bluefish is a great editor. I

Bubba Bluefish's picture

Bluefish is a great editor. I've used since circa version 0.2 It's how I learned (x)html and css. It's still my favorite editor. I guess not everyone wants to learn html though and for them NVU is a good choice.

Re: Bluefish Rules

Anonymous's picture

Try Bluefish, a text editor packed with a lot of features and snippets.

If a text editor is your thing, yes, Bluefish is great.

Who needs a WYSIWYG tool?

People who prefer one. People who need a quick and dirty solution and don't care to hack HTML. People migrating from Windows WYSIWYG tools like Frontpage. Hobbyists or families who are not necessarily programmers but would like to produce a good looking web site. Amateur web designers who learn HTML by using the WYSIWYG editor to design a page, then view the HTML code it generates. "Top-down" designers (as opposed to "bottom-up" designers). Poor typists. And others.

And me... I also prefer WYSIW

Anonymous's picture

And me... I also prefer WYSIWYG editors, though I have a vast experience in HTML. I am convinced WYSIWYG speeds up the development very much.

WYSIWYG: Why I Need It / Help!

Robert H. Williams's picture

Hello! I'm a working father of 2 bright boys (12 / 8 yrs.) and believe me, I *do not* have the time to learn HTML, Perl, Python,etc.,etc. but do not think I should have to sacrifice having a web site if I wish. I type between 50-60 wpm depending on frequency of typing, but still really don't want to type html, etc. even though I find no problem w/C, C++ etc. So i really need something like NVU.
What I need assistance with is locating the objects that give NVU or any WYSIWYG editor its essence. I expect to click-and-drag buttons, bars, or other elements (objects) into place and thus build my site.
Any assistance greatly appreciated. Linux Journal subsccriber and registered linux user building/networking systems since 1982 in US Army; still: don't want to learn/spend time on html!!
Have A Healthy, Prosperous Day!
--robert

re: who needs a WYSIWYG 8-)

Mike Dantes's picture

Who needs a WYSIWYG tool?

Well I would say about 99% of the webmasters 8-)))))

Out of my view, it is not a question of "hey look - I can do some HTML-Coding - I am the master of the universe" ... it is more a question of speed.

In the company I have to be quick (as Iron Maiden says: "Be quick - or be Dead") ... and in WYSIWYG I am much more quicker, than doing it the hard way.

I prefer VIM, but WYSIWYGs ARE handy.

Waverly's picture

Why are they handy? Top down design like mentioned above. I'm creating "mockup" pages to show to my fellow teammates so that we can go over the design of how the site is going to look before I spend all that time coding away only to have to scrap it and start over because something didn't work out in the design.

Once that's finished, I can start from scratch, only copying in table structures and such that I've created in the wysiwyg.

That being said, I'm not too fond of NVU at this moment in time. I'm using the 1.0 release right now, and I can say that it definately doesn't act like it says it should. Try editing a specific style in a group of table cells that you've selected. It doesn't work. Copying and pasting table rows or columns doesn't work as expected (IMHO it should work identical to the way Excel does), and I still have to revert back to my text editor to make most of the intricate changes. I think it's a great attempt at an open source project, but there are still way too many problems with it at this time. Then again, I found Dreamweaver to be lacking as well in some of these same aspects.

Perhaps NVU's biggest downfall was that someone created it to be a replacement for Dreamweaver...

About Your HTML Editor

Jie's picture

Is your editor capable of viewing in HTML and preview/normal mode at the same time?

Has a great future

Fred.cpp's picture

The program Is really great. Maybe still needs some work in lots of areas, but works, and works great. I found It much better than Quanta, and easier to use. Maybe that's because I had to run *the other software* to fast editing, and I'm lazy, but I liked It a lot; now Is my Default html editor (in both linux and Windows).

Clean code, hmmm...

Ingemar's picture

I've tried NVu a little and find it pretty useful and it can definitely become a competitor to FrontPage after the beta phase.
When it comes to clean code (as you say in Figure 6) I can agree that the code is clean if we're talking about its structure. But the tables are far from clean IMO. Every single cell is polluted with style attributes. And the thing that disappointed me most (which isn't seen in the examples here) is that NVu has copied the most annoying part of FrontPage when it comes to resizing tables.
As soon as you resize a table with the mouse every single cell becomes width attributes. Why o why? It's enough to place these attributes on the cells in the first row only. With this behaviour the files becomes much larger than needed, but the worst is that it's so hard to modify the HTML code by hand if you don't like what the table became after its resizing.

nvu

a_hippie's picture

Good article. I'll keep a lookout for it in the future. It doesn't appear to be in the debian archives yet. . .

One thing I didn't see mentioned was the ability to drop in pictures/graphics like one can with that *other software* application. These little features really help html newbies like myself.

Keep up the good work.

--
Wishing you well.

nvu

a_hippie's picture

Good article. I'll keep a lookout for it in the future. It doesn't appear to be in the debian archives yet. . .

One thing I didn't see mentioned was the ability to drop in pictures/graphics like one can with that *other software* application. These little features really help html newbies like myself.

Keep up the good work.

--
Wishing you well.

I actually like the latest ve

Anonymous's picture

I actually like the latest version of Quanta Plus. I can actually use the WYSIWYG features along with PHP code.

Thanks Linspire!

Hans's picture

It should be mentioned that Nvu has been largely sponsored by Linspire, who seems to be doing a lot for the desktop Linux application software space with projects like Nvu, Lsongs, Lphoto, PhoneGAIM, etc. Linspire also has kept all these projects 100% open source.

http://linspire.com/opensource

Keep up the great work!

Hans

Not bad, not great

Morten Juhl Johansen's picture

I think NVU is okay. I used for a bit of basic editing, and it is a valid extension of the Mozilla HTML editor. I haven't seen other Linux solutions that offer WYSIWYG capabilities like this, so in that sense, it is nice. It is slow when you switch between viewing types, though. I like Bluefish, though - and if I am only to edit code manually, I prefer GEdit.

not the greatest

King P's picture

I will say that Nvu is the best open source HTML WYSIWYG editor for Linux, but I have to say that Dreamweaver is much better overall. The only thing that bites is that Macromedia hasn't ported it to Linux yet. It doesn't even have to be Open Sourced, if they just ported it to Linux so that I don't have to use programs like WINE to run it (I never liked WINE anyway).

But for what it does, Nvu is pretty good but by no means is it the "best" or "greatest", but it certainly is better that Quanta Plus.

I have used Dreamweaver in th

anonymous's picture

I have used Dreamweaver in the past and it is very good. However, I usually review Open Source solutions, so I did not mention it here. Also, it has had years to mature. I am wondering what a product like NVu will be like with 5+ years of development behind it.

Lastly, Dreamweaver is extremely powerful and complex. Ease-of-use was a criteria I had for a WYSIWYG HTML editor. I have used NVu to teach a 10-year old the basics of creating a web page and HTML.

Reg. Charney

agreed

King P's picture

Yeah, Nvu is very easy to use and I do use it as my default HTML editor now that I use Linux as my home desktop. Sorry I didn't state that earlier :)

Very Stable

Hem Ramachandran's picture

I find NVU as very stable.
Hem

Hellooo...this editor doesn't

Anonymous's picture

Hellooo...this editor doesn't have at least 1% of dreamweaver's features.
It sucks, really, the toolbars are so big and ugly, mozilla's MIDAS stinks too for page editing (it's good in small html embedded editor).

The source code editing component is a simple hack (where's autocompletion? or the error highlighter ?).

And it's version is 0.8 lol. I really wonder how 1.0 will look.

I really don't know why everybody is so "excited" about a piece of crap.
Sorry, I wish I could say some good things about this but I can't.

>>Hellooo...this editor doesn

Anonymous's picture

>>Hellooo...this editor doesn't have at least 1% of dreamweaver's features.

Thank goodness

Helllooooo

Dave's picture

("Hellooo...this editor doesn't have at least 1% of dreamweaver's features.")

Yeah on windows sure! But the Linux version of Dreamweaver is soooo much worse than Nvu and it.... oh wait a minute. You said there is no LxDreamweaver? And if there were it would cost $399.95?!!!? My bad.

I guess you should ask for yo

Anonymous's picture

I guess you should ask for your money back.

Hello, welcome to Linux. L

Anonymous's picture

Hello, welcome to Linux.

Looks like the first thing you'll need to do is review the difference between a "beta" release and a "stable" release. Generally, a beta release is unpolished and may have bugs, incomplete or not-yet-functional features, may not operate quite as expected, etc. The proper course of action, should you have a problem with a beta release, is to file a bug report or otherwise contact the developers to express your concerns - politely, if possible.

In other words, calling beta software a "piece of crap" simply because you don't like it, or because it doesn't (yet) meet your needs, or because it doesn't compare to your favorite longstanding Windows program:

a.) is unproductive;
b.) is immature;
c.) reveals your lack of experience with software development and how such things work in the open source world;
d.) lowers the overall level of conversation.

The reality is, there's not a lot of mature, really useful WYSIWYG HTML editors out there in the Linux world to choose from right now, so any such projects are welcome. As another poster stated, I also look forward to seeing how NVu will look with a few more years of development behind it. Much as the GIMP is now a full-blown Photoshop replacement, and OpenOffice.org replaces Microsoft Office on Linux desktops, perhaps Dreamweaver won't look so impressive in 3-5 years...

yeah ... but Nvu isn't a gem either

Brian McKendrick's picture

Well - I don't want to have match wits with the original poster in a pissing match over the feature set of a $300+ commercial application and a somewhat immature open-source package.

He is right-on in one respect, Nvu is a stinker. I took it for a spin this morning after seeing some of the write-ups lately - it wasn't pretty, pleasent, impressive etc ...

Some of the lowlites:
-bizarre treatment of scripting elements
-reliance on rigid parsing / validation of HTML before any of the WYSIWIG functionality is usable - your HTML better be damn near perfect
-editor would take valid in-line CSS in things like DIV's and TABLE elements and replace it with INVALID and ILLEGAL CSS without ever prompting me - my valid file on disk would then be overwritten with this bad HTML without my permission - I didn't click save - I clicked preview - no prompt, nothing! What a larf ...

Steer clear of this POS ... 10-year old copy of Homesite still looks pretty good ...

moderation

undefined's picture

where's comment moderation when i need it.

;)

that sucks, dont accept jsp p

Anonymous's picture

that sucks, dont accept jsp pages

OpenOffice

Yorik's picture

Actually OpenOffice has a built-in HTML WYSIWYG environment (like microsoft office) which I like, it is more stable than nvu, at the moment...

OpenOffice

Anonymous's picture

The problem is that it rewrites the code completely. So it may work for simple single pages, but not to edit parts of a real site without breaking the layout.

White Paper
Linux Management with Red Hat Satellite: Measuring Business Impact and ROI

Linux has become a key foundation for supporting today's rapidly growing IT environments. Linux is being used to deploy business applications and databases, trading on its reputation as a low-cost operating environment. For many IT organizations, Linux is a mainstay for deploying Web servers and has evolved from handling basic file, print, and utility workloads to running mission-critical applications and databases, physically, virtually, and in the cloud. As Linux grows in importance in terms of value to the business, managing Linux environments to high standards of service quality — availability, security, and performance — becomes an essential requirement for business success.

Learn More

Sponsored by Red Hat

White Paper
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState