Search code examples
ckeditorlotus-domino

InsertHtml is adding links to ckeditor in wrong place


I have integrated ckeditor 4.5.1 with domino and it is working fine with only one issue. I have added custom button which will open anoter window. The child window contains html buttons which will insert the links to editor using insertHtml or insertElement. This works well for already saved document. But if i paste the new content to the editor and insert links using my custom button window, the links adding countinuesly at one place instead of selected area. In both cases, the cursor position and range returns correct value.

function openReferenceDialog(field){
//OpenReferenceDialog(field,'DialogReference',500,500);
fieldname=field

var oEditor = eval('CKEDITOR.instances.' + fieldname);
var mySelection = oEditor.getSelection();

if (CKEDITOR.env.ie) {
    mySelection.unlock(false);
    selectedText = mySelection.getNative().createRange().text;
} else {
    selectedText = mySelection.getNative();
}
//oEditor.lockSelection(mySelection)
  range = mySelection.getRanges()[0];
var filepath=document.location.protocol+'//'+document.location.host+'/'+document.forms[0].DbName.value;
dialog=window.open(filepath + '/' + 'DialogCreateNewGraph' + '?Openform&field='+field+"&seltext="+selectedText,'win','scrollbars=1,resizable=1,width=370,height=270');
dialog.focus();

}

Inserting code in child window(outofcontent to ckeditor)

        var CKEdit = window.opener.CKEDITOR;
        var oEditor = eval('CKEdit.instances.' + window.opener.fieldname);

        var elementHtml = "<a href=\"javascript:OpenCkLink('" + url + "')\">" + txt + "</a>"                                            

        alert(window.opener.range.startOffset+"after window")
        //oEditor.insertHtml(elementHtml);
        element = CKEdit.dom.element.createFromHtml(elementHtml);
        oEditor.insertHtml(elementHtml,window.opener.range);
        oEditor.insertHtml("&nbsp;")

is there any other way to add text/links to the parent ckeditor using current position and length of the selected text. Please help to resolve the issues. Please let me know if the question is not clear.


Solution

  • First of all I would recommend upgrading the editor to latest 4.10.1 (or 4.11 which is planned to be released within few days).

    Next please see CKEditor Link plugin code and try apply the link in the same way as it was presented there - https://github.com/ckeditor/ckeditor-dev/blob/major/plugins/link/dialogs/link.js#L24-L70.

    In order to use insertElement or insertHtml you would need to try unlocking the selection or focusing the editor (or body) e.g.

    document.body.focus();
    child = window.open(path, '', 'toolbar=no,width=800,height=370,directories=no,status=yes,scrollbars=yes,menubar=no,resizable=yes');
    child.creator = self;
    

    however these methods may not work in older IE's thus the best way to do it is the same way as Link plugin does it. Basicaly you need to:

    // Get Selection
    var selection = CKEDITOR.instances.editor1.getSelection();
    // Get Range or Ranges
    var range = selection.getRanges( )[0];
    
    // You use the range to insert either text or wrap link around selected text
    // Please see Link plugin code for that.
    
    // Set some sample link attributes
    var attributes = {};
    attributes.target = '_blank';
    attributes.href = link_passed_as_ paramater;
    
    // Create new style
    var style = new CKEDITOR.style( { element: 'a', attributes: attributes } );
    style.type = CKEDITOR.STYLE_INLINE;
    
    // Apply style.
    style.applyToRange( range, CKEDITOR.instances.editor1 );