Click here to Skip to main content
12,998,759 members (74,092 online)
Click here to Skip to main content
Articles » Web Development » ASP.NET » Howto » Downloads

Stats

31.6K views
752 downloads
12 bookmarked
Posted 16 Dec 2010

A Plugin for CKEditor With Dynamic Data

, 16 Dec 2010
With JavaScript and a bit of ASP.NET, it is possible to create a plugin for CKEditor that allows users to select from items drawn from a database.
CKEditor_Plugin
wwwroot
App_Data
ckeditor
plugins
staff_links
scripts
/*
    This plugin for CKEditor is provided AS IS, with no warranty or guarantee of any kind.
    To see the article associated with this code, please visit 
*/

(function()
{    
    var pluginName = 'staff_links'; 
    var menuName = 'StaffLinks';
    var staffUrl = '/Staff/Pages/DisplayPage.aspx';
    var delim = '~';
    
	CKEDITOR.plugins.add( pluginName,
	{
        requires : ['richcombo'],
        
		init : function( editor )
		{
		    editor.ui.addRichCombo(menuName, 
		        {
		            label : 'Personnel', // The text that appears in the richcombo when nothing is selected
		            
		            title : 'Insert a link to a staff page.', // The control's tooltip
		            
		            multiSelect: false, // Only one item can be selected at a time
		            
		            panel: { // This is necessary
                        css: [CKEDITOR.getUrl(editor.skinPath + 'editor.css')].concat(editor.config.contentsCss)
                    },
                    
		            init : function () { // Called only on the first drop-down
                        if (editor.StaffData && editor.loadXMLDoc) {
                            var xml = editor.loadXMLDoc(editor.StaffData);
                            var nodes=xml.selectNodes( 'Personnel/Person' ); // XPath to Person elements
                            for ( var i = 0 ; i < nodes.length ; i++ ) {
                                var Person = nodes[i];
                                
                                var id = Person.getAttribute('id');
                                var firstName = Person.getAttribute('firstName');
                                var lastName = Person.getAttribute('lastName');
                                var FirstLast = firstName + ' ' + lastName;
                                var LastFirst = lastName + ', ' + firstName;
                                this.add(id + delim + FirstLast, LastFirst, LastFirst);                              
                            }
                        }
		            },
		            
		            onClick : function(value) {
		                var item = value.split(delim);
		                var id = item[0];
		                var name = item[1];
		                var v = "<a href='" + staffUrl + "?id=" + id + "'>" + name + "</a>";
		                
		                editor.fire('saveSnapshot');
		                editor.insertHtml(v);
		            }		            
		        })
		}		
	});

})();

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Gregory Gadow
Software Developer (Senior)
United States United States
Gregory Gadow is currently a student at Central Washington University, studying for a B.S. in Actuarial Science with plans to graduate in June, 2019. He has been writing code for almost 30 years in more than a dozen programming languages. Previously, he worked for a mid-size brokerage firm as the company's programming department doing VB6, VB.Net, ASP, HTML, XML and SQL. He also held the Series 7 and Series 66 brokerage licenses.

You may also be interested in...

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170622.1 | Last Updated 16 Dec 2010
Article Copyright 2010 by Gregory Gadow
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid