Where to use WYSIWYG: Abe Fettig
Abe Fettig works on JotSpot, which has evolved its rich text editor as new releases have come out. People have a love hate relationship with WYSIWYG, especially developers, and Abe started out there:
"I didn't always like WYSIWYG"
He starts off redefining what most people think of WYSIWYG. It doesn't mean Microsoft Word. vi can be WYSIWYG. If you are editing a text file you see what you are getting.
In fact this is a definition of WYSIWYG:
"EMACS was one of the very first WYSIWYG editors, replacing (actually, at first overlaying) the extremely obscure, command-based TECO."
WYSIWYG is WYSIWYG if you do not have to imagine what the output will be.
Wordpress Editor Example
Abe created a WP theme that changes the default WP behaviour for editing:
- user comments: lightweight wysiwyg: the div it grows, url recognised. simple.
- admin post: edit inline instead of going to the edit page in /wp-admin
Abe next went into some nuts and bolts, getting into details on document.designMode="on", contentEditable, and document.execCommand.
The bad news is that browsers differ a lot here, which means that if you are writing to this low level you are in for a lot of browser checking work.
Abe shows how we can build editors, but quickly warns us from doing so.
I have seen enough to know that I sure as hell do not want to write my own rich editor.
The Dojo editor was the obvious example to see how much easier it is to use an editor that is out there, versus writing your own, and we should plug it into our template at ajaxian.com.
Watch out for the following in rich components
- Custom undo/redo stacks that work
- Spell check: FF2 has it, gmail has it. Goal: cross browser inline spell check that works
- Zimbra ALE: embedding rich objects in WYSIWYG using iframes
- Advanced plain text editing: grok code and syntax
Related Articles
The bane and choice of Rich Text Editors
A Simple CMS
WordPress 2.2
Office 2.0: Google and Zoho Announcements
On Browser WYSIWYG
Google’s Latest - GooglePages Ajaxed WYSIWYG Page Creator
Scott Lewis: Adding Shared Editing To Your Favorite Text Editor
Google Pages Adds Nice Image Editing
Relatd Projects
What is XSTM?
XSTM is a n open sourcelibrary which enables high performance object replication between processes. It is an object oriented Distributed Shared Memory, or a Distributed Object Cache.
XSTMhas similarities with technologies like Adobe Flex Data Services , JBoss Cache, Terracotta, Tangosol Coherence , ScaleOut , or IBM's ObjectGrid .
Our model is based on object shares, which work like file shares. When an object is added to a share, it appears on the other machines which have the same share opened. Modifications done to the fields of the object are from this point replicated between machines.
Read more in the project overview.
XSTMis made of three projects. The Java implementation is called JSTMand is the base from which
the other versions are derived. An adapted version made with Luciano, the
author of GWM , is available for GWT . It allowsthis library to be used in a browser. NSTM is a .NET port based on IKVM.
All implementations are compatible with each other so object replication can take
place e.g. between a Java server and a .NET Smart Client.
A simple command-line tool to create the folders and helper files for a new JavaScript project/library. As a bonus, you can quickly create a website to promote your project.
When you start a new JavaScript library, how do you layout the source files, the tests, the distribution files? Do you have support scripts to generate distributions from source files? Run your JavaScript unit tests? Generators to create new unit test HTMLfiles?
Just by adding this small JavaScript module to the end of your web pages, you get your form's submissions intercepted and, instead of sending request to the server in the usual way, they are done asynchronously and in an AJAX-style smooth way.
As long as it is a client-side library it will work with any server technology: ASP.NET, PHP, JSP, Classic ASP... and even with local HTM files.
I've included extensibility so that you can add easily your own progress indicators (several included) and show error messages the way you prefer (by default it shows an alert).
It's transparent to your server code and could be used to add AJAX capabilities to some applications without writting a single line of code.
Documentation is included.
Features summary
• No-code AJAXification of web apps
• Supports any server technology, including ASP.NET, JSP, PHP, ASP 3.0...
• In ASP.NET it supports all kinds of postbacks: direct and by code.
• Works in any modern browser that supports AJAX.
• Supports cross-posting of forms, that is, you can send the information to any web page in the same domain. If all your web pages have AJAXInterceptor included (for example, you include it in your master page or template) you can hace
• Respects your custom onsumit event handlers.
• Supports browser history so that your users can hit the previous button and get the last rendered page.
• Two versions of the module:
- AJAXInterceptor.js: full commented one. Useful for debugging purposes.
- AJAXINterceptor_r.js: reduced-size version. It downloads faster as it only is 2.6 kB in size. It's better to use this on production apps.
• Automatically show/hide custom progress indicators.
• Support for cancelling operations.
• Support for custom message displaying.
• Supports any form in your page
Obviously this is not substitute at all of full-fledged APIs like Microsoft's ASP.NET AJAX, PHPLiveX or AJAX.NET, but will let you add AJAX support to your apps in a few seconds and without writing any code. Just give it a try!
In the ZIP you will find teh module, a working sample with ASP.NET and a PDF with the help documentation.
This project is just for fun :-)
I will be very glad if you drop me a line in case you use AJAXInterceptor in any real-world application or if you enhance it with new features.
Visit my .NET blog (Spanish) at http://www.jasoft.organd my e-mail marketing blog (English) at http://www.theemailingexperience.com
JSJaC is a jabber/XMPP client library written in JavaScript to ease implementation of web based jabber/XMPP clients. For communication with a jabber server it needs to support either HTTP Pollingor XMPP Over BOSH(formerly known as HTTP Binding). JSJaC has an object oriented design which should be quite easy to use. Communication is done by using the XML HTTP Request objectalso refered to as AJAX technology. Your browser must support this.
- No plugins like Flash or Java required.
- Popup blockers are no problem. The content expands within the active browser window.
- Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
- Compatibility and safe fallback. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a fallback HTML page.
Using Caja, web apps can safely allow scripts in third party content.
The computer industry has only one significant success enabling documents to carry active content safely: scripts in web pages. Normal users regularly browse untrusted sites with Javascript turned on. Modulo browser bugs and phishing, they mostly remain safe. But even though web apps build on this success, they fail to provide its power. Web apps generally remove scripts from third party content, reducing content to passive data. Examples include webmail, groups, blogs, chat, docs and spreadsheets, wikis, and more.
Were scripts in an object-capability language, web apps could provide active content safely, simply, and flexibly. Surprisingly, this is possible within existing web standards. Caja represents our discovery that a subset of Javascript is an object-capability language
Google Gears is an open source browser extension that lets developers create web applications that can run offline.
Django’s template language is designed to strike a balance between power and ease. It’s designed to feel comfortable to those used to working with HTML. If you have any exposure to other text-based template languages, such as Smartyor CheetahTemplate, you should feel right at home with Django’s templates.
jQuery UI is a set of themable widgets and interactions, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.
