Forum Moderators: open

Message Too Old, No Replies

selecting text, htmlArea in Safari

how to leave the text selected in htmlArea with Safari

         

VisionForce

12:17 am on Jan 21, 2006 (gmt 0)

10+ Year Member



I'm using htmlArea. In IE, when you select text then press the "create link" button, the text remains highlighted after the link is created. In Safari, after you create the link, the text does not remain highlighted. How do I fix this?

See this example:
<No URLs, thanks. See TOS [WebmasterWorld.com].>


HTMLArea.prototype._createLink = function(link) {
var editor = this;
var outparam = null;
if (typeof link == "undefined") {
link = this.getParentElement();
if (link &&!/^a$/i.test(link.tagName))
link = null;
}
if (link) outparam = {
f_href : HTMLArea.is_ie? editor.stripBaseURL(link.href) : link.getAttribute("href"),
f_title : link.title
};
this._popupDialog("link.php", function(param) {
if (!param)
return false;
var a = link;
if (!a) {
editor._doc.execCommand("createlink", false, param.f_href);
a = editor.getParentElement();
var sel = editor._getSelection();
var range = editor._createRange(sel);
if (!HTMLArea.is_ie) {
a = range.startContainer;
if (!/^a$/i.test(a.tagName))
a = a.nextSibling;
}
} else a.href = param.f_href.trim();
if (!/^a$/i.test(a.tagName))
return false;
a.target = param.f_target.trim();
a.title = param.f_title.trim();
editor.selectNodeContents(a);
editor.updateToolbar();
}, outparam);
};

HTMLArea.prototype.insertHTML = function(html) {
var sel = this._getSelection();
var range = this._createRange(sel);

if (HTMLArea.is_ie) {
range.pasteHTML(html);
} else {
// construct a new document fragment with the given HTML
var fragment = this._doc.createDocumentFragment();
var div = this._doc.createElement("div");
div.innerHTML = html;
while (div.firstChild) {
// the following call also removes the node from div
fragment.appendChild(div.firstChild);
}
// this also removes the selection
var node = this.insertNodeAtSelection(fragment);
}
};

/** Returns a node after which we can insert other nodes, in the current
* selection. The selection is removed. It splits a text node, if needed.
*/
HTMLArea.prototype.insertNodeAtSelection = function(toBeInserted) {
if (!HTMLArea.is_ie) {
var sel = this._getSelection();
var range = this._createRange(sel);
// remove the current selection
if (!HTMLArea.is_safari) {
sel.removeAllRanges();
}
range.deleteContents();
var node = range.startContainer;
var pos = range.startOffset;
switch (node.nodeType) {
case 3: // Node.TEXT_NODE
// we have to split it at the caret position.
if (toBeInserted.nodeType == 3) {
// do optimized insertion
node.insertData(pos, toBeInserted.data);
range = this._createRange();
range.setEnd(node, pos + toBeInserted.length);
range.setStart(node, pos + toBeInserted.length);
sel.addRange(range);
} else {
node = node.splitText(pos);
var selnode = toBeInserted;
if (toBeInserted.nodeType == 11 /* Node.DOCUMENT_FRAGMENT_NODE */) {
selnode = selnode.firstChild;
}
node.parentNode.insertBefore(toBeInserted, node);
this.selectNodeContents(selnode);
this.updateToolbar();
}
break;
case 1: // Node.ELEMENT_NODE
var selnode = toBeInserted;
if (toBeInserted.nodeType == 11 /* Node.DOCUMENT_FRAGMENT_NODE */) {
selnode = selnode.firstChild;
}
node.insertBefore(toBeInserted, node.childNodes[pos]);
this.selectNodeContents(selnode);
this.updateToolbar();
break;
}
} else {
return null;// this function not yet used for IE <FIXME>
}
};

[edited by: DrDoc at 7:32 pm (utc) on Jan. 21, 2006]

DrDoc

7:31 pm on Jan 21, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld! [WebmasterWorld.com] :)

Does htmlArea officially support Safari?

VisionForce

7:52 pm on Jan 21, 2006 (gmt 0)

10+ Year Member



No it doesn't. But actually, if you can just tell me how to move the cursor in a TEXTAREA, I can do the rest.

DrDoc

7:56 pm on Jan 21, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I don't know how. But I am sure those who created htmlArea would have tried, and failed. Hence, the lacking support for Safari.

VisionForce

7:57 pm on Jan 21, 2006 (gmt 0)

10+ Year Member



lol You can move the cursor in a TEXTAREA through JavaScript, I've seen it done. I just need a good code example somewhere.

DrDoc

8:32 pm on Jan 21, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You can always Google [google.com] for it, unless anyone has prior experience with this.

VisionForce

9:42 pm on Jan 21, 2006 (gmt 0)

10+ Year Member



Did that with about 50 different keywords and I can't find anything that tells me what I need to know.

DrDoc

4:33 am on Jan 22, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Do you remember the place where you saw it done in Safari?

VisionForce

1:06 pm on Jan 22, 2006 (gmt 0)

10+ Year Member



I found this but I don't know if it works in Safari:
//myField accepts an object reference, myValue accepts the text strint to add
function insertAtcursor(myField, myValue) {

if (document.selection) {
myField.focus();

//in effect we are creating a text range with zero
//length at the cursor location and replacing it
//with myValue
sel = document.selection.createRange();
sel.text = myValue;
}

else if (myField.selectionStart ¦¦ myField.selectionStart == '0') {

//Here we get the start and end points of the
//selection. Then we create substrings up to the
//start of the selection and from the end point
//of the selection to the end of the field value.
//Then we concatenate the first substring, myValue,
//and the second substring to get the new value.
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos)+ myValue+ myField.value.substring(endPos, myField.value.length);
} else {
myField.value += myValue;
}
}

Rambo Tribble

8:13 pm on Jan 22, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I believe you need to research the textRange and Range objects.

VisionForce

1:03 am on Jan 23, 2006 (gmt 0)

10+ Year Member



Something like this? This isn't working.

function setSelectionRange(input, selectionStart, selectionEnd) {
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
}

function setCaretToPos (input, pos) {
setSelectionRange(input, pos, pos);
}

HTMLArea.prototype._createLinkSafari = function(link) {
var editor = this;
var outparam = null;
var SafariSelect = editor._getSelection();
var textSelected;
var baseN, baseO, extentN, extentO;

if (link) outparam = {
f_href : link.getAttribute("href"),
f_title : link.title
};

this._popupDialog("link.php", function(param) {
if (!param) {
return false;
}

var userlink = "<a href=\"" + param.f_href + "\" target=_blank>";
var range;

if (SafariSelect!= "") {
userlink += SafariSelect;
baseN = SafariSelect.baseNode;
baseO = SafariSelect.baseOffset;
extentN = SafariSelect.extentNode;
extentO = SafariSelect.extentOffset;

textSelected = true;
} else {
userlink += param.f_title;
range = editor._createRange();
iLength = param.f_title.length;

textSelected = false;
}

userlink += "</a>";
//var range = this._createRange(SafariSelect);
//range.htmlText = userlink;

// I think editor._wordClean(); will work here.
editor._doc.execCommand("InsertText", false, "");
editor.insertHTML(userlink);

//selectString(this, SafariText);
setCaretToPos(this, baseO + extentO)

// select new text.
//if (textSelected == true) {
//var sel = this._getSelection();
//var range = this._createRange(sel);
//range.setStart(baseN, baseO);
//range.setEnd(extentN, extentO);
//}
}, outparam);
};