JQuery :: Text Undo Redo Machanism Like Googledocs/MS Word

Sep 6, 2010

I find most rich internet text editors, developers put in the product many many features but fail to make a decent undo redo mechanism, I pressed crtl+z they deleted my whole paragraph. Unlike googledocs's one, it knows exactly what to undo.

If anyone can let me know what the logic of google docs/Ms word machanism is, maybe I can give it shot building one.

View 1 Replies


ADVERTISEMENT

Undo Redo Function

Jun 8, 2004

<!--

I'm working on an undo-redo function. Couldnt really find anything useful in the internet.
So I have a try. Guess it could be quite useful for a lot of people out there.

Wonder if the concept is any good?

Please critizise hard!
Try it out if you dare!
Any feedback is welcome!
All suggestions are appreciated!

Yours

Axinya

-->
<html>
<head>
<style type="text/css">
<!--
#wisiwig {
overflow: auto;
position: relative;
height: 300px;
width: 600px;
margin-top: 5px;
padding: 5px;
border: thin groove #999999;
}
-->
</style>
<script language="JavaScript">
<!--
var b_ackup = new Array(); //Store data in Array
var undo_pos= 0;//Position of undo
var flag = false;// shall we start new undo thread and delete obsolete items?
var w_isiwig;//editor interface

function init(){
w_isiwig = document.getElementById("wisiwig");
w_isiwig.contentEditable = true;
w_isiwig.onkeyup = HandleKeys;
b_ackup[0] = w_isiwig.innerHTML;
}

function HandleKeys(evt) {//events to write to backup
//
if (event) {

switch (event.keyCode) {
case 32:
BACKUP();
break;
case 8:
BACKUP();
break;
case 13:
BACKUP();
break;
case 46:
BACKUP();
break;
default:
return;
}
}
}

function BACKUP(){

if (flag){// action if undo was clicked

var removed= b_ackup.splice(flag,b_ackup.length - flag);
for (var i = 0; i < removed.length; i++) {
delete removed[i];//delete obsolete array items
}

b_ackup[b_ackup.length] = w_isiwig.innerHTML;
undo_pos = b_ackup.length - 1;
flag = false;
w_isiwig.focus();

}
else{//write to backup array
b_ackup[b_ackup.length] = w_isiwig.innerHTML;
undo_pos = b_ackup.length - 1;
flag = false;
w_isiwig.focus();
}
}

function undo(){

if (b_ackup.length){//

if(undo_pos==0){w_isiwig.focus();return;}// beginning of backup items

if(flag == false){BACKUP();}// save last state of document

w_isiwig.innerHTML=b_ackup[undo_pos -1];

undo_pos=undo_pos - 1;

flag = undo_pos +1;

look();

w_isiwig.focus();
}
}

function redo(){
if(undo_pos == b_ackup.length -1){w_isiwig.focus();return;}
//end of backup array

w_isiwig.innerHTML=b_ackup[undo_pos +1];

undo_pos=undo_pos + 1;

flag = undo_pos +1;
look();
w_isiwig.focus();

}

function look(){// monitor our Array data
var e='flag:'+flag+'
undo_pos:'+undo_pos+'
'
e+='b_ackup.length:'+b_ackup.length+'
'
for (i=0; i<b_ackup.length; i++){

e+= 'Backup item '+i+':'+b_ackup[i]+'
'
}
document.getElementById('bup_a').value=e;
}

</script>
<title>undo-redo</title>
</head>
<body id = "body" onload= "init();">
<p><b>undo/redo</b> <br>
development version: for <b>IE</b> only<br>
Backup written by <b>'onkeyup'</b> event(space,back,return,del), or
<b>'add to backup'</b> button. </p>
<div id="menu">
<a href="#" onclick='BACKUP();return false'>[add to backup]</a>
<a href="#" onclick='setTimeout("undo()",10)'>[undo]</a>
<a href="#" onclick='setTimeout("redo()",10)'>[redo]</a>
<a href="#" onclick='look()'>[view backup-data]</a> </div>
<div id="wisiwig">Type text: </div>
Backup Array Data: <br>
<div id="bup">
<textarea id="bup_a" name="bup_a" cols="80" rows="6"></textarea>
</div>
</body>
</html>

View 8 Replies View Related

Undo System For Text

Jul 23, 2005

I`m writing a javascript regex tester (IE 6 only) and would like to include
an undo button for a text input field.

I want it to handle individual keystrokes, pasting and drop, and also
text added by clicking various buttons.

I have tried a LOT of handler combinations and fancy conditionals to
make it work perfectly, and I`m ALMOST there.

View 3 Replies View Related

JQuery :: Find The Height Of A Div, Apply The Height To Other Divs, Redo The Heights On Click?

Jun 12, 2009

I am working on a UI that, when you click on a menu option, a div opens and show three divs inside. These divs all have different
heights. The heights are based on the divs content.The problem I'm having is... how do I measure what the divs height should be? IE, how do I grab the height for a div BEFORE it has had any style applied to it.

View 1 Replies View Related

How Can I Restrict ExecCommand('undo') To A <div>?

Jul 23, 2005

I am using IE 6.0. On a page, I have placed a contenteditable div
which I want to use as a Rich Text Area. I am using the execCommand method of
the document to control bold, italics, underlining, and undo for this div.

I have placed an input element on the page to. All but the undo, are
restricted to working only on the div. How can I restrict the undo to
working on only the div?

Below is the complete page so you can see what I am talking about.
Just paste it into an htm file and traverse to it via your browser.
Type something in the div and the input and then try the buttons. Code:

View 3 Replies View Related

Format Text In A Word Doc?

Apr 1, 2010

I have a web form. I use a simple function to generate a letter ouput based on the form fields and populate them into a word doc for printing. Below is a basic example, but you get the idea.

function createDocument() {
strDoc = "
"
strDoc += "Hello there!

[Code]....

Note this is only intended to be used on IE8. As it stands, the ouput generates and formats exactly as I want bar two things:

1) Does anyone know how I can get some of the text to bold? I've tried everything I can think of (html tags, escape characters etc etc). Is there a way to open a word window in rtf perhaps?

2) Does anyone know how I can insert a small image (a signature in gif or jpg) into the document?

I can use a browser window instead of word, which formats, bolds, images etc, however I then get the issue of headers/footers when printing. I cannot disable headers everytime I want to print a letter, it's not practical.

View 10 Replies View Related

Tabbed Text - Like In MS Word

Apr 13, 2006

I'm trying to create a list of prices where the cost is tabbed across so they all line up...

I'm sure there is an easy way of doing that's better than I have so far.

<SCRIPT LANGUAGE='Javascript'>
document.write("<XMP>")
document.write("May &pound;853
")
document.write("June &pound;906
")
document.write("July &pound;1,012
")
document.write("August &pound;1,012
")
document.write("September &pound;906
")
document.write("October &pound;853
")
document.write("</XMP>")
</SCRIPT>

I've tried looking through the forums but it keeps landing me on threads about tabbing between text fields.

View 6 Replies View Related

Possible To Do A CTRL-z (undo) In On-click Event

Sep 29, 2010

is it possible to do a CTRL-z (undo) in a onclick event ?

View 3 Replies View Related

Replacing A Word In A Text Field?

Dec 2, 2006

How does one take the selected text in a textarea dn replace it with something else?

like id like to be able to wrap words for markup innit:

this is an [ b]example[/b] sentence

-------------------

all I can seem to find on the web regarding selecting text are scripts for select text off page, but never from within an input field.

View 3 Replies View Related

Restrict Text Length To Nearest Word?

Nov 8, 2009

I am very able to restrict char length by using substr() but this means that in some cases the word gets cut off in the middle of it.

How can I restrict the char length to the nearest word.

This is where I got to and then went blank?

Code:
if(comparename.length > 18){
if(comparename.substr(0,18) != ' '){
for(var tzx=0;tzx<comparename.length;tzx++){
while(comparename.substr(0,(18-tzx)) != ' '){

[Code]....

View 3 Replies View Related

Get The Search Word - Find A Word Inside A String

Jun 15, 2011

I am trying to find a word inside a string.the search his going fine but I need to know which word has been found in the string.

Code:

Code:

Now in the string only one value can be found at a time.So its either a1 or a2 or so on.....

View 4 Replies View Related

Jquery "" Passing Text Form Input - Missing The Second Word?

Dec 8, 2011

<script src="http://code.jquery.com/jquery-latest.js"></script> //for reference
Code Java:
function nameList(){
url ="post-json.php?action=search&keyword="+$("#keyword").val()+"&additionalInfo=whatever";
$("#modaldisplay").load(url);
alert(url);
}

Normally this works, the problem is when i write two words in the input box the value isnt getting passed properly to the php side.

[Code]....

how to get both words from the input box?

View 4 Replies View Related

Load The Word The User Inputs And Makes It Bounce Around The Canvas As Well As A Text Spinner

Jan 25, 2011

I have been practicing using canvas to make designs. My current code below will load the word the user inputs and makes it bounce around the canvas as well as a text spinner. However, whenever the user inputs a second word, the bounce below stops to start a new one and the text spinner messes up. so when the user inputs another word, that it either reloads a new textspinner or adds another one, as well as just add the word to the canvas without stopped the old one.

[Code]...

View 1 Replies View Related

Display Words In Red And Green In Such A Way That That Fist Word Should Be Red, 2nd Word Should Be Green?

Dec 24, 2010

I have a long paragraph and I have been asked to display words in red and green in such a way that that fist word should be red, 2nd word should be green, 3rd word should be red and 4th word should be green and so on. For example: this is just a sample.

View 3 Replies View Related

Java - Database - Post Form To Mysql - Only Posting First Letter Of Word/phrase For Text Input Fields To Mysql Database

Jul 13, 2011

I am having no luck with my post form to mysql. It is only posting the first letter of the word/phrase for the text input fields to the mysql database. It is a photo and text post form. The photo and only first letter of text are posting to database. I am using Jqtouch, jquery, and phonegap.

Here is my form fields:

Here is my java script:

View 3 Replies View Related

JQuery :: Change Color Of Each First Word In A H2 Tag?

Feb 12, 2010

I'd like to be able to change the color of each first word in a h2 tag, is this possible with jquery?

View 8 Replies View Related

JQuery :: FadeTo() On Whole Paragraph But One Word?

May 30, 2010

I have a div with some content in it, within the content there's an anchor and when you click it all the content but the anchor itself should fadeTo('slow', 0.2);

What I have now is;

$("p a#somelink").click(function()
{
$(this).parent().parent().children("p").fadeTo("slow", 0.2);
return false;
});

Which obviously just fades all paragraphs. Is it possible to do what I want and with which selection string would I achieve it?

View 2 Replies View Related

JQuery :: Filter If A String Contains A Word?

Aug 16, 2009

i use this code, (works fine)

$.post("verzenden.php", { note: content, action: "send", subject: subject },
function(data){ $("#myspan").html(data);
$("#myspan:contains('error')").css("color", "red");

[code]....

View 1 Replies View Related

JQuery :: Check Whether A Word Exists In A URL?

May 14, 2011

Let me explain the issue which I'm facing with an example.My URL is http://localhost/~gaurav/dstreetmantra/register.php.One of the anchor tags in my navigation bar is <a href="register.php">Register</a>.The code needs to be able to check whether the value in this very anchor tag's href attribute is present in the URL.If it is present, the word 'Register' register would be highlighted. If not, some other link would be highlighted.As I said, I'm doing this for the navigation bar. This way, it'll check which of the links' 'href' value is present in the URL, and thus highlight that link.I'm assuming this can be done using Regex, but I do not know how to use it.

View 4 Replies View Related

JQuery :: Style Each Instance Of A Given Word?

Sep 30, 2009

I have a client, let's call them "BuyNow." They would like for every instance of their name throughout the copy of their site to be stylized like "BuyNow," where the second half of their name is in bold.

I'd really hate to spend a day adding <strong> tags to all the copy. Is there a good way to do this using jQuery?

View 3 Replies View Related

Jquery :: Style Every Instance Of Word?

Nov 2, 2011

I am wanting to add a style (bold and blue for example) to every instance of a word or words on my website. Is this possible with jQuery? And how would I write it?

View 1 Replies View Related

JQuery :: Change Single Word Within A Sentence?

Oct 29, 2010

I'm trying to have a sentence change a single word every 2 seconds, and i have little experience using jQuery, but I'm trying, I've spent a while looking all over and the closest I came was to cycle through a list.[code]....

I'm trying to have only the word (blue) change to (red) after 2 seconds and then to (green) after 2 seconds, but all with either a scroll, or a fade in/out.

I'm wondering if anyone could point me in the right direction?

View 6 Replies View Related

JQuery :: QuickSearch - How To Match Only Beginning Of Word

Sep 10, 2009

I'm using the Quicksearch plug-in and it does everything I need except for one thing. If I have two rows, for example:
"Blood oranges" and
"Green apples"
And I search for "a", it's going to match both rows because it matches the "a" in "oranges". What I need to is to match only the beginning of each word, so that typing "a" in this case would only give me "Green apples". Is this possible?

View 1 Replies View Related

JQuery :: Replace Div Depending Of If It Contain A Specific Word?

Oct 16, 2010

If I have an 'dynamic' Div that sometimes contains the word Red or sometimes contains the word Green, i would like to replace (or something) the ID to something else.If the word inside the div is Green I need to use a green background, but if the word is red in the div, i need to have it in a red background.

<div id="x">Green</div>
<style>
#y {
background-color:Red;

[code]....

View 2 Replies View Related

JQuery :: Replace One Word In Elem.html() With Another

Aug 2, 2011

Can method replaceWith() be used to replace just ONE WORD in body of a tag (i.e., element.html()?) with another word? I have li's with "tab one", "tab two", "tab three" etc.. I have to replace dynamically ONLY the word "tab" with another word..

View 2 Replies View Related

JQuery :: Find First Word Of The Paragraph An Then Copy It?

Apr 4, 2011

How can I find first word of the paragraph an then copy it?Second bit I've already work out, but could not find any example of finding first word.

View 1 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved