I am working on CKEditor and want to add a new icon on the toolbar then I want to open a dialogue box on clicking the new added icon. After clicking it should open a box where links will be shown from database. When I click on any link from the dialogue box that link should apply on that selected text.
Asked
Active
Viewed 832 times
1
Ashwani Panwar
- 3,819
- 3
- 46
- 66
-
http://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text - get the selected text, than I guess you can just `.replace()` it right – Velimir Tchatchevsky May 16 '16 at 11:06
-
I also want links from database which would be automatically applied to the selected text. – Ashwani Panwar May 16 '16 at 11:10
-
that's what I mean by replace - replace the selected text with the link from your database, I was thinking wrapped around the same selected text – Velimir Tchatchevsky May 16 '16 at 11:12
-
And what about opening a dialog box which will show the links ? – Ashwani Panwar May 16 '16 at 11:14
-
position absolute, html and a javascript handler `.on("click"` – Velimir Tchatchevsky May 16 '16 at 11:18
1 Answers
2
Recently I have worked on this type of requirement. This is exactly what you need. Follow below steps:
Step 1. Create a folder name 'trackinglink' into plugin folder of CKEditor then create a file plugin.js into 'trackinglink' folder and paste all the codes into it.
// Just an PHP Addon that not need JavaScript include.
var htmlLinkData = '';
var trackingEditor;
var dialogObj;
var setArrow='arrow-right';
var baseurl;
CKEDITOR.plugins.add( 'trackinglink', {
init: function( editor ) {
trackingEditor = editor;
// Register the "simpleLinkDialog" command, which opens the "simpleLinkDialog" dialog.
editor.ui.addButton( 'TrackingLink', {
label: 'Insert TrackingLink',
command: 'execTrackLink',
icon: this.path + 'icons/trackinglink.png'
});
CKEDITOR.dialog.add( "insertTrackingLinkModal", function( editor )
{
return {
title : 'Pick a tracking link for this certificate',
minWidth : 400,
minHeight : 200,
contents :
[
{
id : 'general',
label : 'Settings',
elements :
[
// UI elements of the Settings tab.
{
type: 'html',
html: htmlLinkData
}
]
}
],
buttons: []
};
});
var isopen = true;
var isclose = true;
var linkId;
editor.addCommand( 'openTrackLinkModal', new CKEDITOR.dialogCommand( 'insertTrackingLinkModal' ));
editor.addCommand( 'execTrackLink', {
exec: function( editor ) {
var linkData = {};
var trackingLink='';
var user_id = angular.element(document.getElementsByClassName('edited_text')).scope().getUserId();
baseurl = angular.element(document.getElementsByClassName('edited_text')).scope().getBaseUrl();
var course_id = angular.element(document.getElementsByClassName('edited_text')).scope().course_id;
$.ajax({
type: 'POST',
url: baseurl + 'load_controller/getUserCourseShareLinkForCkeditor',
dataType: 'JSON',
data: { user_id: user_id},
success: function(response) {
for(i in response)
{
if(response[i].id == course_id) continue;
if(linkData[response[i].id] == undefined) {
linkData[response[i].id] = {name:response[i].name, links:[]};
}
linkData[response[i].id].links.push(response[i]);
}
for(val in linkData){
var tLinks='';
for(lval in linkData[val].links){
tLinks = tLinks +
"<li class='level1'>"+
"<a href=\"javascript:;\" onclick=\"selectLink('"+linkData[val].links[lval].link+"');\""+
" title=\""+ linkData[val].links[lval].link +"\">"+
linkData[val].links[lval].link_name+"</a></li>";
}
isopen = true;
isclose = true;
linkId = 'link'+val;
trackingLink += "<div id='"+linkId+"' onclick=\"managelinks('"+linkId+"');\" class='coursepanel coursepanel-default'>"+
"<div class='coursepanel-heading'>"+linkData[val].name+"</div>"+
"<div class='setarrow'></div>"+
"<div class='course-child'><ul class='tree'>"+tLinks+"</ul></div>"+
"</div>";
}
htmlLinkData = "<div class='linklist'>"+trackingLink+"</div>";
editor.execCommand('openTrackLinkModal');
}
});
}
});
}
});
function managelinks(linkId){
var parentID = document.getElementById(linkId);
var setArrow = parentID.getElementsByClassName('setarrow');
var subs = parentID.getElementsByClassName('course-child');
var correctIsVisible = subs[0].offsetHeight;
if(correctIsVisible>0){
subs[0].style.display = 'none';
setArrow[0].style.backgroundImage= "url('images/arrow-right.png')";
}
else{
subs[0].style.display = 'block';
setArrow[0].style.backgroundImage= "url('images/arrow-down.png')";
}
}
function selectLink(link){
var selectedText = trackingEditor.getSelection().getNative();
trackingEditor.insertHtml("<a href=\""+link+"\" target=\"_blank\">" + selectedText + "</a>");
CKEDITOR.dialog.getCurrent().hide();
}
Step 2. Open the config.js file from CKEditor. Step 3. Add "config.extraPlugins = 'trackinglink';". Step 4. Add "TrackingLink" text on the tollbar options. Step 5. For Step 3 and 4 get help from the screen shots.
Link for config.extraPlugins:
Pierre.Vriens
- 2,117
- 75
- 29
- 42
zainul
- 36
- 5