NicEdit link creation doesn't work in IE 8 and FireFox if text wasn't selected

Question

I have a problem with nicEdit link creation tool in IE and Firefox.

In general, I think the problem is related to the execCommand in IE and FireFox. It seems document doesn't get updated after execCommand executes.

This is an example of my problem with nicEdit create link command.

if(!this.ln) {
        var tmp = 'javascript:nicTemp();';
        this.ne.nicCommand("createlink",tmp);
        this.ln = this.findElm('A','href',tmp);
        // set the link text to the title or the url if there is no text selected
        alert(this.ln);
        if (this.ln.innerHTML == tmp) {
            this.ln.innerHTML = this.inputs['title'].value || url;
        };
    }

The code above is called when no text is selected, Chrome returns 'javascript:nicTemp()' for the alert(this.ln), while IE 8 and Firefox return 'undefined', so the next line after the alert encounters an error in IE and Firefox.

it seems findElem can't find the newly created link by nicCommand which in turn calls execCommand

I had similar problems when I try to find and modify tags created with execCommand, it seems the dom isn't updated to include them.

Am I right? How can I solve this problem? how can I force the document to be updated ....

please help

Answer 1

my trick for nicEdit, in the situation when no text is selected, is to paste the title given via the Add Link form into the document and select it, then the rest code works as it works when a text is selected.

I used the function pasteHtmlAtCaret described in the following link to paste the title

Insert html at caret in a contenteditable div

this.removePane();
var url = this.inputs.href.value;
var selected = getSelected();
var B= 'javascript:nicTemp()';
if (selected == '')
{
    var B = url;
    pasteHtmlAtCaret(this.inputs['title'].value || url,true);
}                   
if(!this.ln){
    this.inputs.title.value;this.ne.nicCommand("createlink",B);
    this.ln=this.findElm("A","href",B)
}

the getSelected is also a simple function as below

function getSelected()
{
    if (document.selection)
        return document.selection.createRange().text;
    else
        return window.getSelection();
}

Answer 2

Ahmad, just use this variation of the "submit" function to avoid the "insert/edit" problem with the link, it worked for me:

submit : function(e) {
    var url = this.inputs['href'].value;
    if(url == "http://" || url == "") {
        alert("Introduce una URL valida para crear el Link.");
        return false;
    }
    this.removePane();

    if(!this.ln) {
        //**************** YOUR CHANGE WITH A BIT OF VARIATION **************
        var selected = this.getSelected();
        var tmp = 'javascript:void(0)';
        if (selected == '') {
            tmp = url;
            this.pasteHtmlAtCaret(this.inputs['title'].value || tmp, true);
        }
        //**************** END OF YOUR CHANGE WITH A BIT OF VARIATION **************

        this.ne.nicCommand("createlink",tmp);
        this.ln = this.findElm('A','href',tmp);

        // set the link text to the title or the url if there is no text selected
        if (this.ln.innerHTML == tmp) {
            this.ln.innerHTML = this.inputs['title'].value || url;
        };
    }

    if(this.ln) {
        var oldTitle = this.ln.title;
        this.ln.setAttributes({
            href: this.inputs['href'].value,
            title: this.inputs['title'].value,
            target: '_blank'
        });
        // set the link text to the title or the url if the old text was the old title
        if (this.ln.innerHTML == oldTitle) {
            this.ln.innerHTML = this.inputs['title'].value || this.inputs['href'].value;
        };
    }
}

Answer 3

    this.removePane();
            var url = this.inputs['href'].value;
            var selected = getSelected();
            var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
            var tmp = "";
            if(isChrome == true){
                tmp=url;
            }
            else{tmp='javascript:nicTemp()'}
            if (selected == '' && isChrome == false)
            {
                pasteHtmlAtCaret(this.inputs['title'].value || url,true);
            }
            if (!this.ln) {
                //var tmp = this.inputs['title'].value == "" ? this.inputs['href'].value : this.inputs['title'].value;
                this.ne.nicCommand("createlink", tmp);
                this.ln = this.findElm('A', 'href', tmp);
            }


    function getSelected()
    {
        if (document.selection)
            return document.selection.createRange().text;
        else
            return window.getSelection();
    }

    function pasteHtmlAtCaret(html) {
        var sel, range;
        if (window.getSelection) {
            // IE9 and non-IE
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();

                // Range.createContextualFragment() would be useful here but is
                // non-standard and not supported in all browsers (IE9, for one)
                var el = document.createElement("div");
//create a link format
                el.innerHTML = '<a href="'+ html +'" title="" target="_blank">'+ html +'</a>';
                var frag = document.createDocumentFragment(), node, lastNode;
                while ( (node = el.firstChild) ) {
                    lastNode = frag.appendChild(node);
                }
                range.insertNode(frag);

                // Preserve the selection
                if (lastNode) {
                    range = range.cloneRange();
                    range.setStartAfter(lastNode);
                    range.collapse(true);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
        } else if (document.selection && document.selection.type != "Control") {
            // IE < 9
            document.selection.createRange().pasteHTML(html);
        }
    }