Undo/Redo for all your TextFields
Posted by Jacob Wright in ActionScript 3, Flash, FlexFeb 4th, 2009 | 48 responsesI 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.
48 Responses to “Undo/Redo for all your TextFields”
Leave a Reply
About Me
Jacob – the menu items work in IE 7 on WinXP, but the ctrl-z and ctrl-y do not work.
Hi,
nice :)
The keyboard shortcuts doesn’t work with Win + IE6. Firefox is fine.
Florian
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.
[...] http://jacwright.com/blog/112/undo-redo-for-all-textfields/ Posted by Mark Starling [...]
[...] 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 [...]
It may be worth noting that on a Mac the standard for redo is cmd+shift+z not cmd+y
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.?
[...] (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 [...]
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.
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.
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!
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!!
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.
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.
Hey, thanks for developing and sharing this feature. Did an awesome job ! It helped me in my work. And your daughter is very cute…. :)
Thanks Priyanka! I couldn’t agree more.
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?
Hi, and thnx for your time. Do you know how can i make it work with a RTE?. Thanks in advance.
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.
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… :)
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.
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.
Hey Jac ! I did the necessary changes and it works great with multiple pages. Thanks.
Great! It would be fun to see if your application is public. Post a link here for us.
It seems that dispatching change event in the textarea works
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!
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!
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!
Hi so how do I get the undo and redo button on iworks?
I’m sorry but I can’t help you there Alannah.
Very nice work
can we implements this on a text editor.
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.
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
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.
hi
can u provide me source code for how to implement undo/redoo funtion
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.
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!
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.
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!
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.
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 :)
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.
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 ! :)
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.
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.
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!
Very nice work! :)