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

score 2 · Accepted Answer · edited May 23 '17 at 12:01

2

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();
}

edited May 23 '17 at 12:01

Community

1
1

answered Aug 24 '13 at 18:23

Ahmad

8,811
11
76
141

@Cabuxa.Mapache I remember it worked for me but when you want to modify a link it insert the title again in the url, but i remember you need to check this.ne to see if its a insert command or edit command and solve this issue – Ahmad Apr 05 '14 at 10:29
@Cabuxa.Mapache plus, the author of the master branch of the editor on GetHub alleges it has no problem in pure install and for English language, as I checked they are right, but I don't know how the mentioned problem emerged for my application, did you have the same problem and the solution worked for you? – Ahmad Apr 05 '14 at 10:31

score 1 · Answer 2 · answered Apr 07 '14 at 06:53

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;
        };
    }
}

score 0 · Answer 3 · answered Jan 10 '17 at 07:09

    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);
        }
    }

Thank you for your answer. An answer should not contain only code, but also an explanation of the code and how your code solves the OP:s problem. Thank you! — AT82, Jan 10 '17 at 07:28

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

3 Answers3