WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#26 13.03.2020 22:38:10

losttrip
Member

Re: ckEditor Developer Edition add Alignment options in Image Properties

Thanks for the messages, Christian..  I totally understand the language issues and all is fine as far as I am concerned.  I was not putting any pressure on anyone to find me a solution.  It's not something I wanted for ME, it was a thought that "we" might be able to move toward some included defaults which might make these processes more user friendly for those using the ckEditor out of the box.

The suggestions from colinax and florian lessen the complexity of these processes by a few steps.  Maybe at this point that is all we can hope for.

As I mentioned, I looked into the plugins and widgets, but I am not looking to build a custom solution just for me... if it is not something that will be able to be enjoyed by the entire WBCE community.  I am confident in colinax's knowledge and opinion with regard to ckEditor, and if what we have now is the best option... I accept that.

Best regards to all.

Offline

Liked by:

florian, stefanek

#27 13.03.2020 23:03:26

stefanek
Developer

Re: ckEditor Developer Edition add Alignment options in Image Properties

losttrip wrote:

As I mentioned, I looked into the plugins and widgets, but I am not looking to build a custom solution just for me... if it is not something that will be able to be enjoyed by the entire WBCE community.

Yes, I get that.

If you're willing to help and if you have the time I would appreciate if you could provide a better tutorial of what to do.
All at your pace of course. It would be great for non German speakers for sure.
I can see that the information we have till now leaves much to be desired.

In any event, thanks and have a great day.
Christian


"All the knowledge I possess everyone else can acquire, but my heart is all my own."
Johann Wolfgang von Goethe

Offline

#28 14.03.2020 00:45:44

losttrip
Member

Re: ckEditor Developer Edition add Alignment options in Image Properties

Absolutely!  My plan is to put together some docs more in line with helping the less experienced user put all the pieces together that colinax has offered.  But I wanted to see if we might get somewhere a little further with some streamlining.  If it looks like there is nothing more that can/will be done, I will gladly put a tutorial together.  But I wouldn't want this to look like a criticism of all the work colinax has already offered.  I hope this is understood.

Cheers!

Offline

Liked by:

stefanek

#29 14.03.2020 01:40:06

stefanek
Developer

Re: ckEditor Developer Edition add Alignment options in Image Properties

As I wrote before, sometimes there can be a language barrier, but I am sure colinax will welcome your help in putting together a tutorial. As do I.

I have looked today into "how to override the CKE settings by the use of additional files in the TEMPLATE", but I had only a small time window and I didn't find the whole solution (shame on me).

So, as you see, it's not as easy even for a more experienced user. I'm sure I would get there with more time at hand, but it's been a pain in the * nonetheless.

My suggestion would be to write a tutorial with all the necessary files and steps needed to implement customization.
Later I would see how we could streamline and maybe improve the implemention with colinax.

What do you say?
And, @colinax, what do you think?

Best regards,
Christian


"All the knowledge I possess everyone else can acquire, but my heart is all my own."
Johann Wolfgang von Goethe

Offline

#30 14.03.2020 03:43:47

losttrip
Member

Re: ckEditor Developer Edition add Alignment options in Image Properties

"how to override the CKE settings by the use of additional files in the TEMPLATE"

I am guilty of not choosing my words as carefully as is necessary sometimes in situations where language translation is required.  I used to have no problem overriding what I need to using the process colinax had/has in place.  I was only looking for some clarity as to why he no longer includes the three files ( editor.css, editor.styles.js and wb_ckconfig.js ) in the wb_config folder with his module.  He answered my questions, but I am afraid I can't make out what he is saying clearly.  And since it seemed I was annoying him, I let it go.

At the risk of really bothering colinax or others, I am willing to give this one more try.  Maybe someone else could help me a bit with filling in the blanks of my understanding of exactly why things are set up as they are.

colinax wrote:
losttrip wrote:

But take a look at "wb_ckconfig.js" in your github archive and compare to to "config.js" in the ckeditor folder.

The config.js is the original configuration file of cke, with only some necessary things added to make ckeditor work correctly in WBCE.

The wb_ckconfig.js and the content are the orginal from WB 2.8.3

I knew the difference between the two files.  By colinax breaking up my full question (this quote and the following were one thought... maybe this is the fault of translation, but I have no way of knowing), the point of my question loses some weight and meaning.

But what I am not clear on is, by colinax stating that the "wb_ckconfig.js and the content are the orginal from WB 2.8.3", is colinax saying that because the content is from WB 2.8.3 it is no longer applicable to the current ckEditor and should not be used?

colinax wrote:
losttrip wrote:

Which do you think is the most user friendly starting block for a less experienced user than yourself?

As I wrote the config.js with working examples from wb_ckconfig.js

This is at the heart of why I am confused that the wb_config folder files are not included with the module.  If colinax is suggesting that someone less experience than his should take the ckEditor config.js file,  and copy it to a folder in their template (whichever approach they wish, as explained clearly in the readme.md)) and add in "working examples" from the "wb_ckconfig.js", then why not include the wb_ckconfig.js file with the module?  Why is this file only accessible on an archive page of his github?  I'm not criticizing, I am trying to understand why he has it set up this way.

This is more translation uncertainty for me -  By "working examples" does colinax mean ONLY some parts of the wb_ckconfig.js from WB 2.8.3 work... or is he simply saying use the parts of wb_ckconfig.js that you want to make changes to?   For instance, I used to choose the toolbar items I wanted to offer clients by setting this up in wb_ckconfig.js.  Is colinax saying that the toolbar examples in the archived wb_ckconfig.js might not be working anymore?  Is that the point... does the wb_ckconfig.js file need to be updated to reflect the state of the current version of ckEditor?  I really want to understand.

Because if everything in the archived version of wb_ckconfig.js is still usable in the current ckEditor version, why is it not included with the module.  As much as colinax is obviously frustrated trying to explain this to me.  I, too, am frustrated trying to understand.

colinax wrote:
losttrip wrote:

why is it no longer included with the module in the wb_config folder?

The time changes, the cke changes, the browser changes and we (or I) must react on the changes and fix it.

How do these points specifically reflect why the files are no longer included in wb_config folder???  Did you have to "fix" the module by removing these files so people DON'T use them and "break" things?

colinax wrote:

At first to set a clear line, the module folder is my area, and the template folder is user area.

Secondly, most of this code has never changed since cke3, now we have had cke4 for many years and the cke3 code produces unfriendly behavior in some cases.

Again, are you stressing that these old files are not compatible with the current version of ckEditor and should not be used?  If this is what you're saying... could an updated version of these files be worked on so that they could be included with the module again?  If this is what is needed, and it isn't something you have time for, or want to spend your resources on (since you are concentrating on the module itself, I would be willing to help with the template side files, if I am able / capable.

colinax wrote:
losttrip wrote:

One of my faults is that I usually think of the needs of others instead of just thinking of my needs.

As florian already wrote its no fault, but how shall I describe it, you think in the wrong way, as I already wrote to you in another thread, we are not the developers of the cke, we are also not happy with some behaviour of the cke, but we cannot change it.

And bevor I replace a core feature like image handling with a forked version, i quit the job here.

I am not unhappy with the behavior of ckEditor.  I just saw a few workflows (responsive image classes and colorbox) that are already in growing use, and I thought they might be able to be integrated into the ckEdiotr module.  That way when new users install the module, they would not have to go through all these hoops to be able to more easily apply them to their images.  This was never a suggestion for a fork or hack.  My suggestions were in the spirit of lifting the usefulness of WBCE to a wider audience.

Maybe the need for these kinds of little improvements are not as attractive to as many users as I thought they might be.  That's okay.

Offline

#31 14.03.2020 08:06:18

bernd
Developer

Re: ckEditor Developer Edition add Alignment options in Image Properties

I would like to try to mediate a little bit here.
You, losttrip write actually mostly in a very understandable English. We, who are mostly German speaking, sometimes have difficulties to understand this correctly.
Although many of us learn English at school, but this English is often not really suitable for everyday life, so it can easily come to misunderstandings. If we then try to translate it via Google-Translate, DeepL, etc. it doesn't really get better. tongue

The other thing is this:
The CKE as such was/is developed in a kind of "ideal world".
We are not the developers of the CKE, so we have to try to adopt the CKE so that it works in the WBCE environment.
Colinax has taken on this "very grateful" task - I don't want to know how many times he has cursed it. roll
Just consider the possibility to include configuration files in the template directory - instead of having to edit those in the CKE directory - or do you want to let the "normal" user edit around in the module directory? Especially since this might be overwritten during an update ...

I absolutely agree with you:
the way the image handling is at the moment, it's not really comfortable for the inexperienced "end user".
On the other hand, you can actually "educate" the user a little bit to understand how certain things work together.
Very "stupid" example:
An image is not a link and a link is not an image, if you want an image to be a link, you have to tell the image that it is a link...

All in all, I think that your thoughts and contributions to the topic trigger a certain "thinking process" about how to do something better at this point.


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Online

Liked by:

stefanek

#32 14.03.2020 11:01:09

stefanek
Developer

Re: ckEditor Developer Edition add Alignment options in Image Properties

The main issue I have is, I don't know which files to copy and rename into my template to make it all work.
My suggestion would be, create a subdirectory in the cke directory with the name 'cke_overrides'.
This directory should consist of the 'editor.css' and the two other (js) files that can be overriden by the template.
In this way, anyone who wants to override the files can just copy/paste the 'cke_overrides' into his template, edit the files and is all set up.

What do you think?

Christian


"All the knowledge I possess everyone else can acquire, but my heart is all my own."
Johann Wolfgang von Goethe

Offline

#33 14.03.2020 14:57:58

losttrip
Member

Re: ckEditor Developer Edition add Alignment options in Image Properties

stefanek wrote:

The main issue I have is, I don't know which files to copy and rename into my template to make it all work.
My suggestion would be, create a subdirectory in the cke directory with the name 'cke_overrides'.
This directory should consist of the 'editor.css' and the two other (js) files that can be overriden by the template.
In this way, anyone who wants to override the files can just copy/paste the 'cke_overrides' into his template, edit the files and is all set up.

What do you think?

Christian

That is exactly how it is already set up.  This is explained clearly (to me, at least) in colinax's readme.md file - https://github.com/Colinax/ckeditor/blo … /README.md

Your idea of 'cke_overrides' is the 'wb_config' folder.  In previous versions of ckEditor, all the override files used to be included in the module 'wb_config' folder.

I'm a little rushed, so I hope I don't cause more confusion than good... but using colinax's instructions, here is hopefully some clarification for you...

These are the names of the files used to customize your ckEditor:

editor.css: The default look of the WYSIWYG texttarea and preview.
editor.styles.js: You can select the default styles from a drop-down menu in the CKEditor toolbar.
wb_ckconfig.js Most configuration problems are defined here. Toolbar configuration, behaviour on Enter / Shift+Enter, default language and so on.
editor.templates.js: You can select the standard CKE templates using the template button in the CKEditor toolbar. Note: We recommend that you do not use CKE templates, since the WBCE template should define the various blocks and the template.

In previous versions of ckEditor (from colinax's response, it sounds like these files are from WB 2.8.3) all four of these files were found in the wb_config folder of the module.  Presently, only the editor.templates.js is included in the wb_config folder, and this is the file which has the note recommending it not be used (a recommendation I totally agree with).

If you want to customize your ckEditor, these are the original associated files, which can be found in the module ckeditor folder:
contents.css - editor.css
styles.js - editor.styles.js
config.js - wb_ckconfig.js
editor.templates.js - is found in the wb_config folder as it does not have a source ckeditor folder equivalent.

These custom files (editor.css, editor.styles.js, wb_ckconfig.js, editor.templates.js) can be placed in different locations in your WBCE installation depending on how far reaching you want the overrides to be.

For instance, ckEditor first looks for the stylesheet 'css' file for the WYSIWYG texttarea and preview here:
    _yourInstallation/templates/_yourDefaultTemplate/editor.css   - if this file does not exist, it looks here:
    _yourInstallation/templates/_yourDefaultTemplate/css/editor.css    - if this file does not exist, it looks here:
    _yourInstallation/templates/_yourDefaultTemplate/editor/editor.css    - if this file does not exist, it looks here:
    _yourInstallation/templates/wb_config/editor.css    - if this file does not exist, it looks here:
    _yourInstallation/modules/ckeditor/ckeditor/contents.css

If you put your custom 'editor.css' file into the root of your default template, or into a folder named 'css' or 'editor' in the root of your default template, like so:
_yourInstallation/templates/_yourDefaultTemplate/editor.css
_yourInstallation/templates/_yourDefaultTemplate/css/editor.css
_yourInstallation/templates/_yourDefaultTemplate/editor/editor.css
- your custom changes only apply to your template.

If you put your custom 'editor.css' file into a folder named 'wb_config' in your root templates folder:
_yourInstallation/templates/wb_config/editor.css
- your custom changes apply to all templates.

My personal preference has always been to add a folder named "editor" in my default template and place all custom files there:
yourInstallation/templates/_yourDefaultTemplate/editor/editor.css

I totally understand all of the above.  None of this is the source of the reason for my confusion.  I hope this is crystal clear.

------------------------------------

My confusion stems from the following...
The final line in the readme.md currently states "If you need coding examples see the wb_config files in the archive branch." with a link to colinax's github - https://github.com/Colinax/CKEditor/tre … /wb_config

My question has been, why are these coding example files no longer included in the ' wb_config' folder which is included in the module?  Colinax answered this question in this post - https://forum.wbce.org/viewtopic.php?pid=30437#p30437

where I asked "why is it no longer included with the module in the wb_config folder?"

colinax wrote:

The time changes, the cke changes, the browser changes and we (or I) must react on the changes and fix it.

At first to set a clear line, the module folder is my area, and the template folder is user area.

Secondly, most of this code has never changed since cke3, now we have had cke4 for many years and the cke3 code produces unfriendly behavior in some cases.

But his answer is confusing to me.  It must be a language translation issue, as the answer sounds like a cryptic riddle to me, instead of a clear stating of the reasoning.  To me, an English speaker, this sounds like colinax is warning that the files found in his github Archive are outdated or maybe even broken and should not be used, hence why they are not included with the module anymore.
But, if this is true, why are they suggested as a source of examples to be used, with a link to them in the readme.md?

Last edited by losttrip (16.03.2020 04:06:07)

Offline

#34 14.03.2020 15:55:06

stefanek
Developer

Re: ckEditor Developer Edition add Alignment options in Image Properties

Thank you, losttrip.
Awesome job.

I can't respond fully now, but will came back to you later tonight when I'm back home.


"All the knowledge I possess everyone else can acquire, but my heart is all my own."
Johann Wolfgang von Goethe

Offline

#35 14.03.2020 17:59:53

losttrip
Member

Re: ckEditor Developer Edition add Alignment options in Image Properties

bernd wrote:

I would like to try to mediate a little bit here.
You, losttrip write actually mostly in a very understandable English. We, who are mostly German speaking, sometimes have difficulties to understand this correctly.
Although many of us learn English at school, but this English is often not really suitable for everyday life, so it can easily come to misunderstandings. If we then try to translate it via Google-Translate, DeepL, etc. it doesn't really get better. tongue

I fully understand the language barrier.  I started using WB around 2008 where language also was a factor.  I appreciate everyone who keeps this project alive and moving forward, and I know for the majority, English is not a first language .  I know that I am the minority, being only an English speaker.  I know how frustrating it must be to have to communicate with someone who doesn't speak your language, fluently or at all.  I sympathize.  I must seem like a thorn in people's sides sometimes.  But please understand that I have to deal with my own share of frustrations because of the language barrier.  Even transitioning from the WB forum to the WBCE forum, I knew I was going from a low percentage of English threads to almost no English threads.  I use Google translate on a daily basis just to be able to "somewhat" keep up with all that you awesome folks are working on.  Why do I bother... because I love WBCE.  I love how user friendly it is, how it allows me to grow as a developer/designer on a daily basis, how it allows me to put some extra food on my family's table.  My hope is that I will be able to enjoy working with and on this project well into my retirement years (which aren't far off).  And I owe ALL of this to the people who work so hard behind the scenes.

bernd wrote:

The other thing is this:
The CKE as such was/is developed in a kind of "ideal world".
We are not the developers of the CKE, so we have to try to adopt the CKE so that it works in the WBCE environment.
Colinax has taken on this "very grateful" task - I don't want to know how many times he has cursed it. roll
Just consider the possibility to include configuration files in the template directory - instead of having to edit those in the CKE directory - or do you want to let the "normal" user edit around in the module directory? Especially since this might be overwritten during an update ...

I know, understand and appreciate all of this.  Every reply I get sounds like people think I am criticizing colinax's approach or his work on the module.  I'm not!   I want to understand, so that I can use it in the most efficient, or intended way, perhaps help to suggest ideas, and share them with others.

bernd wrote:

I absolutely agree with you:
the way the image handling is at the moment, it's not really comfortable for the inexperienced "end user".
On the other hand, you can actually "educate" the user a little bit to understand how certain things work together.
Very "stupid" example:
An image is not a link and a link is not an image, if you want an image to be a link, you have to tell the image that it is a link...

All in all, I think that your thoughts and contributions to the topic trigger a certain "thinking process" about how to do something better at this point.

I would be happy to be involved in the "education" process.  As I said earlier, I just don't want to write up a whole tutorial package for English speakers and include misinformation.  This is why I am trying desperately to get clarity on why the four custom configuration files are only available through a link to a github page and no longer included with the module download?

Last edited by losttrip (14.03.2020 22:09:17)

Offline

#36 15.03.2020 14:09:43

stefanek
Developer

Re: ckEditor Developer Edition add Alignment options in Image Properties

Hello losttrip.

losttrip wrote:

In previous versions of ckEditor (from colinax's response, it sounds like these files are from WB 2.8.3) all four of these files were found in the wb_config folder of the module.  Presently, only the editor.templates.js is included in the wb_config folder, and this is the file which has the note recommending it not be used (a recommendation I totally agree with).

If you want to customize your ckEditor, these are the original associated files, which can be found in the module ckeditor folder:
contents.css - editor.css
styles.js - editor.styles.js
config.js - wb_ckconfig.js
editor.templates.js - is found in the wb_config folder as it does not have a source ckeditor folder equivalent.

These custom files (editor.css, editor.styles.js, wb_ckconfig.js, editor.templates.js) can be placed in different locations in your WBCE installation depending on how far reaching you want the overrides to be.

For instance, ckEditor first looks for the stylesheet 'css' file for the WYSIWYG texttarea and preview here:
    _yourInstallation/templates/_yourDefaultTemplate/editor.css   - if this file does not exist, it looks here:
    _yourInstallation/templates/_yourDefaultTemplate/css/editor.css    - if this file does not exist, it looks here:
    _yourInstallation/templates/_yourDefaultTemplate/editor/editor.css    - if this file does not exist, it looks here:
    _yourInstallation/templates/wb_config/editor.css    - if this file does not exist, it looks here:
    _yourInstallation/modules/ckeditor/ckeditor/contents.css

Thanks.


"All the knowledge I possess everyone else can acquire, but my heart is all my own."
Johann Wolfgang von Goethe

Offline

#37 16.03.2020 00:26:00

colinax
Administrator

Re: ckEditor Developer Edition add Alignment options in Image Properties

Hi @ all & sorry for my absence yesterday.

I have spend six hours of my spere time today, to test some things, there behavoir and write this post.

losttrip wrote:

Also, it would be end user friendly if there was a way to also make "colorbox" implementation less complicated.
Right now, if a user wants to use pic2left responsiveness on an image, and have a colorbox popup, they have to:

Unfortunately there is no other way (for the image or imag2 plugin) execept this one:

in the words of Bernd wrote:

An image is not a link and a link is not an image, if you want an image to be a link, you have to tell the image that it is a link...

First add a unlinked image

  1. add an image

  2. click advanced tab

  3. type pic2left in Stylesheet Classes text box

  4. click OK

Second link the image

  1. click on the image and add a link (to the large image)

  2. click advanced tab

  3. type colorbox in Stylesheet Classes text box

  4. click OK

For link an image you should not use the Link tab from the image adding feature, you should use the add a link feature.

The image adding feature is not realy compatible with the colorbox behavoir but the add a link feature is to 100% compatible.

losttrip wrote:

...and the way the "Captioned Image" checkbox is implemented here, is how I envision a "Colorbox Image" checkbox option appearing

It sounds great but its not possible, we cant change or modify these CKE Core Plugins.

But with the WBCE CKEditor Developer Edition its possible to modify the image2 alignClasses (for this you need editor.css and wb_ckconfig.js)

And its possible to, to add the classes over Object Styles (for this you need the editor.styles.js and editor.css)


Every template developer can decide how many instructions and how they are transferred to the CKE.

We as CMS cannot make such changes like changing the image2 alignClasses, because not every template supports pic2left and so on.

The understanding of the readme

I have updated the readme.md of the WBCE CKEditor Standard Edition.

Is this readme more readable or are there still inconsistencies?

When we have finished this readme, I will update the other one.

Why I have removed the wb_config folder?

  • To separate the template developer area from the module developer area.

  • In the way the CKE (now) works, they are no longer needed or can cause problems.

  • To access the wb_config folder, FTP access was required.

losttrip wrote:

Which do you think is the most user friendly starting block for a less experienced user than yourself?

In this case its complicated because:
With regard to how the CKE works are eg. florian and stefanek are less experienced then I.

For the next few sentences, I dont use "I expect" but

To edit editor.css and editor.styles.js the user must know the basics of HTML, CSS and are generally familiar with syntax.

To edit wb_ckconfig.js and editor.templates.js, the user should know how to develop a template and have advanced knowledge of HTML and CSS and basic knowledge of Javascript and PHP.

The WBCE CKEditor Standard Edition with editor.css and editor.styles.js is the playground for beginners because it is (nearly) not possible to break the CKE.

With modifying the wb_ckconfig.js file its easy to break the CKEditor and/or your Website content.

losttrip wrote:

The customizable configuration files

The "old" content can still be used, is obsolete and could break the CKE (it depends on the file and the code you want to use).

Summary

I have found several places that could be adapted, but I have to discuss this with the others

I hope that I have answered most of the questions understandably.

If not ask again, but I know that the CKE is not always easy, some things you just have to take as they are.

You can trust us, if we had found a way to simplify the annoying things without break the current behavior or rules, we would have added them.

Offline

#38 16.03.2020 04:04:32

losttrip
Member

Re: ckEditor Developer Edition add Alignment options in Image Properties

As I said in my first post:

... it would be end user friendly if there was a way to also make "colorbox" implementation less complicated.
Right now, if a user wants to use pic2left responsiveness on an image, and have a colorbox popup, they have to:
- add an image
- click "advanced" tab
- type "pic2left" in Stylesheet Classes text box
- click the Link tab, enter the link to the large image
- click OK
- then right click the image and choose "Edit Link"
- click the Advanced tab
- type in "colorbox" in the Stylesheet Classes text box
- click OK

That's a lot of hoops for a non technical user, and the fact that they have to enter different info into two different "Stylesheet Classes" dialogues is an ongoing confusion for most of my clients.

I'm not complaining, and the end result works wonderfully.  I'm just wondering if there might be a more streamlined workflow possible for non-technical end users?

Even though I understand where you are coming from with your concerns, I believe there are more streamlined workflows than expecting an end user (our clients) to remember to click all those tabs and type in all that cryptic text EVERY time they need to add an image with these styles added.  They don't have to be built into the module, but these kinds of examples could certainly be included in readme or sample text files to help WBCE template designers / developers get things set up quickly for their clients to reap the benefits of this functionality.

But I respect your stance of:

colinax wrote:

Every template developer can decide how many instructions and how they are transferred to the CKE.

Even though I was hoping we might be able to find a way that this functionality could be made more easily incorporated into the CKEditor module for all to enjoy, I will happily integrate it into my own workflow and templates for the benefit of my clients.  I still don't understand why including something like a "sample walk through" couldn't be included in the CKEditor readme file or another included text file, at the very least.  But, I'll let it go.  I tried.

-----

For anyone else who might be interested, I put together a really quick youtube video demonstrating how easy it could be for our clients to add these styles to images using just the CKEditor "Styles" drop down selector - https://youtu.be/iJP9J5IpXXo
I'm not sure how long I will leave the video up, as I threw it together quite quickly, but I am hopeful it will convey how much easier we could make this process for our clients.
Note: there is no audio, so hopefully the visuals speak for themselves.

This is the description from the video:

WBCE CMS - CKEditor - Colorbox & Responsive Positioning in Styles Drop Down

WBCE CMS - A little demonstration of a streamlined CKEditor Responsive Image Positioning and Colorbox integration work-flow.

I added a little demo on how to add Image Hover Text and Caption Text, as an added bonus.

For the required Image styles to appear in the Styles drop-down, you must add the following:

1. editor.styles.js file -   (select the default styles from a drop-down menu in the CKEditor toolbar)
can be placed in different locations in your WBCE installation depending on how far reaching you want the overrides to be.

For instance, CKEditor first looks for the editor.styles.js. here:
    _yourInstallation/templates/_yourDefaultTemplate/editor.styles.js   - if this file does not exist, it looks here:
    _yourInstallation/templates/_yourDefaultTemplate/css/editor.styles.js    - if this file does not exist, it looks here:
    _yourInstallation/templates/_yourDefaultTemplate/editor/editor.styles.js    - if this file does not exist, it looks here:
    _yourInstallation/templates/wb_config/editor.styles.js    - if this file does not exist, it looks here:
    _yourInstallation/modules/ckeditor/ckeditor/styles.js

If you put your custom 'editor.styles.js' file into the root of your default template, or into a folder named 'css' or 'editor' in the root of your default template, like so:
_yourInstallation/templates/_yourDefaultTemplate/editor.styles.js
_yourInstallation/templates/_yourDefaultTemplate/css/editor.styles.js
_yourInstallation/templates/_yourDefaultTemplate/editor/editor.styles.js
- your custom changes only apply to that template.

If you put your custom 'editor.styles.js' file into a folder named 'wb_config' in your templates folder:
_yourInstallation/templates/wb_config/editor.styles.js
- your custom changes apply to all templates.

2. the following Object Styles to your custom editor.styles.js file.  Place the styles under the Object Styles heading, as shown.

Hope this helps!

editor.styles.js

/* Object Styles */
//  This styles are only available when you select the defined objects. E.g. when selecting an image
//  you can control here with the styles dropdown the styling.

{ name : 'Pic Full'              , element : 'img', attributes  : { 'class' : 'picfull' } },
{ name : 'Pic 2 Right'        , element : 'img', attributes  : { 'class' : 'pic2right' } },
{ name : 'Pic 2 Left'          , element : 'img', attributes  : { 'class' : 'pic2left' } },
{ name : 'Pic 3 Right'        , element : 'img', attributes  : { 'class' : 'pic3right' } },
{ name : 'Pic 3 Left'          , element : 'img', attributes  : { 'class' : 'pic3left' } },
{ name : 'Pic 4 Right'        , element : 'img', attributes  : { 'class' : 'pic4right' } },
{ name : 'Pic 4 Left'          , element : 'img', attributes  : { 'class' : 'pic4left' } },
{ name : 'Image Pop'        , element : 'a',   attributes  : { 'class' : 'colorbox' } },

3. responsive image positioning rules to your template css file (these are working sample settings, feel free to adjust to your needs).  Note: These css rules may already be included in your template!

/* --------------------------- pics ------------------------------------ */
img.picfull {width:100%; height:auto;}

@media screen and (min-width:640px) {
img.pic2left, img.pic3left, img.pic4left { margin: 0 1em 1em 0; height:auto; }

img.pic2right, img.pic3right,  img.pic4right { margin: 0 0 1em 1em; height:auto; }

img.pic2left {float:left; max-width:49%;}
img.pic2right {float:right; max-width:49%; }

img.pic3left {float:left; max-width:32%;}
img.pic3right {float:right; max-width:32%;}

img.pic4left {float:left; max-width:24%;}
img.pic4right {float:right; max-width:24%; }
}

@media screen and (max-width:640px) {
    img.pic2left, img.pic3left, img.pic4left,
    img.pic2right, img.pic3right,  img.pic4right { margin: 1em 0; width:100%; float:none; height:auto; }
}

Last edited by losttrip (16.03.2020 04:44:41)

Offline

#39 16.03.2020 04:43:28

losttrip
Member

Re: ckEditor Developer Edition add Alignment options in Image Properties

For those who don't want to watch my video, or find it confusing, here are the steps...

The overall steps might not have lessened a great deal, but the ease of use of the style steps is greatly improved in my opinion, and it leaves less room for end user error by eliminating having to find the right dialogue and tabs, and typing in class names manually.

Your main Image can be a full size image, or better, a resized version if you have one - I'm not going to go into the debate about why you might not want to use the full-size version for your main image on the page.

Here are the steps if you are using two images (a resized for the page and a full size for the colorbox):

  1. open the Image properties dialogue and click "Browse Server" to choose your resized  image

  2. click the Link tab (while still in Image Properties)

  3. click "Browse Server" to choose your full size image

  4. click OK

  5. click on the image to select it

  6. click the "Styles" drop-down and choose your responsive positioning choice  (e.g., "pic2left")

  7. click the "Styles" drop-down again and choose your colorbox style (e.g., "Image Pop" as shown in my youtube video and post above)

  8. click "Save"


Here are the steps if you are using a single, full size image for the page and colorbox:

  1. open the Image properties dialogue and click "Browse Server" to choose your image

  2. Copy the URL and then click the Link tab (while still in Image Properties)

  3. paste the URL into the Link URL dialogue

  4. click OK

  5. click on the image to select it

  6. click the "Styles" drop-down and choose your responsive positioning choice  (e.g., "pic2left")

  7. click the "Styles" drop-down again and choose your colorbox style (e.g., "Image Pop" as shown in my youtube video and post above)

  8. click "Save"

That's it!  Hope this helps.

Offline

Board footer

Powered by FluxBB

up