Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » ASP.NET » Howto » Downloads
 
Add your own
alternative version

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.zip
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 lives in Seattle, Washington and has been writing code for almost 25 years in more than a dozen programming languages. He works for a mid-size brokerage firm and holds the Series 7 and Series 66 brokerage licenses, but much prefers working as the company's programming department doing VB6, VB.Net, ASP, HTML, XML and SQL.

| Advertise | Privacy | Mobile
Web04 | 2.8.140814.1 | Last Updated 16 Dec 2010
Article Copyright 2010 by Gregory Gadow
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid