Ckeditor does not print

Community Driven Extensions Project
Post Reply
jos-morales
Posts: 3
Joined: 27 Jan 2023, 09:51

02 Feb 2023, 10:18

Hi everyone.

I have created a custom config file in ckeditor with a custom toolbar, but de "Print" and "Preview" button does not open the print dialog.

This is my toolbar configuration:

config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];

config.removeButtons = 'PasteText,PasteFromWord,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Blockquote,CreateDiv,BidiLtr,BidiRtl,Language,Link,Unlink,Anchor,Flash,Smiley,Iframe,ShowBlocks,About';

Any idea to solve this?

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

03 Feb 2023, 14:05

PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

jos-morales
Posts: 3
Joined: 27 Jan 2023, 09:51

05 Feb 2023, 14:39

Thanks Melloware.

If I add your code the print function work fine but if I add a custom config path like below

Code: Select all

customConfig="${request.contextPath}/resources/ayuntamiento/js/ckeditor_config.js
in the browser's javascript console getting the following error:

Code: Select all

Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')
    at Object.CKEDITOR_GETURL (primefaces-extensions.js.xhtml?ln=primefaces-extensions&v=8.0:6:173)
    at d.getUrl (ckeditor.js.xhtml?ln=primefaces-extensions&v=8.0:8:421)
    at a.<anonymous> (ckeditor.js.xhtml?ln=primefaces-extensions&v=8.0:1437:32)
    at a.r (ckeditor.js.xhtml?ln=primefaces-extensions&v=8.0:10:246)
    at a.<anonymous> (ckeditor.js.xhtml?ln=primefaces-extensions&v=8.0:12:91)
    at CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js.xhtml?ln=primefaces-extensions&v=8.0:13:286)
    at Object.createPreview (ckeditor.js.xhtml?ln=primefaces-extensions&v=8.0:1172:30)
    at CKEDITOR.command.exec (ckeditor.js.xhtml?ln=primefaces-extensions&v=8.0:1173:315)
    at CKEDITOR.command.exec (ckeditor.js.xhtml?ln=primefaces-extensions&v=8.0:215:215)
    at a.execCommand (ckeditor.js.xhtml?ln=primefaces-extensions&v=8.0:288:403)[/code

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

05 Feb 2023, 17:42

Hmmm make sure you compare custom config with the real config being passed?
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

jos-morales
Posts: 3
Joined: 27 Jan 2023, 09:51

03 Mar 2023, 10:13

Hi Melloware and thanks for answering.

I'm not sure with the real config being passed to custom config but I still can't print with this setting.

This is my code:

Code: Select all

<pe:ckEditor id="editorCK" width="100%" height="600px" value="#{atestadosBean.texto}"
 		 contentsCss="${request.contextPath}/resources/ayuntamiento/js/miestilo.css" 
 		 customConfig="${request.contextPath}/resources/ayuntamiento/js/ckeditor_config.js" 
 		 skin="office2013">
</pe:ckEditor> 
code of ckeditor_config.js

Code: Select all

CKEDITOR.editorConfig = function(config) {
	config.templates_replaceContent = false;
	config.templates_files = ["../../../resources/ayuntamiento/js/mytemplates.js"];
	config.toolbarGroups = [
		{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
		{ name: 'forms', groups: [ 'forms' ] },
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
		{ name: 'links', groups: [ 'links' ] },
		{ name: 'insert', groups: [ 'insert' ] },
		{ name: 'styles', groups: [ 'styles' ] },
		{ name: 'colors', groups: [ 'colors' ] },
		{ name: 'tools', groups: [ 'tools' ] },
		{ name: 'others', groups: [ 'others' ] },
		{ name: 'about', groups: [ 'about' ] }
	];
	config.removeButtons = 'PasteText,PasteFromWord,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Blockquote,CreateDiv,BidiLtr,BidiRtl,Language,Link,Unlink,Anchor,Flash,Smiley,Iframe,ShowBlocks,About';
};

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

03 Mar 2023, 14:34

All I know is it works fine on the Showcase and that is the code I have to go by.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

nehakakar
Posts: 5
Joined: 04 Jul 2023, 12:41
Location: India
Contact:

26 Aug 2023, 12:50

Your current toolbar configuration seems to have removed many buttons. Add the necessary buttons to your toolbar configuration:

Code: Select all

config.toolbarGroups = [
    // ... other groups
    { name: 'clipboard', groups: ['clipboard', 'undo'] },
    { name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing'] },
    { name: 'forms', groups: ['forms'] },
    { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
    { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph'] },
    { name: 'links', groups: ['links'] },
    { name: 'insert', groups: ['insert'] },
    { name: 'styles', groups: ['styles'] },
    { name: 'colors', groups: ['colors'] },
    { name: 'tools', groups: ['tools'] },
    { name: 'others', groups: ['others'] },
    { name: 'about', groups: ['about'] },
    { name: 'document', groups: ['mode', 'document', 'doctools'] }, // Add this line
];
Try this

jepsar
Posts: 166
Joined: 03 Sep 2014, 11:41
Location: NL / BE
Contact:

01 Sep 2023, 13:17

Note that CKEditor has been replaced with SunEditor. I wouldn't go to crazy with customizing CKEditor if you want to keep upgrading PFE.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub: https://github.com/jepsar
Spotify: 90s Rave, Acid, Trance, House

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests