Search code examples
javascriptjqueryckeditorfckeditor

ckeditor - can not edit inserted links


I'm using the ckeditor in my web-app.

When i try to edit inserted links using the context-menu or double-click, the URL input-field appears empty.

My inserted link looks like this one:

<a data-cke-saved-href="www.google.de" href="www.google.de">www.google.de</a>

How it should work - have a look here: ckeditor demo - edit inserted links

Thank's for help

UPDATE

ckeditor config.js

 /**
 * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

// The following value defines which File Browser connector and Quick Upload
// "uploader" to use. It is valid for the default implementaion and it is here
// just to make this configuration file cleaner.
// It is not possible to change this value using an external file or even
// inline when creating the editor instance. In that cases you must set the
// values of LinkBrowserURL, ImageBrowserURL and so on.
// Custom implementations should just ignore it.
var _FileBrowserLanguage    = 'asp' ;   // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage    = 'asp' ;   // asp | aspx | cfm | lasso | php

// Don't care about the following two lines. It just calculates the correct connector
// extension to use for the default File Browser (Perl uses "cgi").
var _FileBrowserExtension = _FileBrowserLanguage == 'perl' ? 'cgi' : _FileBrowserLanguage ;
var _QuickUploadExtension = _QuickUploadLanguage == 'perl' ? 'cgi' : _QuickUploadLanguage ;


CKEDITOR.editorConfig = function( config ) {


    config.contentsCss = CKEDITOR.basePath + 'css/editorarea.css' ;
    config.defaultLanguage = 'de' ;
    config.contentsLangDirection = 'ltr';

    config.toolbarGroups = [
        { name: 'basicstyles', groups: [ 'Bold', 'Italic', 'Underline'] },
        { name: 'paragraph', groups: [ 'list', 'indent' ] },
        { name: 'links', groups: [ 'links' ] },
        { name: 'tools', groups: [ 'Maximize' ] },
        { name: 'insert', groups: [ 'insert' ] },
        { name: 'document', groups: [ 'mode', 'doctools', 'document' ] }
    ];


    config.filebrowserBrowseUrl = 'mycustombrowser-url';

    config.removeButtons = 'Iframe,Anchor,Save,NewPage,Preview,Print,Templates,Form,Checkbox,TextField,Textarea,Select,Button,ImageButton,HiddenField,Radio,Strike,Language,BidiRtl,BidiLtr,Image,Flash,Smiley,SpecialChar,PageBreak,Styles,Format,Font,FontSize,TextColor,BGColor,ShowBlocks,About,Blockquote,CreateDiv,Indent,Outdent,Subscript,Superscript,RemoveFormat,Find,Replace,SelectAll';


    config.smiley_path  = CKEDITOR.basePath  + 'images/smiley/msn/' ;
    config.smiley_images = ['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
    config.smiley_columns = 8;
    config.filebrowserWindowHeight = CKEDITOR.config.height  * 0.7 ;        // 70%
    config.filebrowserWindowWidth = CKEDITOR.config.width * 0.7 ;       // 70%;
};

CKEDITOR.on( 'dialogDefinition', function( ev ) {

    var dialogName = ev.data.name; 
    var dialogDefinition = ev.data.definition; 
    var dialog = CKEDITOR.dialog.getCurrent();

    if(dialogName == 'link') { 

           dialogDefinition.onLoad = function ( ) { 
            //var dialog = CKEDITOR.dialog.getCurrent();
            //elem = dialog.getContentElement('info','protocol'); 
            //elem.default = '<andere>';
        }; 

        dialogDefinition.onShow = function () { 
            dialog = CKEDITOR.dialog.getCurrent();
            //dialog.hidePage( 'target' ); // via config 
            //dialog.hidePage( 'advanced' ); // via config 
            elem = dialog.getContentElement('info','anchorOptions');    
            elem.getElement().hide();
            elem = dialog.getContentElement('info','emailOptions'); 
            elem.getElement().hide();
        }; 
    }

});

Implementation:

<textarea type="text" name="ArticleTextPart_text" style="height:200px;">{=ArticleTextPart_text}</textarea>

Replacement- JS-Function:

function replaceTextAreasByWYSIWYGEditor() {
    var firstCK = null;
    var allTextAreas = document.getElementsByTagName("textarea");
    for (var i=0; i < allTextAreas.length; i++) {
        var cssClasses = allTextAreas[i].className;     
        if (cssClasses && cssClasses.indexOf("nowysiwyg") >= 0) {
            continue;
        }
        var name = allTextAreas[i].id;
        // alert (name);
        if (!name) {
            name = allTextAreas[i].name;
        }
        var height = allTextAreas[i].style.height;              
        var width = allTextAreas[i].style.width;
        var tabix = allTextAreas[i].getAttribute("tabindex");

        editor = CKEDITOR.instances[name];
        if (editor) { editor.destroy(true); }

        CKEDITOR.replace( name,
        {
            basePath : pathprefix + "/pathTo/ckeditor/",
            height : ((!height) ?  100 : height),
            width : ((!width) ?  607 : width),
            toolbar : ((fckmode != null && fckmode == 'expert') ?  "Default" : "Basic"),
            toolbarStartupExpanded : true,
            resize_enabled : false,
            removePlugins : 'elementspath'
        });

        editor = CKEDITOR.instances[name];

        if (tabix == 1) {
            firstCK = editor;
        }
    }
    if (firstCK != null) {
        firstCK.Focus();
    }
}

Web-Inspector

ckeditor - "edit link" context-menu link:

<a id="cke_133" class="cke_menubutton cke_menubutton__link cke_menubutton_off cke_menubutton__link" href="javascript:void('Link bearbeiten')" title="Edit link" tabindex="-1" _cke_focus="1" hidefocus="true" role="menuitem" aria-haspopup="false" aria-disabled="false" onmouseover="CKEDITOR.tools.callFunction(109,3);" onmouseout="CKEDITOR.tools.callFunction(110,3);" onclick="CKEDITOR.tools.callFunction(111,3); return false;"><span class="cke_menubutton_inner"><span class="cke_menubutton_icon"><span class="cke_button_icon cke_button__link_icon" style="background-image:url('http://www.mywww.com/icons.png?t=FACH');background-position:0 -1248px;background-size:auto;"></span></span><span class="cke_menubutton_label">Edit link</span></span></a>

Solution

  • I figure out, updating the ckeditor to version 4.5.10 (latest version) solved the issue.