javascript - 如何在自定义图标的帮助下将自定义链接应用于CKEditor中的现有文本

我正在CKEditor上工作，想在工具栏上添加一个新图标，然后在单击新添加的图标时打开一个对话框。单击后，应打开一个框，其中将显示数据库中的链接。 When I click on any link from the dialogue box that link should apply on that selected text。

最佳答案

最近，我研究了这种类型的需求。这正是您所需要的。
请按照以下步骤操作：

步骤1.在CKEditor的plugin文件夹中创建一个名为'trackinglink'的文件夹，然后在'trackinglink'文件夹中创建一个plugin.js文件，并将所有代码粘贴到其中。

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

步骤2.从CKEditor打开config.js文件。
步骤3.添加“ config.extraPlugins ='trackinglink';”。
第4步。在收费栏选项上添加“ TrackingLink”文本。
步骤5。对于步骤3和4，请从屏幕截图中获取帮助。

config.extraPlugins的链接：