• 0

Wysiwyg Html Editors


Question

Hi there...

I'm looking for some info on WYSIWYG html editors. Not where i can get one or anything but how they work ie How they create a html document from what we see on screen to the html code.

If anyone knows of any good linkis (or source code for that matter) please get back to me.

Thanks

--WeeJames :fun:

Link to comment
https://www.neowin.net/forum/topic/48955-wysiwyg-html-editors/
Share on other sites

6 answers to this question

Recommended Posts

  • 0

and moved it is!

building a WYSIWYG editor is quite a task, because of the layout issues and rendering stuff like that in the GDI context (although you could be 1337 and use a DirectX-based interface :p ). I'd look into lots of stuff from www.w3c.org about layouts and the standards. Try to build your editor around the standards and i think you'll have a shot at it being VERY popular!

Good luck! :D

  • 0

Heh heh.. unfortunately due to Supervisor requirements my program is going to be programmed in Java. Its going to be part of my final year project at Glagow University, my supervisor is intent on getting my to program a WYSIWYG web designer for incorporating CSS and XHTML into documents.

Should be a barrel of fun, but thats why i was looking for information on how WYSYWIG editors do their thing.

--WeeJames :x

  • 0

OK, this is a big question, but I'll give it a shot.

Basic definitions

An XHTML document is based on XML, so it has the same basic structure: a tree of nodes, where each node is either an element or a piece of text (ie. a string). An element has a name, a list of attributes (name/value pairs) and a list of child nodes.

Parsing

Parsing an XHTML document is pretty straight forward; it's the same as parsing an XML document. So either read the spec and implement your own parser or use an existing XML parser. One thing to note is that it makes things easier if you split text nodes into words (so each text node is non-breakable).

Rendering

Once you've parsed a document, you need to be able to render it. The way I would recommend would be:

documentRootNode.Render(styles);

The styles variable contains state that must be carried over from one node to the next and inherited by child nodes. That means: current position, font, font size, background colour, text alignment, etc. In short, all the CSS properties.

The default implementation of the Render() method would simply render all the child nodes.

Text nodes are more complicated:

1. Calculate the rectangle that surrounds the text.

2. Check if the text will overflow the boundaries of the parent node, if it does, force a new line (move the current position to the next line).

3. Draw the text, using the current font styles, background colour, etc.

4. Update the current position.

Formatting elements are really easy:

class BoldElement : Element
{
  public void Render(StyleSet styles) {
    styles.fontWeight = BOLD;
    super.Render(styles);
  }
}

Text alignment makes things harder, since you have to lay out a line at a time. I'll leave this as an exercise for you... :D

Editing

OK, if you've done all the above, you should have a basic XHTML viewer. So what about editing? Well, it's not much different. You'll need a current selection, which consists of a start and end position (an XML position is a node and a character offset). If the start and end positions are the same, you have a caret. If the user enters text, you delete the current selection and replace it with the entered text. The arrow keys move the selection, etc, etc.

But, you say, every time the user presses a key, I'll have to redraw the whole document! Well, yes. But there's a way around that. For each node, store a reference to another node that this node depends on. Now to draw the document, do the following:

1. Draw the modified node.

2. Determine the node (or nodes) that depends on the modified node.

3. Draw the dependant node.

4. Check if the dependant node actually changed, if it did, then go to step 2.

Interesting topic! :happy: Hope all this rambling helped you in some way... :)

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • I'm not a fan of the HP "Smart" app either, but it does work. I just wish I didn't have to log in to use it. HP Color LaserJet Pro MFP 4301
    • FocusOn Image Viewer 1.32 by Razvan Serea FocusOn Image Viewer is a fast, lightweight, and user-friendly photo viewer for Windows. It supports various image formats, offers basic editing tools, EXIF data display, and batch renaming. With a clean interface, slideshow mode, and easy navigation, it’s ideal for quickly viewing and organizing photos without unnecessary complexity or system resource usage. FocusOn Image Viewer key features: Auto Organize: Automatically sorts photos by date using your chosen template. Explorer View: Browse and manage images with thumbnails; includes basic edits like resize and rotate. Photo Editing: Crop, apply filters, correct colors, add borders or text. Non-Destructive Edits: Original images remain untouched. Photo Sharing: Post directly to blogs, Twitter, and Facebook. Email Support: Send selected images via email. Print Options: Print to fit paper size, preserve aspect ratio, or fit multiple images per page. Slideshow: View selected photos in a slideshow. EXIF Tools: View or remove EXIF data. Scanning: Import from TWAIN or WIA-compatible scanners. Set as Background: Quickly set any image as desktop wallpaper. Batch Rename: Rename images in bulk using templates. Resize Images: Resize with optimized or custom resampling methods, including multi-step resizing. Thumbnail Sizes: Choose from thumbnail sizes between 32–256 pixels. Format Support: Compatible with over 100 image formats. FocusOn Image Viewer 1.32 changelog: Added Ghostscript(AI, PDF) DPI option Fixed transparency issue when saving PDF document as image Other improvements and bug fixes Download: FocusOn Image Viewer 64-bit | Portable 64-bit | ~7.0 MB (Freeware) Download: FocusOn Image Viewer 32-bit | Portable 32-bit View: FocusOn Image Viewer Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Wall cabinet: Fiber connection (1Gbps) Patch panel 2.5Gbps Router A mini PC with Ryzen 5800H CPU and 32GB DDR4 RAM, for network related tools (Portainer, Pi-Hole, Cloudflared, Tailscale, Uptime Kuma, Wetty) A headless server running Proxmox: AMD Ryzen 9 9950X CPU, 96GB DDR5, RTX 3090 24GB GPU, 10Gbps NIC, and a bunch of NVMs, SATA SSDs, HDDs A VM with TrueNAS for backups and media server via Jellyfin, passing through the SATA storage controller A VM with an Ubuntu server acting as a web and a GPU server for AI workloads, and a TeamCity build/deploy agent for my personal projects This setup has evolved many times for the last 2 years, I have not gone completely crazy, yet (I think), but still experimenting, still learning, it is a fun and rewarding experience having a home lab!
    • Microsoft PC Manager 3.17.4.0 (Offline Installer) by Razvan Serea With Microsoft PC Manager, users can easily perform basic computer maintenance and enhance the speed of their devices with just one click. This app offers a range of features, including disk cleanup, startup app management, virus scanning, Windows Update checks, process monitoring, and storage management. Microsoft PC Manager key features: Storage Manager- easily uninstall infrequently used apps, manage large files, perform a cleanup, and set up Storage Sense to automatically clear temporary files. Health Checkup feature -scans for potential problems, viruses, and startup programs to turn off. It helps you identify unnecessary items to remove, optimizing your system's performance. Pop-up Management - block pop-up windows from appearing in apps. Windows Update - scans your system for any pending updates. Startup Apps - enable or disable startup apps on your PC, allowing you to optimize your system's startup performance. Browser Protection - rest assured that harmful programs cannot alter your default browser. Also enables you to change your default browser. Process Management - allows you to conveniently terminate any active process, ensuring optimal system performance and resource utilization. Anti-virus protection - Fully integrated with Windows Security. Safeguard your PC anytime. Quick Steps: Download Microsoft PC Manager Offline Installer (APPX/MSIX) with Adguard Adguard serves as a third-party online service, offering a user-friendly method for directly downloading appx, appxbundle, and msixbundle files from the Microsoft Store. Official download links will be generated for both the app's various versions and its dependency packages. How to download Microsoft PC Manager Offline Installer (APPX/MSIX) 1. Initially, you must find the app URL within the Microsoft Store. Access the Microsoft Store via your browser and search for "Microsoft PC Manager". Once located, copy the app URL, which includes the product ID, either from the address bar or from the provided link below. https://apps.microsoft.com/detail/9PM860492SZD 2. Now paste the app URL into the designated area, then click the check mark button to produce a direct download link. 3. To download, right-click the relevant link and select “Save link as…” from your browser's menu. Occasionally, Microsoft Edge may flag the download as insecure. In such cases, consider utilizing alternative browsers such as Google Chrome or Firefox to successfully complete the download. Microsoft PC Manager is a completely free tool optimized exclusively for use on Windows 10 (version 1809 or newer) and Windows 11. Download: Microsoft PC Manager 3.17.4.0 | from Microsoft Store View: Microsoft PC Manager Home Page Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • You might want to update to 1TB drive.  They are not very expensive these days, there are plenty of options - simple look I would think you could find a 1TB ssd or even nvme somewhere between 50 and 100 bucks. when I have moved to larger ssds in laptop in the past, you can just connect the drive via usb - image.  Then take the old drive out, put in the new drive and there you go..  If your concerned about how much space you have left this prob your best bet..   
  • Recent Achievements

    • First Post
      Johnny Mrkvička earned a badge
      First Post
    • Week One Done
      viraltui earned a badge
      Week One Done
    • One Month Later
      serfegyed earned a badge
      One Month Later
    • Dedicated
      firey earned a badge
      Dedicated
    • Dedicated
      fettermanj earned a badge
      Dedicated
  • Popular Contributors

    1. 1
      +primortal
      645
    2. 2
      ATLien_0
      223
    3. 3
      Michael Scrip
      223
    4. 4
      Xenon
      151
    5. 5
      +FloatingFatMan
      144
  • Tell a friend

    Love Neowin? Tell a friend!