Linkify in Textarea

[vaibviad]

I am using linkify in textarea & i have autosave function in it. after every 3 secs the text is saved in db .I am calling linkify before saving in db.
What problem i am facing is the focus of cursor/caret is lost due to linkify ..
I keep on writing and after autosave cursor is lost its position..
I am using froala-editor as my text editor.
Can u suggest some tweaks to solve this ..
@nfrasser

[nfrasser]

Hmm, interesting use case. Currently Linkify is designed to run on static HTML (as opposed to content-editable textareas like froala-editor). You could instead apply Linkify to your content once it renders on a web page, rather than the text editor.

i.e.,

<textarea>My content</textarea>

...

<div id="content">My Content</div>

$('#content').linkify(); // rather than $('textarea').linkify()

For future releases we'll definitely look into ways of making Linkify play nicely with WYSIWYG editors.

[vaibviad]

Thanks @nfrasser for reply and considering as enhancement.
For now i have solved the issue by saving the caret position and restoring it back after the linkify is called.
below i am sharing my code which might help you to accomplish the enhancement

if (window.getSelection && document.createRange) {
    saveSelection = function(containerEl) {
        var range = window.getSelection().getRangeAt(0);
        var preSelectionRange = range.cloneRange();
        preSelectionRange.selectNodeContents(containerEl);
        preSelectionRange.setEnd(range.startContainer, range.startOffset);
        var start = preSelectionRange.toString().length;
        return {
            start: start,
            end: start + range.toString().length
        }
    };

```
restoreSelection = function(containerEl, savedSel) {
    var charIndex = 0, range = document.createRange();
    range.setStart(containerEl, 0);
    range.collapse(true);
    var nodeStack = [containerEl], node, foundStart = false, stop = false;

    while (!stop && (node = nodeStack.pop())) {
        if (node.nodeType == 3) {
            var nextCharIndex = charIndex + node.length;
            if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
                range.setStart(node, savedSel.start - charIndex);
                foundStart = true;
            }
            if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
                range.setEnd(node, savedSel.end - charIndex);
                stop = true;
            }
            charIndex = nextCharIndex;
        } else {
            var i = node.childNodes.length;
            while (i--) {
                nodeStack.push(node.childNodes[i]);
            }
        }
    }

    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}
```

} else if (document.selection && document.body.createTextRange) {
    saveSelection = function(containerEl) {
        var selectedTextRange = document.selection.createRange();
        var preSelectionTextRange = document.body.createTextRange();
        preSelectionTextRange.moveToElementText(containerEl);
        preSelectionTextRange.setEndPoint("EndToStart", selectedTextRange);
        var start = preSelectionTextRange.text.length;

```
    return {
        start: start,
        end: start + selectedTextRange.text.length
    }
};

restoreSelection = function(containerEl, savedSel) {
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(containerEl);
    textRange.collapse(true);
    textRange.moveEnd("character", savedSel.end);
    textRange.moveStart("character", savedSel.start);
    textRange.select();
};
```

}

var savedSelection;

function doSave() {
    savedSelection = saveSelection( document.getElementById("txt_blog_editor") );
}

function doRestore() {
    if (savedSelection) {
        restoreSelection(document.getElementById("txt_blog_editor"), savedSelection);
    }
}

.
Then you can call the sequence as follows

SaveCARETpos- Linkify - RestoreCARETpos - SavetoDB

Courtesy
http://stackoverflow.com/questions/29362809/linkify-in-textarea-jquery/29363154?noredirect=1#comment46919414_29363154
http://stackoverflow.com/questions/13949059/persisting-the-changes-of-range-objects-after-selection-in-html/13950376#13950376