function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Lakshmi Prasanna 9Lakshmi Prasanna 9 

ckeditor

hi,
 I write a plugin for ck editor.In this based on first selector second selector must be changed.this is not working properly can any body help me.

/**
 * The relatedToFields dialog definition.
 *
 * Created out of the CKEditor Plugin SDK:
 * http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1
 */

// Our dialog definition.
CKEDITOR.dialog.add( 'recipientsDialog', function( editor ) {
function addOption( combo, optionText, optionValue, documentObject, index )
  	{
 		combo = getSelect( combo );
 		var oOption;
  		if ( documentObject )
  			oOption = documentObject.createElement( "OPTION" );
  		else
  			oOption = document.createElement( "OPTION" );
  
  		if ( combo && oOption && oOption.getName() == 'option' )
  		{
  			if ( CKEDITOR.env.ie ) {
  				if ( !isNaN( parseInt( index, 10) ) )
  					combo.$.options.add( oOption.$, index );
  				else
  					combo.$.options.add( oOption.$ );
  
  				oOption.$.innerHTML = optionText.length > 0 ? optionText : '';
  				oOption.$.value     = optionValue;
  			}
  			else
  			{
  				if ( index !== null && index < combo.getChildCount() )
  					combo.getChild( index < 0 ? 0 : index ).insertBeforeMe( oOption );
  				else
  					combo.append( oOption );
  
  				oOption.setText( optionText.length > 0 ? optionText : '' );
  				oOption.setValue( optionValue );
  			}
  		}
  		else
  			return false;
  
  		return oOption;
  	}
  	function getSelect( obj )
 	{
 		if ( obj && obj.domId && obj.getInputElement().$ )				// Dialog element.
			return  obj.getInputElement();
 		else if ( obj && obj.$ )
 			return obj;
 		return false;
 	}
  
function removeAllOptions( combo )
  	{
 		combo = getSelect( combo );
  		while ( combo.getChild( 0 ) && combo.getChild( 0 ).remove() )
 		{ /*jsl:pass*/ }
 	}
	 var selectedObjectField = CKEDITOR.htmlTemplateRecipient;
	 var retObj = {

		// Basic properties of the dialog window: title, minimum size.
		title: 'Recipient Fields',
		minWidth: 400,
		minHeight: 200,
		
		// Dialog window contents definition.
		contents: [
			{
				// Definition of the Basic Settings dialog tab (page).
				id: 'insert-field',
				label: 'Recipient Fields',
				// The tab contents.
				elements: [
					{
						type: 'select',
						id: 'level1-fields',
						label: 'Select object',
						items: objectFields,
						onChange : function() {
							var dialog = this.getDialog(),
     				 		values = dialog.getContentElement( 'insert-field','level2-fields' ), 
      						//selectedSet = this.getValue();
		
		      		 function fetchListOfFields1(s) {
     				    alert( 'Current value11: '+s);

    				  optionsNames = new Array();
					 AllObjectsinOrg.getFldList(s,function(result, event) {
						if (event.status) {
							for(var i = 0; i< result.length; i++){
							var temp = new Array();
							temp.push(result[i]);
							optionsNames.push(temp);   
						}   
					}
					//CKEDITOR.dialog.add( 'relatedToFieldsDialog', this.path + 'dialogs/relatedToFields.js' );
					CKEDITOR.dialog.add( 'recipientsDialog',CKEDITOR.basePath + 'plugins/recipients/dialogs/recipients.js' 																);
					});
     			}
     			
     			fetchListOfFields1(this.getValue());
     			
     			 removeAllOptions( values );

   				 for ( var i = 0 ; i < optionsNames.length ; i++ )
   				 {
      				var oOption = addOption( values, optionsNames[ i ],
        			optionsNames[ i ], dialog.getParentEditor().document );
     				 if ( i == 0 )
     				 {
        				oOption.setAttribute( 'selected', 'selected' );
        				oOption.selected = true;
     				 }
    			}
  				}
  				
				
						
				},
				{
						type: 'select',
						id: 'level2-fields',
						label: 'Select field',
						 items :
  						[
    						[ '<none>', '' ]
  						]
						
				}
			  ]
			}
		],
		
		// This method is invoked once a user clicks the OK button, confirming the dialog.
		onOk: function() {
			
			// The context of this function is the dialog object itself.
			// http://docs.ckeditor.com/#!/api/CKEDITOR.dialog
			var dialog = this;

			editor.focus();
			editor.fire( 'saveSnapshot' );
			//editor.insertHtml( '{!User.'+dialog.getValueOf('insert-field','level1-fields')+'}' );
			editor.insertHtml('{!'+dialog.getValueOf('insert-field','level1-fields')+'.'+dialog.getValueOf('insert-field','level2-fields')+'}');
			editor.fire( 'saveSnapshot' );
	
		}
		
		
		
		
	};
	
	return retObj;
});



Best Answer chosen by Lakshmi Prasanna 9
Lakshmi Prasanna 9Lakshmi Prasanna 9
hi,
   my problem is solved.The new code is:In this code second list is changing based on first list.
/**
 * The relatedToFields dialog definition.
 *
 * Created out of the CKEditor Plugin SDK:
 * http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1
 */

// Our dialog definition.
CKEDITOR.dialog.add( 'recipientsDialog', function( editor ) {
 			 
function addOption( combo, optionText, optionValue, documentObject, index )
  	{
 		combo = getSelect( combo );
 		var oOption;
  		if ( documentObject )
  			oOption = documentObject.createElement( "OPTION" );
  		else
  			oOption = document.createElement( "OPTION" );
  
  		if ( combo && oOption && oOption.getName() == 'option' )
  		{
  			if ( CKEDITOR.env.ie ) {
  				if ( !isNaN( parseInt( index, 10) ) )
  					combo.$.options.add( oOption.$, index );
  				else
  					combo.$.options.add( oOption.$ );
  
  				oOption.$.innerHTML = optionText.length > 0 ? optionText : '';
  				oOption.$.value     = optionValue;
  			}
  			else
  			{
  				if ( index !== null && index < combo.getChildCount() )
  					combo.getChild( index < 0 ? 0 : index ).insertBeforeMe( oOption );
  				else
  					combo.append( oOption );
  
  				oOption.setText( optionText.length > 0 ? optionText : '' );
  				oOption.setValue( optionValue );
  			}
  		}
  		else
  			return false;
  
  		return oOption;
  	}
  	function getSelect( obj )
 	{
 		if ( obj && obj.domId && obj.getInputElement().$ )				// Dialog element.
			return  obj.getInputElement();
 		else if ( obj && obj.$ )
 			return obj;
 		return false;
 	}
  
    function removeAllOptions( combo )
  	{
 		combo = getSelect( combo );
  		while ( combo.getChild( 0 ) && combo.getChild( 0 ).remove() )
 		{ /*jsl:pass*/ }
 	}
 	function fetchListOfFields1(s,dialog,values)
{
	 //   alert( 'Current value11: '+s);
	 //apex method invocation
	 var optionsNames = new Array();
		 AllObjectsinOrgAndFeilds.getFldList(s,function(result, event) {
		 removeAllOptions( values );
		if (event.status) {
			for(var i = 0; i< result.length; i++){
			var temp = new Array();
			temp.push(result[i]);
			optionsNames.push(temp);
			// alert('values:'+optionsNames);  
			   } 
		  
		 }
		  //alert('values11:'+optionsNames.length);
		  //clear the field list values
		  
                  //alert('values:'+optionsNames.length);
   				 for ( var i = 0 ; i < optionsNames.length ; i++ )
   				 {
   				 //add the new values
      				var oOption = addOption( values, optionsNames[ i ],
        			optionsNames[ i ], dialog.getParentEditor().document );
     				 if ( i == 0 )
     				 {
        				oOption.setAttribute( 'selected', 'selected' );
        				oOption.selected = true;
     				 }
     				 // alert('option:'+oOption);
    			}
	
	});
}
 	
	 var selectedObjectField = CKEDITOR.htmlTemplateRecipient;
	 var retObj = {

		// Basic properties of the dialog window: title, minimum size.
		title: 'Recipient Fields',
		minWidth: 400,
		minHeight: 200,
		
		// Dialog window contents definition.
		contents: [
			{
				// Definition of the Basic Settings dialog tab (page).
				id: 'insert-field',
				label: 'Recipient Fields',
				// The tab contents.
				elements: [
					{
						type: 'select',
						id: 'level1-fields',
						label: 'Select object',
						items: objectFields,
						onChange : function() {
							var dialog = this.getDialog(),
     				 		values = dialog.getContentElement( 'insert-field','level2-fields' );
      						//	call the function for change values of second list              			
     						fetchListOfFields1(''+this.getValue(),dialog,values);  			
  						}	  						 	
					},
					{
						type: 'select',
						id: 'level2-fields',
						label: 'Select field',
						 items :
 								 [
    								[ '<none>', '' ]
  								],  								
  					}
			  	]
			}
		],
		
		// This method is invoked once a user clicks the OK button, confirming the dialog.
		onOk: function() {
			
			// The context of this function is the dialog object itself.
			// http://docs.ckeditor.com/#!/api/CKEDITOR.dialog
			var dialog = this;

			editor.focus();
			editor.fire( 'saveSnapshot' );
			//editor.insertHtml( '{!User.'+dialog.getValueOf('insert-field','level1-fields')+'}' );
			  
			   editor.insertHtml('{!'+dialog.getValueOf('insert-field','level1-fields')+'.'+dialog.getValueOf('insert-field','level2-fields')+'}');
			   values = dialog.getContentElement( 'insert-field','level2-fields' );
			   removeAllOptions( values ); 
			editor.fire( 'saveSnapshot' );
	
		}
		
	};
	
	return retObj;
});

All Answers

Sonam_SFDCSonam_SFDC
Hi Laxmi,

How is this ckeditor linked to Salesforce, could you please elaborate on the use case so the community mebers understand the usage and get the context of the issue. 
Lakshmi Prasanna 9Lakshmi Prasanna 9
hi sonam,

  we have to down load the ckeditor,and then we have to add 'ckeditor.zip' as static resource.Then we have develop one visualforce page in that page we have to include script
<apex:includescript value="{!URLFOR($Resource.ckeditor, 'ckeditor/ckeditor.js')}"/>
<apex:form id="ckeditorform">
      <div>
    <apex:inputtextarea id="editor1" richtext="false"  styleclass="ckeditor"/></div>
  
    </apex:form>
If we want to add our own plugins then follow the link given below:

http://theholyjava.wordpress.com/2011/04/04/how-to-customize-ckeditor-with-your-own-plugins-skins-configurations/

If you want to add apex logic,make the class as global and methods are also global and static and add annotation '@RemoteAction' before the method signature
global class AllObjectsinOrgAndFeilds {

    
    @RemoteAction
     global static List<String> getObjectList()
     {
     }
}

If you want call this method in java Script:
AllObjectsinOrgAndFeilds.getObjectList(function(result, event) {
			if (event.status) {
				for(var i = 0; i< result.length; i++){
				var temp = new Array();
					temp.push(result[i]);
					objectFields.push(temp);   
				}   
			}
		});

Here,result will stores the List returned by the apex class.
Lakshmi Prasanna 9Lakshmi Prasanna 9
hi,
   my problem is solved.The new code is:In this code second list is changing based on first list.
/**
 * The relatedToFields dialog definition.
 *
 * Created out of the CKEditor Plugin SDK:
 * http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1
 */

// Our dialog definition.
CKEDITOR.dialog.add( 'recipientsDialog', function( editor ) {
 			 
function addOption( combo, optionText, optionValue, documentObject, index )
  	{
 		combo = getSelect( combo );
 		var oOption;
  		if ( documentObject )
  			oOption = documentObject.createElement( "OPTION" );
  		else
  			oOption = document.createElement( "OPTION" );
  
  		if ( combo && oOption && oOption.getName() == 'option' )
  		{
  			if ( CKEDITOR.env.ie ) {
  				if ( !isNaN( parseInt( index, 10) ) )
  					combo.$.options.add( oOption.$, index );
  				else
  					combo.$.options.add( oOption.$ );
  
  				oOption.$.innerHTML = optionText.length > 0 ? optionText : '';
  				oOption.$.value     = optionValue;
  			}
  			else
  			{
  				if ( index !== null && index < combo.getChildCount() )
  					combo.getChild( index < 0 ? 0 : index ).insertBeforeMe( oOption );
  				else
  					combo.append( oOption );
  
  				oOption.setText( optionText.length > 0 ? optionText : '' );
  				oOption.setValue( optionValue );
  			}
  		}
  		else
  			return false;
  
  		return oOption;
  	}
  	function getSelect( obj )
 	{
 		if ( obj && obj.domId && obj.getInputElement().$ )				// Dialog element.
			return  obj.getInputElement();
 		else if ( obj && obj.$ )
 			return obj;
 		return false;
 	}
  
    function removeAllOptions( combo )
  	{
 		combo = getSelect( combo );
  		while ( combo.getChild( 0 ) && combo.getChild( 0 ).remove() )
 		{ /*jsl:pass*/ }
 	}
 	function fetchListOfFields1(s,dialog,values)
{
	 //   alert( 'Current value11: '+s);
	 //apex method invocation
	 var optionsNames = new Array();
		 AllObjectsinOrgAndFeilds.getFldList(s,function(result, event) {
		 removeAllOptions( values );
		if (event.status) {
			for(var i = 0; i< result.length; i++){
			var temp = new Array();
			temp.push(result[i]);
			optionsNames.push(temp);
			// alert('values:'+optionsNames);  
			   } 
		  
		 }
		  //alert('values11:'+optionsNames.length);
		  //clear the field list values
		  
                  //alert('values:'+optionsNames.length);
   				 for ( var i = 0 ; i < optionsNames.length ; i++ )
   				 {
   				 //add the new values
      				var oOption = addOption( values, optionsNames[ i ],
        			optionsNames[ i ], dialog.getParentEditor().document );
     				 if ( i == 0 )
     				 {
        				oOption.setAttribute( 'selected', 'selected' );
        				oOption.selected = true;
     				 }
     				 // alert('option:'+oOption);
    			}
	
	});
}
 	
	 var selectedObjectField = CKEDITOR.htmlTemplateRecipient;
	 var retObj = {

		// Basic properties of the dialog window: title, minimum size.
		title: 'Recipient Fields',
		minWidth: 400,
		minHeight: 200,
		
		// Dialog window contents definition.
		contents: [
			{
				// Definition of the Basic Settings dialog tab (page).
				id: 'insert-field',
				label: 'Recipient Fields',
				// The tab contents.
				elements: [
					{
						type: 'select',
						id: 'level1-fields',
						label: 'Select object',
						items: objectFields,
						onChange : function() {
							var dialog = this.getDialog(),
     				 		values = dialog.getContentElement( 'insert-field','level2-fields' );
      						//	call the function for change values of second list              			
     						fetchListOfFields1(''+this.getValue(),dialog,values);  			
  						}	  						 	
					},
					{
						type: 'select',
						id: 'level2-fields',
						label: 'Select field',
						 items :
 								 [
    								[ '<none>', '' ]
  								],  								
  					}
			  	]
			}
		],
		
		// This method is invoked once a user clicks the OK button, confirming the dialog.
		onOk: function() {
			
			// The context of this function is the dialog object itself.
			// http://docs.ckeditor.com/#!/api/CKEDITOR.dialog
			var dialog = this;

			editor.focus();
			editor.fire( 'saveSnapshot' );
			//editor.insertHtml( '{!User.'+dialog.getValueOf('insert-field','level1-fields')+'}' );
			  
			   editor.insertHtml('{!'+dialog.getValueOf('insert-field','level1-fields')+'.'+dialog.getValueOf('insert-field','level2-fields')+'}');
			   values = dialog.getContentElement( 'insert-field','level2-fields' );
			   removeAllOptions( values ); 
			editor.fire( 'saveSnapshot' );
	
		}
		
	};
	
	return retObj;
});

This was selected as the best answer
Miguel Chinchilla 20Miguel Chinchilla 20
Hi friends,

This code is for visualforce page?

Has anyone done it in LWC who can share it?

Regards,

Miguel