CKEditor external plugin

Community Driven Extensions Project
Post Reply
blub4ever
Posts: 2
Joined: 25 Oct 2012, 14:01

25 Oct 2012, 14:43

Hi

I have a problem with primefaces extensions CkEditor. I need a custom external plugin. I created a new jsp project and created the plugin. Everything worked so far.
My plan was to integrate this plugin into to resources-ckeditor-0.6.1.jar.
I inserted following files into the .jar:

\META-INF\resources\primefaces-extensions\ckeditor\config.js
\META-INF\resources\primefaces-extensions\ckeditor\plugins\masterProtocolImageSelector\plugin.js
\META-INF\resources\primefaces-extensions\ckeditor\plugins\masterProtocolImageSelector\ajax.js
\META-INF\resources\primefaces-extensions\ckeditor\plugins\masterProtocolImageSelector\helloWorld.html
\META-INF\resources\primefaces-extensions\ckeditor\plugins\masterProtocolImageSelector\masterProtocolImageSelector.js

If i create the editor with my custom Toolbar, it loads the plugin.js form the masterProtocolImageSelector directory. But if i click on the Button in order to open the Ifram, it doesn't load the helloWorld.html

It tries to load:
If i copy the url and change it manually to:
It's able to load the html file.
Is there another way to load an external plugin, or any other solution that can fix this problem? Has anyone had the same problem before?

config.js

Code: Select all

CKEDITOR.editorConfig = function(config) {
	
	config.extraPlugins = 'masterProtocolImageSelector';

	config.toolbar_MyToolbar = [
			{
				name : 'document',
				items : [ 'Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates' ]
			},
			{
				name : 'clipboard',
				items : [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ]
			},
			{
				name : 'editing',
				items : [ 'Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt' ]
			},
			{
				name : 'forms',
				items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ]
			},
			'/',
			{
				name : 'basicstyles',
				items : [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ]
			},
			{
				name : 'paragraph',
				items : [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter',
						'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ]
			}, {
				name : 'links',
				items : [ 'Link', 'Unlink', 'Anchor' ]
			}, {
				name : 'insert',
				items : [ 'Image', 'MasterProtocolImageSelector', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ]
			}, '/', {
				name : 'styles',
				items : [ 'Styles', 'Format', 'Font', 'FontSize' ]
			}, {
				name : 'colors',
				items : [ 'TextColor', 'BGColor' ]
			}, {
				name : 'tools',
				items : [ 'Maximize', 'ShowBlocks', '-', 'About' ]
			} ];

};

plugin.js

Code: Select all

CKEDITOR.plugins.add( 'masterProtocolImageSelector',
{
	requires : ['iframedialog'],
	init: function( editor )
	{
		
		editor.ui.addButton( 'MasterProtocolImageSelector',
				{
					label: 'Insert Timestamp',
					command: 'masterProtocolImageSelector',
					//icon: this.path + 'images/timestamp.png'
				} );	
		
		editor.addCommand('masterProtocolImageSelector', {exec: masterProtocolImageSelectorOnclick});
		
		CKEDITOR.dialog.addIframe(
	            'masterProtocolImageSelector.dlg',
	            'Hello Title',
	            this.path +"helloWorld.html",
	            400,
	            300,
	            function(){
	            }  
	     );
	}
} );



function masterProtocolImageSelectorOnclick(editor){
	dialog = editor.openDialog('masterProtocolImageSelector.dlg');
};
Best regards blub4ever
PS: I'm running Tomcat 7 with newest primefaces and primefaces-extensions version


EDIT:
While submitting this post i had an inspiration:
this.path contains following value :
so my attempt (this.path + "helloWorld.html")can't work in this environemt . As solution i could write a function which inserts the file name into the right place, or i can hardcode all links. But
is there better solution to do that? I mean if my helloWorld.html needs other files (which it does) thats not a very nice way to achieve my goal!
Best regards blub4ever
Last edited by blub4ever on 25 Oct 2012, 15:00, edited 1 time in total.

tandraschko
PrimeFaces Core Developer
Posts: 3629
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

25 Oct 2012, 14:59

If it will be openend in a iframe, be sure that primefaces-extensions.js is included. We overwrite the resource loading there.
Thomas Andraschko

PrimeFaces Developer | PrimeFaces Extensions Founder

Apache Member | PMC @ OpenWebBeans, DeltaSpike, MyFaces, BVal | Contributor @ TomEE

Blog: http://tandraschko.blogspot.de/
Twitter: https://twitter.com/TAndraschko

blub4ever
Posts: 2
Joined: 25 Oct 2012, 14:01

26 Oct 2012, 15:10

Hey
Thank your for your help!
If I include
jquery/jquery.js
primefaces.js
primefaces-extensions.js
I have all the functions I need and it works perfectly!

Best regards blub4ever

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest