[solved] CKEditor - custom styles/classes

[BrendonKoz]

Hi all, I'm wondering if anyone's come across this problem and/or solved it.

I'm using Bootstrap for my front-end CSS in the current project. Bootstrap's image alignment classes are pull-left, center-block, and pull-right (as opposed to PW default of align_left, align_center, align_right). I could rebuild the Bootstrap CSS to accomodate (by adding) PW's chosen class names, but I'm currently instead trying to accomodate PW to use Bootstrap's names. I've found the information about using Custom Editor JS Styles within the field's settings in the ProcessWire admin. What I haven't found is...

... How can I allow and enable custom class names from the PWimage CKE plugin?

I'm aware that I could modify the JS source of pwimage, but since that's a core module if I were to update ProcessWire I'd overwrite my modifications. Is there an alternate, best-practice way to handle this?

Thanks!

[BrendonKoz]

Hmm...

I could disable the core pwimage plugin (from the field settings), copy/paste that plugin from wire and move to site, rename it, and just maintain a diff from the official repo version... Just not sure if this is the best or only method available. Thoughts?

[3fingers]

Take a look here and here ...

[tpr]

Option #1

Just copy the "pwimage" folder from

wire\modules\Inputfield\InputfieldCKEditor\plugins\

to 

site\modules\Inputfield\InputfieldCKEditor\plugins

(create if doesn't exists), so PW should pick the latter. Now you can modify it without worrying of the updates. 

Option #2

If you're using less or sass you can extend the bootstrap CSS like this:

.align_left {
	@extend .pull-left;
}

Of course you need to import bootstrap first to work.

Edit: just read that you are aware of #1, I think it's fine, though #2 is less hassle provided if you use a preprocessor.

[BrendonKoz]

8 hours ago, 3fingers said:

Take a look here and here ...

Hey 3fingers - thanks for the reply! Unfortunately those are not helpful in this instance. I've gotten the default CKEditor to comply just fine the way I was hoping. The problem is specifically with the PWimage add-on for embedding images in to CKEditor.

 

8 hours ago, tpr said:

Option #1

Just copy the "pwimage" folder from

wire\modules\Inputfield\InputfieldCKEditor\plugins\

to 

site\modules\Inputfield\InputfieldCKEditor\plugins

(create if doesn't exists), so PW should pick the latter. Now you can modify it without worrying of the updates. 

Option #2

If you're using less or sass you can extend the bootstrap CSS like this:

.align_left {
	@extend .pull-left;
}

Of course you need to import bootstrap first to work.

Edit: just read that you are aware of #1, I think it's fine, though #2 is less hassle provided if you use a preprocessor.

Thanks, tpr! These are kind of what I was thinking I could do, but was thinking/hoping there might be a PW way of fixing it that I just didn't find. Once this project's done I have a few things that I'll want to tackle to see if I might be able to fix. Looks like this might be added to the list.

[BitPoet]

You can set the classes to be used for left, center and right alignment in the configuration settings of ProcessPageEditImageSelect.

[tpr]

Great - should have looked for this there in first place  

It's here btw, under name "Page Edit Image":

/admin/module/edit?name=ProcessPageEditImageSelect

 

[BrendonKoz]

7 hours ago, BitPoet said:

You can set the classes to be used for left, center and right alignment in the configuration settings of ProcessPageEditImageSelect.

Brilliant! I need to check the module configuration options more often. Never think to look there after initial install. Thanks, BitPoet!!