Jump to content

[solved] CKEditor - custom styles/classes


BrendonKoz
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

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

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