display the link in ckeditor

Question

I have integrate the CKEditor and CKFinder by referring documentation from their site.

In that, I successfully uploaded different types of docs, pdf and images. But every time when I upload the document the link generated is like

/Project_folder/files/0321832051(3).pdf

but I have to just display the file name and on that file there should be a link. eg 0321832051(3).pdf when I click on that link it should be open. I searched on google but I didn't get the solution for it. Did any one tried it. Please let me know if any one knows.

For this I am using ckeditor and ckfinder for asp.net

Did any one know this?

Answer 1

Replace "editor1" with your editor name in the hack below or hack into whatever system you have after the CKE js has loaded. What it does is listens to dialogs closing, when it sees that the link dialog is being hidden and that the current selection begins with an <a...> link, it takes the contents of said link and cuts it from the final slash.

var editor = CKEDITOR.instances.editor1;

editor.on('dialogHide', function(e) {
    if(e.data.getName() === "link") {
        var sel = editor.getSelection();
        var se = sel.getStartElement();
        var text = se.getText();
        if(se.getName() === "a") {
            var newtext = text.slice(text.lastIndexOf('/')+1);
            se.setText(newtext);
        }
    }     
});

It's complicated and disgusting but seems to work. Be warned, I have not tested this if it breaks anything else like anchoring. More checks would be better, like checking if newtext actually gets a value > 1 and only then replacing.

Answer 2

I think you should manually wrap those in html PREVIEW as

`<a href='/folder/uploaded_files/abc.pdf'>SomeText</a>.`

That should do the trick

Answer 3

With CKEDITOR you can do it like this:

string mytext = "hello world :)";
CKEDITOR.instances.editor1.insertHtml( '<a href="mylink">' + mytext + '</a>' );

Answer 4

With CKEDITOR you can also do it like this using style:

var attributes = Array();
attributes["href"] = link;   //your link
var style = new CKEDITOR.style( { element : 'a', attributes : attributes } );
style.type = CKEDITOR.STYLE_INLINE;
style.apply(editor.document);