Tuesday, January 22nd, 2008
Category: Dojo
, RichTextWidget, Showcase
Jeremiah Grossman is known for his amazing Web security talks. Now though, along with Lex Arquette, he has come out with a Dojo powered project (using 1.0.2) Roxer which aims to be the easiest way to make a web page:
Targeted mostly for novices, where with Roxer anyone can build just about any Web page they want using a Web browser (no plug-ins) and without a single line of code. Think Visio, MS Word, or OmniGraffle, but extremely simple and completely on Web-based.
There are a lot of cool features in Roxer, including cross-tab copy/paste, which were extremely difficult to implement. It’s only due to a background in JavaScript hacking were we successful. Other Web 2.0 / Ajax’ish stuff like Drag & Drop, Rich Text Editing, and Edit-in-Place were zip zap after that.
Wednesday, January 2nd, 2008
Category: JavaScript, RichTextWidget
EditArea is a free JavaScript editor for source code. This editor is designed to edit source code files in a textarea. The main goal is to allow text formatting, search and replace and real-time syntax highlight.
Features
- Easy to integrate, only one script include and one function call
- Tabulation support (allow to write well formated source code)
- Search and replace (with regexp)
- Customizable real-time syntax highlighting (currently: PHP, CSS, Javascript, Python, HTML, XML, VB, C, CPP, Pascal, Basic, Brainf*ck)
- Auto-indenting new lines
- Line numerotation
- Multilanguage support (currently: Croatian, Danish, English, French, German, Italian, Japanese, Polish, Portuguese)
- Possible PHP gzip compression (compress the 12 core files to one file of ~20Ko)
- Allow multiple instances
- Full screen mode
- Possible plugin integration
- Possible save and load callback functions
- Possible dynamic content management
- Can work in the same environment than "protype" and "mootools"'s like libraries.
You setup the text area, and then make sure to transform via something like:
JAVASCRIPT:
-
-
editAreaLoader.init({
-
id: "exemple_3" // id of the textarea to transform
-
,start_highlight: true
-
,font_size: "8"
-
,font_family: "verdana, monospace"
-
,allow_resize: "y"
-
,allow_toggle: false
-
,language: "fr"
-
,syntax: "css"
-
,toolbar: "new_document, save, load, |, charmap, |, search, go_to_line, |, undo, redo, |, select_font, |, change_smooth_selection, highlight, reset_highlight, |, help"
-
,load_callback: "my_load"
-
,save_callback: "my_save"
-
,plugins: "charmap"
-
,charmap_default: "arrows"
-
});
-
Friday, September 7th, 2007
Category: RichTextWidget
Alex is on a roll (just call him butter!) and has written about the state of browser WYSIWYG editing:
The state of in-browser WYSIWYG is somewhere between pitiful and mind-numbingly painful. Opera and Safari have pulled themselves up by the bootstraps and soon all the major browsers will be at the same level of awful, more or less. This area of DHTML doesn’t get much love from browser vendors in part because only the heartiest souls ever venture into these deep, shark-infested waters so there aren’t many people clamoring for fixes to the underlying capabilities. Everyone sane just picks up the Dojo Editor, TinyMCE, or one of the other good editing packages that are available.
Since watching Abe Fettig talk about his experience building a cross browser editor in Dojo, I have stayed away with a ten foot poll. Everyone is broken.
Alex has a set of APIs he would like to see:
Since it’s not really reasonable to expect that browsers will remove contentEditable, here are my proposed APi additions to it which would allow any sane editing UI to ditch the entire command structure which can slowly fade into the background over time.
editableElement.openUndoTransaction(callbackHandler): starts an undo transaction, implicitly closing any previously opened transactions. All subsequent DOM manipulation to elements which are children of this element will be considered part of the transaction and normal browser-delimited undo transaction creation is suspended until the transaction is closed. The optional callback handler is fired when the user cycles back this far in the undo stack from some future state.editableElement.closeUndoTransaction(): ends a manual undo transaction. Implicitly called by openUndoTransaction. Closing the transaction has the effect of pushing the current DOM state (or whatever differential representation the browser may use internally) onto the browser’s undo stack for this editable element. When an undo transaction is closed, browsers may resume automated generation of undo states on the stack intermingled with the manually added states.- Support for non-standard DOM positioning properties of range objects as outlined in MSDN
These APIs added to elements with contentEditable set will allow us to use regular-old DOM methods of manipulating user selections and adding complex content from user input without fighting for control of the undo stack or inventing our own (which has so many problems that I don’t want to begin to address them). Additionally, this method of manipulation will allow toolkit authors to deliver editors which operate on the semantics of the markup more easily.
Robbert Broersma of Xopus already commented that "developing a WYSIWYG editor in-browser will eventually not involve contenteditable anymore". Somehow I don't see the browser vendors stepping up? :/
Thursday, May 10th, 2007
Category: JavaScript, Library, RichTextWidget
There are a couple of updates in the world of rich text controls.
Ryan Johnson has created a new control: Control.TextArea. This is a very different tool, as it isn't about WYSIWYG functionality, but rather building toolbar based text areas that wrap simple text. It has support for functionality such as Markdown, Textile, etc. Everything can be driving from JavaScript to create your own functionality:
JAVASCRIPT:
-
-
textarea = new Control.TextArea('textarea_id');
-
textarea.textarea; //refers to the DOM element 'textarea_id'
-
textarea.observe('change',function(){
-
//called after the user types content, or clicks a button
-
//the change event refers to the Control.TextArea object, NOT the DOM element object
-
});
-
textarea.onChangeTimeoutLength = 500; //default value, amount to wait before firing the change callback
-
-
textarea.getValue(); //gets the contents of the whole textarea
-
textarea.getSelection(); //gets the current selection as a string
-
textarea.replaceSelection('my new text'); //repalce the current selection with this text
-
textarea.wrapSelection('before text','after text'); //wrap the current selection with these two strings
-
textarea.insertBeforeSelection('before text'); //inserts the string before the current selection
-
textarea.insertAfterSelection('after text'); //inserts the string after the current selection
-
textarea.insertBeforeEachSelectedLine('> '); //inserts the string before each selected line
-
textarea.injectEachSelectedLine(function(lines,line){ //works just like Hash.inject() for each selected line
-
lines.push(line); //this logic won't modify the selection, but you can modify each line here
-
return lines;
-
});
-
TinyMCE has a new 2.2.1 release, that has update such as:
- Fixed problem where TinyMCE failed to initialized if used together
with libraries like Scriptaculous.
- Fixed various problems with the media plugin, now easier to embed
Youtube/Googlevideo.
- Fixed so store/restore selection logic works in Opera and Safari
(Nightly).
- Cleaned up the source code by removing some obsolete code.
- Removed debug option, no longer needed since the devkit does it better.
- Removed old IE 5.0 code and reduced the overall code by using smarter
prototype add methods.
Monday, March 5th, 2007
Category: RichTextWidget, Showcase
If you are interested in the WYSIWYG race, then you have probably checked out Weebly.
They relaunched this morning, adding the features:
- Bring your own domain, and we'll still host your website at your
domain for free.
- We've integrated SnipShot image editing so that users can edit, crop,
resize and retouch images within the Weebly interface.
- We've added the Custom HTML element that lets you integrate items
Weebly doesn't support yet (ie. rockyou slideshows).
- We've added the ability to upload files of all types, like PDFs, Word
documents, Excel spreadsheets, etc.
- Completely revamped editing and page management interface.
- Multiple column layouts (2 column, 3 column, etc)
- New photo gallery element.
- A "contact form" element.
- Vast improvement to existing elements:
- Type in address for Google maps (currently requires coordinates)
- Paste in the URL for Google, YouTube videos (currently requires ID).
- 7 new themes.
Wednesday, January 24th, 2007
Category: RichTextWidget
Xopus is a browser based WYSIWYG editor that allows you to copy and paste from a Microsoft Word (or Open Office) document into the HTML page.
This demo shows it in action.
IE is the only browser supported in 3.1, but we have been promised that Firefox support is in the lab, and will be available shortly.
Monday, January 15th, 2007
Category: JavaScript, RichTextWidget, Toolkit, Utility
Andrea Giammarchi has been working on an online JavaScript editor and debugger.
The online editor combines a possible solution for byte family plugins, a global byteplug namespace object, and a portable Editor panel to test quickly JavaScript and/or html pages.
Features
-
realtime debug
It allows developers to write and test code quickly using document.write, alerts or everything else.
To view or execute a code, just use CTRL+RETURN or click on debug panel (bottom left), result will be displayed on output panel (bottom right)
using a dedicated iframe virtual space.
-
line points
Just click one line (number on the left) to mark them
-
in-place suggest
Just click CTRL + SPACE or CTRL + SHIFT with Opera to view a kind of intelligent code suggest.
For example, if You write "Number." on area then use CTRL + SPACE You will see every Number dedicated method plus generic Object methods.
If You press CTRL + SPACE without a dot before area selection, suggest will show You generic or global functions and statements.
-
quick and simple load and save operations
You can cut and paste some piece of code or directly open a file (txt or js) from Your computer.
You can save working area content too, choosing a name using CTRL+S or after one click on File, Save As.
-
simplified JavaScript 1.7 debug
You can choose to parse JavaScript as version 1.7 (compatible only with FireFox 2.0 or other advanced browsers) choosing Use JS 1.7 on Settings menu.
-
popup mode
You can launch this Editor inside an 800x600 popup
-
jhp mode
You can choose to try my absolutely nonsense or crazy jhp JavaScript library ... !!!
-
x-html mode
You can write divs, links, or every kind of markup using <script> ... </script> as first piece of area code (with or without JS code inside) to create a page instead of direct script execution
(i.e. <script type="text/javascript">function myfunc(){alert("Hello World")}</script> <span onclick="myfunc()">test me</span>)
-
resizable area
You can drag the line between working area and debug/output panel to find your favourite size
-
extra "code cruncher" implementation
You can test your code using a "code cruncher" (Crunch - "method" from Extra menu).
Please view "simple and portable PHP download" point to know more about Crunch methods.
-
extra code headers injection
You can choose to add area code as header. For example, if You need to add a library during debug You can
load or paste its code inside area and add them as header.
This code will not be parsed by jsmin and will not be saved as part of script but will be wrote before every other scripts on output panel (every but jhp) then,
for example, You could add Prototype code and use them as header.
// extra headers example
// area content
function testMe(){
document.write("useful ?");
};
// now click on header - add code on Extra menu and clean the area
// after that, write this on area
testMe();
// CTRL+RETURN or a click on debug panel and code will be executed
Please remember that every time You add code precedent code will not be deleted so You need to use header - clear code to remove all precedent headers.
-
extra highlight feature
You can choose to view on output panel highlighted code version.
Fast version marks strings, numbers and comments while full highlight parse functions and methods too.
If You have a big source and a regular PC (without monster CPU) You should use fast version.
To use a copy of highlighted code You could copy and paste output panel and use this dedicated css example file.
-
simple and portable PHP download and / or pack panel feature
You can save your code that should be parsed with cruncher too and then injected into a portable php 3, 4, 5 or greater file that will automatically
choose the best way to cache with or without gz encoding even on server that doesn't have zlib extension enabled.
- just area code,
to create a php file without code cruncher (the safest script VS bandwidth option leaving comments and everything else)
- Crunch comments,
to create a php file parsing code with basic code cruncher (removes only comments, this is a good script VS bandwidth option)
- Crunch newlines,
to create a php file parsing code with medium code cruncher (removes comments and every repeated space replacing them using a linefeed, this is the best script VS bandwidth option)
- Crunch full,
to create a php file parsing code with full cruncher options (remove any linefeed and doesn't take care of potential missing semicolons [can be regressive], this is the best copression option)
If You want to download your code using code cruncher please enable "Crunch", choose your favourite method and test your code to be sure that it works correctly.
If You just want to use this Editor to create these kind of compressed files and these are really bigs (no more than 512Kb on upload and 2Mb on download - my personal choice) please don't use File and Open process, just cut and paste your code into area (faster and safer for your browser and PC).
Please remember that created file size will not be the real size downloaded from clients so don't care about that, just test created php file and have fun :-)
Tuesday, December 12th, 2006
Category: RichTextWidget, Showcase
skrbl pad is a simple scratch pad that allows you to "whiteboard" ideas at a sharable URL.
It is a lot like Google Docs (Writely) and friends, but allows you to click absolutely everywhere, so a touch more free form.
Tuesday, November 21st, 2006
Category: RichTextWidget, Showcase
We have often talked about the holy grail of a usable WYSIWYG CMS system where users build their website by just being on their website and editing layouts and pages.
Kris Zyp is trying to do that with his new Authenteo system.
We have released a beta version of our new development framework and content management system, called Authenteo. This product features several innovative approaches to web development that we believe could really revolutionize the way we develop web applications.
- Client centric domain model through transparent persistence and retrieval from the server database using AJAX and continuations ala Narrative JavaScript. JavaScript can transparently access the data domain model without any knowledge of AJAX, but the domain model is still secured via the server. All pages are dynamically rendering with JavaScript on the browser.
- Immediate and intuitive access to component properties, JavaScript code, and styles by just right clicking on components in the editing interface. Try changing the JavaScript and styles dynamically from the editing interface!
- Structural model inheritance that provides a sophisticated form of that forms the basis of component construction, advanced super-flexible version control, and transactions.
- True in browser WYSIWYG editing, both content and layout can be editing just as page appears, no textboxes with your content, the whole page is there as it normally appears.
Monday, November 20th, 2006
Category: RichTextWidget, Showcase
Ben Nolan has created his take on an ajax'd up wysiwyg wiki called GroupsWiki.
Some of the interesting features are:
- Always editing, users are always editing their wikis, we attach events to the links so that they can open new pages even while contenteditable is enabled.
- Ajax image insert using a micro-version of lightbox. We also do table insertion the same way.
- Autosave - the users data is auto-saved every 30 seconds via ajax callbacks.
- Nice simple design and simple UI.
The application is built using Rails, Prototype, and TinyMCE. Ben didn't use this great behaviour.js for this application as he says: "I tend to use behaviour only when doing sites that will actually work without JS" (nice and pragmatic).
Monday, October 23rd, 2006
Category: Presentation, RichTextWidget, The Ajax Experience
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
Tuesday, July 11th, 2006
Category: JavaScript, Prototype, RichTextWidget, Ruby, Safari, Scriptaculous, Tip
Tuesday morning roundup!
Sifl n Olly's Chester on his love skills. (mp3, probably NSFW)
updated: made title less stupid
Tuesday, November 22nd, 2005
Category: Component, RichTextWidget
We recently covered the Dojo Rich Text Editor. Here's FCKEditor, another widget that aims to be easy for users to work with and easy for developers to install and customise.
Support for keyboard shortcuts is impressive, but the browser gets in the way sometimes. I got burned a couple of times with Cmd-Left, which in most editors would normally jump to the start of the line, but in the browser (Firefox), it took me all the way back to the previous page!
Rich text editors make content maintenance a whole lot easier for most people and are familiar to just about anyone who's used a word processor in the past couple of decades. It's not always good to replicate desktop functionality, but it seems to make good sense here, at least for non-technical users.
Many people will immediately associate the UI style with MS Office, but funnily enough Office 12 makes a radical departure from the menus-and-toolbars paradigm. Are "Ajax Ribbons" the next big thing?
Thursday, October 6th, 2005
Category: RichTextWidget
SynchroEdit is another editor on the block:
SynchroEdit is an open-source browser-based simultaneous multiuser editor, a form of same-time, different-place groupware. It allows multiple users to edit a single web-based document at the same time, and it continuously synchronizes all changes so that users always have the same version.
SynchroEdit's main editor is fully WYSIWYG, dynamically displaying bolds, italics, underlines, strikethroughs, with various justifications, indents and listing styles as an author inputs them. SynchroEdit also supports a simple, text-only editor for more basic documents. To clarify the multiuser experience, the editor window clearly depicts every user's changes in a specific color and also marks where each user is currently editing with a colored flag listing the user's name.
When we talked to JotSpot's Abe Fettig it was interesting to hear about their non-polling approach.
SynchroEdit is obviously trying to do similar work to get the realtime liveness:
This week we are focused on removing the requirement to use a signed javascript for the connection from the server. Instead, we are attempting to use an odd variant of XmlHttpRequest where we force the server connection to the client to remain interactive and never close (i.e. keep readystate == 3). As soon as this is complete we will move toward allowing a web service approach for establishing new SynchroEdit documents.
Thursday, September 8th, 2005
Category: Component, RichTextWidget, Showcase
We have had a lot of interest in Writely, a web word processor.
Writely gives you a Word-like interface that appears just in your browser, and lets you:
- Create documents (you would hope, wouldn't you?:)
- Share documents
- Joint editing
Visit the Writely home page
Go on the tour
