Jump to content

[Solved] CK Editor Woes


encho
 Share

Recommended Posts

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.

Link to comment
Share on other sites

As pictures speak thousand words, here it is nicely illustrated :)

5974acba72bd3_ScreenShot2017-07-23at14_58_12.thumb.png.922a226544e947d5c876ec998a24c411.png

5974ac96064fa_ScreenShot2017-07-23at14_59_09.thumb.png.263419b49b043b979286aefa77d0925b.png

5974ac854325f_ScreenShot2017-07-23at14_59_19.thumb.png.e362a725ae48d613bdd85bdfa9340990.png

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]';

 

Link to comment
Share on other sites

39 minutes ago, encho said:

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

Regarding your first issue:InputfieldCKEditor-mystyles.png.4b1307aea9fe08f2c0353c665bf80185.png

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 by szabesz
typo
  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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:

5974b8a3931bf_Screenshot2017-07-2315_48_38.thumb.png.6d390061b3bf17453bcefb863ede0175.png

...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.

  • Like 2
Link to comment
Share on other sites

@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.

  • Like 1
Link to comment
Share on other sites

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).

2017-07-25_234232.png.e35c50af4b87839a905aa1a035f42090.png

  • Like 3
Link to comment
Share on other sites

5 hours ago, Robin S said:

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

2017-07-25_234232.png.e35c50af4b87839a905aa1a035f42090.png

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

Link to comment
Share on other sites

12 hours ago, Robin S said:

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

2017-07-25_234232.png.e35c50af4b87839a905aa1a035f42090.png

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.

  • Like 1
Link to comment
Share on other sites

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:

2017-07-26_200908.png.79daefe6a6826a788369329b9daf0fe6.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...