[Solved] CK Editor Woes

[encho]

I have few issues with CKEditor customisation. PW 3.0.68 here.

First, I wish to have custom styles in the bar and I have followed the instructions here. However, my styles still do not appear. Is there a field that needs to be enabled as well and where?

Second, when inserting images with pwimage plugin there are style names that I wish to change, for example align_left to uk-align-left. I have copied plugin from wire folder to site, as instructed in 'plugins' section of field input properties. I have changed the styles, but now when aligning image none of the styles are there (not even the original). When I look at the source code, there is no 'class' attribute, although it still respects 'alt' attribute that can be changed via plugin.

Any help appreciated.

[encho]

As pictures speak thousand words, here it is nicely illustrated

And plugin:

(function() {
	
	CKEDITOR.plugins.add('pwimage', {
		
		requires: 'dialog',
		
		init: function(editor) {
			
			var pluginName = 'pwimage';
			
			// These are the allowed and required elements & attributes for images. 
			// It should clean all other classes but hidpi and three align classes that are generated by ProcessWire
			var allowed = 
				'img[alt,id,!src,title,width](uk-align-left,uk-align-center,uk-align-right,hidpi,align-left,align-center,align-right);' + 
				'a[!href];' + 
				'figure{width}(uk-align-left,uk-align-center,uk-align-right,hidpi,align-left,align-center,align-right);' + 
				'figcaption;';
			var required = 'img[alt,src]';

 

[szabesz]

39 minutes ago, encho said:

Is there a field that needs to be enabled as well and where?

Regarding your first issue:

and in mystyles.js:

CKEDITOR.stylesSet.add( 'mystyles', [
 { name: 'Warning Paragraph', element: 'p', attributes: {'class': 'uk-alert-warning', 'data-uk-alert': ''} },
 { name: 'Success Paragraph', element: 'p', attributes: {'class': 'uk-alert-success', 'data-uk-alert': ''} }
]);

This setup works for me in ProcessWire 3.0.62. Is it what you are looking for?

Also, something like this is my config-body.js:

I have not yet worked with contents.css/contents-inline.css, it is still on my todo list...

 

Edited July 23, 2017 by szabesz
typo

[SamC]

I do something similar to @szabesz but I found that that I had to use a different name (anything other than 'mystyles') to get this working. 

Whatever I did, the original one at:

/wire/modules/inputfield/inputfieldCKEditor/mystyles.js

would always take precedence over my custom one at:

/site/modules/InputfieldCKEditor/mystyles.js

So for my body field found at:

Admin > SetupFields > Edit Field: body > [select input tab]

...I did this:

...and in mystyles.js:
 

/**
 * mystyles.js
 */
CKEDITOR.stylesSet.add( 'customstyles', [ // <<<< MY CUSTOM NAME
    { name: 'Generic List', element: 'ul', attributes: { 'class': 'generic-list'} },
    { name: 'Inline Code', element: 'code' }, 
    { name: 'Inline Quotation', element: 'q' },
    { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'align_left' } },
    { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'align_right' } },
    { name: 'Centered Photo', element: 'img', attributes: { 'class': 'align_center' } }, 
    { name: 'Small', element: 'small' },
    { name: 'Deleted Text', element: 'del' },
    { name: 'Cited Work', element: 'cite' }
] );

Now I can create a list in CKeditor, then once I select this newly created list, an extra option is now in the styles dropdown to let me add a class of 'generic-list' that persists after page save without being stripped out. As I said, I tried many combinations and it just wouldn't work unless I didn't use the term 'mystyles'.

1 hour ago, encho said:

However, my styles still do not appear. Is there a field that needs to be enabled as well and where?

Regarding that, like in my example, my custom class only appears in that dropdown after I've actually selected a list.

1 hour ago, encho said:

Second, when inserting images with pwimage plugin there are style names that I wish to change, for example align_left to uk-align-left.

Regarding this part, if you get the first part above working (i.e. a custom mystyles.js working), you can then chose whatever class names you want for the image align.

[encho]

@szabesz @SamC Thanks to both of you. I did what you were suggesting, but my menu was still not there. Only then I realised 'Styles' did not appear in CK Editor toolbar section. I know I had it in PW 2.* but this is probably default on 3 series.

I am still looking for solution on editing 'pwimage' plugin's styles.

[Robin S]

On 24/07/2017 at 1:55 AM, encho said:

Second, when inserting images with pwimage plugin there are style names that I wish to change, for example align_left to uk-align-left.

The class names are defined in the config for the Page Edit Image module (ProcessPageEditImageSelect).

[SamC]

5 hours ago, Robin S said:

The class names are defined in the config for the Page Edit Image module (ProcessPageEditImageSelect).

@Robin S I just checked this out and confused now as to where the mystyles.js fits in with this. Could you elaborate please?

[encho]

12 hours ago, Robin S said:

The class names are defined in the config for the Page Edit Image module (ProcessPageEditImageSelect).

You're the man! I had no idea that setting exists. I was trying to modify the plugin directly and what not, but thanks to you (and of course Ryan) it is so much more convenient now.

[Robin S]

14 hours ago, SamC said:

@Robin S I just checked this out and confused now as to where the mystyles.js fits in with this. Could you elaborate please?

I don't think these classes are related to anything you may or may not have defined in mystyles.js. The mystyles.js file is for populating the Styles dropdown in the CKEditor toolbar. The classes defined in the Page Edit Image module config relate only to the three alignment buttons in the module modal:

[SamC]

@Robin S ah I see, I've never used that. Thanks for the info.