I made the TextField undo component. Add this component to any Flash or Flex application and all your text components will have undo and redo. This has been open sourced and is on http://code.google.com/p/undo-textfields/.
Instead of making different Flex and Flash components to use in place of the available components, I made one that adds undo to existing text components. It should work in Flash and in Flex, though I just have a Flex example to show you today. You can see that it can be container specific, though you would probably just put it on the root of your application or the stage. Type in the text components in the top panel. Then do the same in the bottom. You should be able to press Ctrl+Z and Ctrl+Y (or Ctrl+Shift+Z) to undo and redo. If you’re on a Mac just substitute Ctrl with Cmd. I’ve only tested it in Safari and Firefox on a Mac. I hope the key command work on other machines without issue. But I also added a couple of menu items to the right-click context menu. Give it a whirl below, view the source, and see how easy it is to add text undo and redo to all your existing applications without any refactoring.
Update: The keyboard shortcuts don’t work in the ActiveX version of Flash (Internet Explorer on Windows).
Let me know if the key-shortcuts don’t work on your system. Maybe phase 2 can be some javascript magic to capture those better.
February 4th, 2009 at 9:59 am
Jacob – the menu items work in IE 7 on WinXP, but the ctrl-z and ctrl-y do not work.
February 4th, 2009 at 10:40 am
Hi,
nice :)
The keyboard shortcuts doesn’t work with Win + IE6. Firefox is fine.
Florian
February 4th, 2009 at 12:21 pm
Thanks Paul and Flo. We could look into a javascript fix, and even us ExternalInterface to do it. But it wouldn’t work in places that don’t allow script access such as Facebook widgets etc.
February 6th, 2009 at 9:47 am
[...] http://jacwright.com/blog/112/undo-redo-for-all-textfields/ Posted by Mark Starling [...]
February 11th, 2009 at 5:10 pm
[...] built in that you wish would just work in Flash – a simple TextField undo & redo. My brother recently released a really slick solution to the problem. It isn’t a UI component – it sits above the display [...]
February 11th, 2009 at 5:31 pm
It may be worth noting that on a Mac the standard for redo is cmd+shift+z not cmd+y
February 12th, 2009 at 1:22 pm
Hi Jac,
I’ve have two questions about this timely solution (bearing in mind that I haven’t tried it or even read the docs yet):
1. Have you tried it in AIR? Any idea of whether it works there or not?
2. Related to (1), is there a way to tie the undo/redo functionality to buttons, AIR NativeMenus, etc.?
February 12th, 2009 at 1:29 pm
[...] (ActionScript) text fields. The previous link is to the Google Code project; here’s his introductory blog post about the “undo textfields” library. (via Tyler Wright via Gilles [...]
February 12th, 2009 at 1:39 pm
Paul! How’s it goin’ man? I haven’t tried it in AIR yet, though it SHOULD work just fine.
The undo and redo methods are protected, but they could totally be made public for using with menu’s etc. There should be more functionality added as well which can check if the undo or redo menu item should be disabled, depending on what is in the stack. Feel free to submit a patch and I’ll add it in if you don’t want to wait around for me to get to it.
February 12th, 2009 at 1:46 pm
Rob, I work on a Mac, and the applications that follow the OS standard do use Cmd+Shift+Z. Then there are the others that don’t. I usually don’t think about which one to use in which application so I have it working with both Cmd+Shift+Z AND Cmd+Y. Then everyone is happy.
March 10th, 2009 at 12:22 am
Hi Jac!
Thanks for your efforts on our behalf. This is really great!!
Do you know of any tutorials on how to add undo/redo to the entire Flex app? I’m guessing something like this would require a significant amount of work.
Thanks again, man. Amazing!
March 10th, 2009 at 1:33 am
Jac,
A quick follow-up to that – I could have been a bit more specific. I’m looking to add undo functionality similar to what is being done at http://scrapblog.com – as I begin to think through it, I’m realizing that my statement concerning this requiring a “significant” amount of work might have been an understatement – unless I’m just not thinking about it clearly. Thoughts on that?
Thanks again!!
March 10th, 2009 at 8:59 am
Well Jake, my twin did an application like scrapblog where they added undo/redo after they were almost feature complete. It was a nightmare for them trying to add it after the fact. That’s why we’ve added it to the Flight Framework, so that even if you don’t use it when you begin, it’s easy to add it later because the system is already architected for it.
So to answer your question, adding undo/redo to an application built on Flight is pretty strait-forward and easy. Adding it to an application not architected for it can be a real pain. I built ZenStudio for ZenPrint.com (or was a major player in building it) which is an app similar to scrapblog.com that uses Flight. I found the undo portion of it to be pretty easy compared to the rest of the application. Hope that helps.
March 10th, 2009 at 10:02 am
Thanks, Jac! I’ll take a look at the Flight Framework. Thanks for making it available!
One follow up question, if I may – approximately how long did it take to complete ZenStudio? It’s really great!!
Thanks again for the shove in the right direction.
March 13th, 2009 at 7:24 am
Hey, thanks for developing and sharing this feature. Did an awesome job ! It helped me in my work. And your daughter is very cute…. :)
March 13th, 2009 at 5:45 pm
Thanks Priyanka! I couldn’t agree more.
March 15th, 2009 at 3:24 pm
Hello and congratulations for your work.
Is there any way to extend the functionality of your component in order to undo/redo changes that are made to a textfield programmaticaly? I have a TextArea and text is inserted in it when user clicks on a button. Is there a way to undo that action?
March 16th, 2009 at 2:15 pm
Hi, and thnx for your time. Do you know how can i make it work with a RTE?. Thanks in advance.
March 16th, 2009 at 2:59 pm
Stathis, I don’t have it working that way. If you wanted it part of the undo history you could probably add that type of functionality. The code is open source. I’ve done most of the footwork already. But I think for most use-cases it isn’t the desired functionality. Probably I should be resetting the history whenever the text is set programatically.
Grolish, it would take some additions to make it work with rich text. But it probably wouldn’t be too difficult, you’d just need a way to tell the history when you’ve formatted the text (e.g. on bold, italic, etc) and you’d need to store the html rather than the text.
March 17th, 2009 at 6:49 am
Hey, I m working on Text Editor where my multiple pages are created for document. I used the Undo/Redo feature you developed. It works but only with one page. It doesnt show history and toggle between the pages to show undo redo actions. It just works with single page undo redo action. Can you guide to achieve the multiple page undo redo functionality?
Thanks in advance… :)
March 17th, 2009 at 11:26 am
Priyanka – This component was meant to cover the most common of use-cases, where form text boxes get undo-redo. I built the component on top of the undo history engine which comes bundled with the Flight framework. I would recommend you look into that more for custom undo/redo functionality. It’s actually quite easy once you understand how it works.
March 18th, 2009 at 1:22 pm
Thanks for your time Jacob. I have a few ideas. I’ll investigate your code once i get the chance and maybe post something here again.
March 20th, 2009 at 12:02 am
Hey Jac ! I did the necessary changes and it works great with multiple pages. Thanks.
March 20th, 2009 at 12:09 am
Great! It would be fun to see if your application is public. Post a link here for us.
March 23rd, 2009 at 2:53 pm
It seems that dispatching change event in the textarea works
April 21st, 2009 at 5:13 am
Thank you for this component, Jacob. I’m going to throw it into http://www.kbasweb.com in short order. My own solution was working great on Windows but testing on Mac has revealed that it was just about 100% off :)
It would be nice to have a current matrix (perhaps on the Google Code home) of where it works and where it doesn’t. I just tested in IE7 Win (in FF3 Mac works) and then I noticed that you already said it doesn’t work with the ActiveX version of Flash :)
Thanks again!
April 21st, 2009 at 5:55 am
Just implemented and…
I know that this is not what you claim to do, but for the RichTextEditor it’s not a full solution. There are many situations in which the restored text is not formatted correctly, and many non-keystroke things cannot be undone… or to put that another way, man would it be great to have an undo solution for the RTE!
April 28th, 2009 at 7:10 pm
Very good work. Thanks.
To use undo/redo from Adobe Air Native Menu on a TextArea you need to:
change protected to public undo/redo methods and use getTextField() method like this:
myUndoRedoInstance.undo((getTextField(txtaSource) as TextField));
Cheers!
August 14th, 2009 at 7:05 pm
Hi so how do I get the undo and redo button on iworks?
August 17th, 2009 at 3:20 pm
I’m sorry but I can’t help you there Alannah.
October 6th, 2009 at 7:11 am
Very nice work
October 6th, 2009 at 7:15 am
can we implements this on a text editor.
October 6th, 2009 at 10:13 am
It should work with any text fields. However, if you are doing bold, italics, etc. you’d need to modify the code to work with the HTML text and store changes made when bolding or italicizing. It will not work out of the box with rich text editors.
October 20th, 2009 at 2:50 am
Hi Jacob,
i need to implement this in IE using the shortcuts ctrl+z & ctrl+y, But that doesnt seem to work. Some help please :)
Thanks,
Chandni
October 20th, 2009 at 12:21 pm
In order to use the key shortcuts in IE you’ll have to resort to javascript. Flash can’t do it without help. There may be libraries out there that do that. If I had time I would help you out more, but I am really busy right now. Sorry.
December 5th, 2009 at 1:13 am
hi
can u provide me source code for how to implement undo/redoo funtion
December 5th, 2009 at 11:23 am
The source code for this is in the Google code project I mentioned in the first sentence of the post. Undo/redo is really something that needs to be coded up custom for most applications, so there isn’t just one function that can be used everywhere.
December 30th, 2009 at 2:16 pm
Hi Jac,
Thanks for your source code and it really helped me a bit,But this doesn’t work when i make part my text as Bold and if i Undo it the whole text supposed to unbold.This isn’t working how can i make it work this functionality.I tried using Flex 4 but this is messing my other parts of my source code.
Help Me Please!
December 30th, 2009 at 2:47 pm
It only works with regular text, not rich text (bold, italics, etc). You will have to roll your own solution for that. Perhaps the source code can help you see how undo-redo is done and help you on your way. Sorry I can be more helpful.
January 13th, 2010 at 2:05 pm
Jac,
Nice work and thanks for making this available to everyone. One problem I ran into is with redo and new lines.
Using the TextArea in the test app above, if you follow these steps, you’ll get something that looks right, but isn’t in its original state:
1. Type A, return, T
2. Undo all your typing (cmd+z 3 times)
3. Redo all your typing (cmd+shift+z 3 times)
At this point, the TextArea *looks* like it did when you started, but if you look at the text property, you’ll see that there is no newline character between the A and the T. Weird.
Any thoughts on what’s preventing the redo of the \r?
Thanks!
January 14th, 2010 at 8:10 am
OK, I found the problem. If the redo text only contained a \r, the TextField doesn’t insert the \r in the replaceText() call, although it does format the text as if there is a newline.
A global replace of \r with \n seems to work.
February 4th, 2010 at 10:28 am
Hi Jac! how can i add line numbers to a text area? Actually we are working on an application where in we have to open files in a text area.Its basically a HTML editor.
Thanks in advance :)
February 4th, 2010 at 4:06 pm
Adding line numbers is quite outside the scope of this article. But one idea you might try is using two textfields. One with numbers, the other with the content. The one with numbers should be thin and tall, and have selection=false.
Good luck. If you are doing full syntax highlighting in your project I’d like to see it when it is done.
February 5th, 2010 at 9:11 am
Hi Jac! thanks for the reply…we tried to use your code of undo-redo..but there is some problem..
ReferenceError: Error #1069: Property customItems not found on flash.display.NativeMenu and there is no default value.
at gearsandcogs.text::UndoTextFields/addContextMenu()[/Users/jacobwright/Projects/libraries/UndoTextFields/src/gearsandcogs/text/UndoTextFields.as:318]
at gearsandcogs.text::UndoTextFields/getData()[/Users/jacobwright/Projects/libraries/UndoTextFields/src/gearsandcogs/text/UndoTextFields.as:184]
at gearsandcogs.text::UndoTextFields/saveLastTextState()[/Users/jacobwright/Projects/libraries/UndoTextFields/src/gearsandcogs/text/UndoTextFields.as:154]
Can you please explain the procedure in which we can use the code.We are using Adobe AIR to make a dektop application of a HTML editor for which we are using Adobe flex builder 3.Thanks in advance ! :)
February 5th, 2010 at 10:32 am
I don’t know what needs to be done to get it working in AIR. Hopefully there is enough code to give you the idea of how it works so that you can fix it or rebuild a solution for your app.
February 5th, 2010 at 10:07 pm
Hi Jac ! thanks for the reply..The problem is that the swc file is not opening through flash 8,so we are unable to access the code.Can you please brief us on how to use the downloaded code and view the actionscript so that we can make changes for it to work on AIR….Its unable to reach gearsandcogs.text,
Please help.Thanks in advance.
February 9th, 2010 at 7:58 am
First of all, great addition to basic as3 functionality!
I did however have some trouble getting it to work. It seems like the event listeners didn’t work. Now I’ve extended the UndoTextFields class and overridden the initializeTarget method, removing the last three paramaters on the addEventListener calls. That did the trick, but I figure you didn’t put those arguments there for nothing.
Either way, it works great now!
March 11th, 2010 at 10:48 am
Very nice work! :)
March 22nd, 2010 at 7:18 am
Hey thanks for your help…Im done with the undo-redo..Can yu help me on providing color coding(syntax highlighting) of html on a text area.Thanks in advance.
October 1st, 2010 at 7:08 am
Hello Jac. I think that I’ve just found a bug in your component.
When a user pastes something by using the context menu of the textfield and not a keyboard shortcut, the last action is not detected propeply (that could cause a wrong combination of commands and maybe other unpleasant behaviour)
e.g. type something, and then paste something else using the context menu (right click) of the textArea. After that undo your changes. All the text is deleted as a result of a wrong combination of a type and an alter command.
Is there a way to detect when the paste event originated from the mouse and not the keyboard in order to fix this?
October 1st, 2010 at 9:55 am
I believe a more recent version of the player has an event dispatched when pasting text. You might look at that if you’re minimum player requirements is high enough.
October 3rd, 2010 at 11:14 am
Hello again. Thanks for the answer. I’ve just tried with the latest version of flash player and the result is still the same.
I use flash player 10,1,85,3. To which version are you referring?
Anyway, i found a workaround which seems to be working well until now. Inside file UndoTextField.as and in function onTextChange.
else if (lastAction == ACTION_TYPE) {
if(textField.caretIndex – lastSelection[0] > 1) {
history.executeCommand(new CommandAlterText(textField, lastValue, lastSelection));
} else {
history.executeCommand(new CommandType(textField, lastValue, lastSelection));
}
October 3rd, 2010 at 11:30 am
By the way, i have added custom commands and events in order to create a code editing component (with syntax highlighting) as part of a simple IDE for a simple programming language used for educational purposes in greece.
If anyone is interested for the code just mail me :
sstergou ΑΤ gmail DΟΤ com
October 5th, 2010 at 8:02 am
I haven’t added support for right-click paste. I only suggested it might be able to be supported in a recent version of the player, but I’m unsure.
If you’re sharing your code you should open source it and put it up on github or Google code. I’m sure a lot of people would be interested in at least looking through it and learning a thing or two, even if they don’t need a simple IDE.
June 16th, 2011 at 2:48 am
Undoredo not working in IE browsers though IE listens for keydown and key up events.
public function creationCompleteApplication():void
{
txtfield.addEventListener(KeyboardEvent.KEY_UP, keyHandlerfunction);
}
private function keyHandlerfunction (evt:KeyboardEvent):void
{
trace(“keyHandlerfunction: ” + evt.keyCode);
//Alert.show(“———–> number ” + evt.keyCode);
if(evt.ctrlKey && evt.keyCode == 90)
{
this.undoInstance.target=this.txtField;
Alert.show(“ctrl z pressed” + undoInstance.target);
}
}
Thanks in advance
January 12th, 2012 at 3:01 pm
Jacob,
Nice work! Thank you! Could you please post/enable code for the example above.
Much appreciated!