WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 10.03.2020 06:59:05

losttrip
Member

ckEditor Developer Edition add Alignment options in Image Properties

The Image Properties has "Alignment" options of "Right" and "Left" which add a span with a class of "float:right" and "float:left".

Is it possible to add other choices to this dropdown dialogue?  It would be handy to be able to add classes like the picfull, pic2left, pic2right, etc. here.  End users (Clients) are not inclined to look in the "Advanced" tab and enter these classes from memory in the "Stylesheet Classes" text field.  But a dropdown named "Alignment" is a place they would look for these kinds of options.

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:
- 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?

Thanks for your time.

Offline

#2 10.03.2020 18:59:35

losttrip
Member

Re: ckEditor Developer Edition add Alignment options in Image Properties

Just a quick follow up, now that I have had some sleep...

I am not expecting or hoping someone will work on a solution for me.  I am happy to work away at a possible solution, I just need some direction as to what files I would look in for how to possibly add to the "Alignment" dropdown box.

I think these two additions to the WBCE ckEditor would bring much user friendly usefulness to one of the most used interfaces in this CMS.

In the meantime I will visit the ckEditor site for possible enlightenment.

Thank you.

Offline

#3 10.03.2020 19:23:40

losttrip
Member

Re: ckEditor Developer Edition add Alignment options in Image Properties

This looks hopeful...

## CKEditor 4.4
New Features:
* Introduced the [`config.image2_alignClasses`](https://ckeditor.com/docs/ckeditor4/lat … ignClasses) option to configure the way images are aligned with CSS classes.
  If this setting is defined, the editor produces classes instead of inline styles for aligned images.

...and the way the "Captioned Image" checkbox is implemented here, is how I envision a "Colorbox Image" checkbox option appearing.
https://ckeditor.com/docs/ckeditor4/lat … mage2.html


... or maybe I am barking up the wrong tree...
Looks like "Object Styles" should work - https://ckeditor.com/docs/ckeditor4/lat … tyle-types

https://ckeditor.com/docs/ckeditor4/lat … tyles.html

My search continues.

Last edited by losttrip (10.03.2020 19:54:35)

Offline

#4 10.03.2020 22:37:56

colinax
Administrator

Re: ckEditor Developer Edition add Alignment options in Image Properties

Hi losttrip,

yes your are on the wrong tree.

Read the readme.md of our CKEditor, there is all you need.

The thing that you need is: editor.styles.js

Last edited by colinax (10.03.2020 22:38:16)

Offline

#5 11.03.2020 07:51:53

florian
Administrator

Re: ckEditor Developer Edition add Alignment options in Image Properties

If every picture with a class like "makebig" should be opened in a colorbox, you can insert the following code just before the closing </body> tag of your template:

	  <script>
	  $(".makebig").on("click", showImage);
		function showImage(e)
		{
			$.colorbox({href:$(e.currentTarget).attr("src")});
		}
	</script>
	<a class="colorbox"></a>  

(Source)

That way, there's no need to upload an extra image and set the link to it, you (or your customer) just has to insert the image the usual way and set its class to (in this example) "makebig". For positioninig this can be combined with the pic2right etc. classes.
The <a class="colorbox"></a> is just a dummy for the colorbox outputfilter, otherwise the colorbox scripts are not loaded.

Last edited by florian (11.03.2020 08:05:03)

Online

Liked by:

stefanek, losttrip

#6 12.03.2020 06:44:45

losttrip
Member

Re: ckEditor Developer Edition add Alignment options in Image Properties

@colinax - Thanks for your reply.  I did read the readme.md file.  My confusion came from the fact that the AOR ckEditor Developer download 4.11.3, 4.11.4, 4.13.1 wb_config folder only contains the editor.templates.js file.  And the link in the readme - https://github.com/Colinax/CKEditor/tre … wb_config) is 404 because of the closing bracket at the end.  I didn't notice the bracket until now.  I will download the files and get to work.

@florian - Thank you.  I will try incorporating that script with object styles in the styles dropdown.  Personally, I am quite comfortable / happy adding classes by hand into the Image Properties / Advanced tab / Stylesheet Classes... but for the average end user, they do much better when they have choices to select from.  Less to remember and less chance of user error.

Offline

#7 12.03.2020 09:24:02

colinax
Administrator

Re: ckEditor Developer Edition add Alignment options in Image Properties

losttrip wrote:

@colinax - Thanks for your reply.  I did read the readme.md file.  My confusion came from the fact that the AOR ckEditor Developer download 4.11.3, 4.11.4, 4.13.1 wb_config folder only contains the editor.templates.js file.

In this chase i think that you dont read the readme.
The readme says: To customize, copy the (known) files from _yourInstallation/modules/ckeditor/ckeditor/ into ... your template folder


losttrip wrote:

And the link in the readme - https://github.com/Colinax/CKEditor/tre … wb_config) is 404 because of the closing bracket at the end.  I didn't notice the bracket until now.

The Link in the readme works well, there is no 404 because the closing bracket is a part of the md markdown.


losttrip wrote:

I will try incorporating that script with object styles in the styles dropdown.

This don't works see #17. Use florian's script in the template OR use the editor.styles.js and add something like this:

{ name : 'colorbox', element : 'a', attributes  : { 'class' : 'colorbox' } }

Last edited by colinax (12.03.2020 22:42:49)

Offline

#8 12.03.2020 16:34:14

losttrip
Member

Re: ckEditor Developer Edition add Alignment options in Image Properties

I don't want to bicker, but I will defend my previous comments.  I want to stress that when I provide feedback, it is never with the intention to criticize.  It is always in the spirit of improving user experience, clarity, and WBCE usability... especially for the new user who does not necessarily have the insight of a veteran user like yourself.

colinax wrote:
losttrip wrote:

@colinax - Thanks for your reply.  I did read the readme.md file.  My confusion came from the fact that the AOR ckEditor Developer download 4.11.3, 4.11.4, 4.13.1 wb_config folder only contains the editor.templates.js file.

In this chase i think that you dont read the readme.
The readme says: To customize, copy the (known) files from _yourInstallation/modules/ckeditor/ckeditor/ into ... your template folder

As I said, I read the readme.  Word for word.  I urge you to read it with the vision of inexperienced eyes.  I am not saying it is poorly written, just that you might be injecting your "(known)" assumptions a little too much into what is actually stated in the words.  I am suggesting that a NEW user may need a little more information to fill in the blanks that you do automatically having been so close to this project for so long.

I will break down how it reads to me, and why it could be confusing to other less experienced users.

### Question:

What files are there to customize CKEditor for WBCE?

#### Answer:

+ editor.css:	
The default look of the WYSIWYG textarea and the preview.

+ editor.styles.js:
The default styles you can choose from a dropdown in the CKEditor toolbar.

+ editor.templates.js:
The default CKE templates you can choose of a button in CKEditor toolbar.
Please note: We recommend not to use CKE templates, because the WBCE template should define the different blocks and the template.

+ wb_ckconfig.js:
Here are most of the configuration issues defined.
Toolbar-Configuration, behavior on Enter / Shift+Enter, default language and so on.

The configuration files could already be in the template folder, please take a look inside:

### Question:

How can I customize the CKEditor for WBCE?

#### Answer:

For customizing, copy the files of _yourinstallation/modules/ckeditor/ckeditor/ or _yourinstallation/modules/ckeditor/wb_config/ to _yourinstallation/templates/_yourdefaulttemplate folder, your changes are only for _yourdefaulttemplate. 

These customizing instructions state "copy the files of _yourinstallation/modules/ckeditor/ckeditor/ or _yourinstallation/modules/ckeditor/wb_config/"
But, of the four files you name "editor.css, editor.styles.js, editor.templates.js, and wb_ckconfig.js", none are found in the "yourinstallation/modules/ckeditor/ckeditor/" folder.  So, I naturally look in the second recommended folder "yourinstallation/modules/ckeditor/wb_config/" and only "editor.templates.js" is found.  So, I don't know what to do.  So, I go to the next step, the link to the "Archive" files on your github...

colinax wrote:
losttrip wrote:

And the link in the readme - https://github.com/Colinax/CKEditor/tre … wb_config) is 404 because of the closing bracket at the end.  I didn't notice the bracket until now.

The Link in the readme works well, there is no 404 because the closing bracket is a part of the md markdown.


I open the readme.md file in notepad++, and it includes that closing bracket in the link, so clicking leads to a 404 page:


404 link

Which led me to reaching out on the forum for guidance.

If I am missing something obvious, please give me more direction.  I looked through all of the files in "yourinstallation/modules/ckeditor/ckeditor/" and none look like what I was used to finding when these four files were included in the "wb_config/" folder.  I have now found the files on the github under Archive, but can you give some background explanation as to why these files are no longer included in the "wb_config/" folder, and are only accessible in this manner?  Are they not recommended to use, as is, with current ckEditor versions?  Because that is the impression I get, as an outsider.  Thank you.

colinax wrote:
losttrip wrote:

I will try incorporating that script with object styles in the styles dropdown.

This don't works. Use florian's script in the template OR use the editor.styles.js and add something like this:

{ name : 'colorbox', element : 'a', attributes  : { 'class' : 'colorbox' } }

I realize that.  I am now guilty of not being specific enough.  What I meant was, I will do some testing using florian's code to implement the "colorbox", and using object styles to offer "pic2left, pic2right, etc." positioning options in the "Styles" drop-down.  And then do some testing of having both "colorbox" and the positioning styles in the drop-down.  And then I will compare and decide which approach I think will be more understandable to my clients.

Offline

#9 12.03.2020 18:39:40

colinax
Administrator

Re: ckEditor Developer Edition add Alignment options in Image Properties

Hi,

at first, to your 404 error:

The problem is that you are using notepad++ (notepad++ does not support modern programming language like md), I recommend to install Visual Studio Code as code editor.

On your second problem (the readme):

I see you've already read 66%. Please read the complete readme.md (there is one more question left).
For a better understanding please read the slightly updated readme.md from here.

Last edited by colinax (15.03.2020 21:50:48)

Offline

#10 12.03.2020 18:48:44

florian
Administrator

Re: ckEditor Developer Edition add Alignment options in Image Properties

On your second problem with reading:

colinax, this sounds really unfriendly. I hope you did not intend to offend losttrip.

Online

#11 12.03.2020 18:54:11

colinax
Administrator

Re: ckEditor Developer Edition add Alignment options in Image Properties

florian wrote:

On your second problem with reading:

colinax, this sounds really unfriendly. I hope you did not intend to offend losttrip.

Of course not, I just cut back too much.
I updated it above.

Offline

#12 12.03.2020 20:03:57

losttrip
Member

Re: ckEditor Developer Edition add Alignment options in Image Properties

I was just trying to help.  If you're not open to feedback, please say so, and I will stop my effort to make suggestions that may help you help future users be more productive with ckEditor and therefore enjoy using WBCE.

colinax wrote:

Hi,

at first, to your 404 error:

The problem is that you are using notepad++ (notepad++ does not support modern programming language like md), I recommend to install Visual Studio Code as code editor.

I'm happy using notepad++.  I've never had an issue using until today.  I also use VSC for some coding workflows, but is your expectation that every future user of ckEditor will know they are to open your readme.md file in VSC (or another md capable editor) or else that link may result in a 404 page?  I don't know enough about md, so I will not comment further.  I though it might have been a case of fixing the link formatting, but I guess it's not.

colinax wrote:

On your second problem with reading:

I see you've already read 66%. Please read the complete readme.md (there is one more question left).
For a better understanding please read the slightly updated readme.md from here.

I have read 100% of the readme.md many times.  I am saying that the presented answers to the final question might not be of as much help as you think to an inexperienced user.

### Question:

How is the workflow of reading CKEditor files?

#### Answer:

1) Is called as first if available, 2) Is the next one, and so on!

Search order for configuration files 

...

editor.styles.js

1) _yourinstallation/templates/_yourdefaulttemplate/editor.styles.js
2) _yourinstallation/templates/_yourdefaulttemplate/js/editor.styles.js
3) _yourinstallation/templates/_yourdefaulttemplate/editor/editor.styles.js
4) _yourinstallation/templates/wb_config/editor.styles.js
5) _yourinstallation/modules/ckeditor/ckeditor/styles.js

wb_ckconfig.js

1) _yourinstallation/templates/_yourdefaulttemplate/editor.styles.js
2) _yourinstallation/templates/_yourdefaulttemplate/js/editor.styles.js
3) _yourinstallation/templates/_yourdefaulttemplate/editor/editor.styles.js
4) _yourinstallation/templates/wb_config/editor.styles.js
5) _yourinstallation/modules/ckeditor/ckeditor/styles.js

...

The "wb_ckconfig.js" section is a copy of the "editor.styles.js" section which is confusing.  I see now from your provided update, that was a misprint.  Fair enough.  But take a look at "wb_ckconfig.js" in your github archive and compare to to "config.js" in the ckeditor folder.  Which do you think is the most user friendly starting block for a less experienced user than yourself?  Someone (maybe yourself, I don't know) took the time to provide all that example content and explanation in "wb_ckconfig.js", why is it no longer included with the module in the wb_config folder?

I'm not trying to make a mountain out of a mole hill.  I fully understand not everyone wants/needs to customize their ckEditor experience.  My original post was an idea that perhaps having some of these workflows (image alignment and colorbox) offered by default in a more user friendly way MIGHT be beneficial to this ESSENTIAL module.  I got the hint, this is not a popular idea.  I will just include them with my templates.  One of my faults is that I usually think of the needs of others instead of just thinking of my needs.  But I am at peace with that.

Thank you for your time and effort with this project.

Offline

Liked by:

stefanek

#13 12.03.2020 20:18:46

florian
Administrator

Re: ckEditor Developer Edition add Alignment options in Image Properties

My original post was an idea that perhaps having some of these workflows (image alignment and colorbox) offered by default in a more user friendly way MIGHT be beneficial to this ESSENTIAL module.  I got the hint, this is not a popular idea.

It _is_ a popular idea. I'm not lucky with the complicated way to insert resizable images either, and over the whole day - beside work and trouble with other users - I was thinking about how this can be done. I could provide a droplet or standalone module for that - a textblock with an image upload and a select box for the image style - but I have no idea how to get it directly into a usual wysiwyg section/ckeditor itself. I guess one would have to create an own plugin for cke for that, but I have never done this before.

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

That is no fault. I wish more people would think or act that way.

Although it might not sound like this every time, for me you are a very valued member of the community and I really hope you stay here.

Last edited by florian (12.03.2020 20:19:32)

Online

Liked by:

stefanek

#14 12.03.2020 20:54:23

stefanek
Developer

Re: ckEditor Developer Edition add Alignment options in Image Properties

florian wrote:
losttrip wrote:

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

That is no fault. I wish more people would think or act that way.

Although it might not sound like this every time, for me you are a very valued member of the community and I really hope you stay here.

I agree.

To be honest I didn't look into the way how all of it has to be implemented in order to work in the CKE.
I remember some years ago it was quite complicated but I got it somehow working.

Is it working for you now, @losttrip?
(Sorry, didn't read the whole thread.)

Best regards,
Christian


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

Offline

#15 12.03.2020 21:02:39

colinax
Administrator

Re: ckEditor Developer Edition add Alignment options in Image Properties

losttrip wrote:

I also use VSC for some coding workflows, but is your expectation that every future user of ckEditor will know they are to open your readme.md file in VSC (or another md capable editor) or else that link may result in a 404 page?

Ehm.. Yes! I expect that every user wich works on a modern web uses a modern code editor, as like I expect that every office assisstant open a docx file with Word and not with the Windows Editor.

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

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

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.

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.

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.

Offline

#16 12.03.2020 21:17:26

stefanek
Developer

Re: ckEditor Developer Edition add Alignment options in Image Properties

colinax wrote:

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

As I didn't look into the CKE for a very long time I don't know, but is it very hard to implement a customized/forked image handling plugin?


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

Offline

#17 12.03.2020 22:07:45

losttrip
Member

Re: ckEditor Developer Edition add Alignment options in Image Properties

colinax, it is apparent we have very different approaches to communication.  That's unfortunate but not a big deal.

I know you said "this don't works", but it works for me... and it is simple to implement for my personal needs.  I put this in the editor.styles.js file and put florian's script in my template index file.

[== JavaScript ==]
/* 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 : 'makebig'          , element : 'img', attributes  : { 'class' : 'makebig' } },
	
	{
        name : 'Pic2Left',
        element : 'img',
        attributes :
        {
            'style' : 'padding: 5px',
			'float' : 'left',
			'width' : '48%',
			'margin' : '3px 3% 2px 0',
			'height' : 'auto'			
			
        }
    },

Now all the user has to do is add an image, click the dropdown and select "makebig" and "Pic2Left" and they are done.

I thank both you and florian for your suggestions.

The thing is, I didn't want to just find a solution that I could implement.  I wanted to find something that might help others.

I do not wish to continue this thread, as it seems to be annoying the very person I was wishing to be helpful to.

Last edited by losttrip (12.03.2020 22:11:44)

Offline

Liked by:

colinax, stefanek, florian

#18 12.03.2020 22:11:19

colinax
Administrator

Re: ckEditor Developer Edition add Alignment options in Image Properties

huch, great job losttrip

Offline

Liked by:

stefanek

#19 12.03.2020 22:11:23

stefanek
Developer

Re: ckEditor Developer Edition add Alignment options in Image Properties

Thanks @losttrip
It will help others who look for an answer to the same problem next time.


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

Offline

Liked by:

florian

#20 12.03.2020 22:53:41

losttrip
Member

Re: ckEditor Developer Edition add Alignment options in Image Properties

@stefanek - this isn't really a problem.  I was just trying to look for ways to improve or streamline the ckEditor user experience of adding these elements (responsive alignment and lightbox / colorbox type effects) to images, as it's one of the most often used workflows in my experience.

I know I said I didn't want to continue... but I just wanted to stress, that I don't believe this is the best solution, and would not suggest it to others.

I am not happy with the link being implemented via a script as then there is not the usual hover link state.  There is no feedback to the user on hover, no URL shows, no change in cursor (I know this can be added with css, but that's just a band-aid solution).

I'm also not happy with the pic2left css being in the editor.styles.js file as opposed to the template css file.

But as I said back in my initial posts...my search continues.

Enjoy your day!

Offline

#21 12.03.2020 23:14:03

stefanek
Developer

Re: ckEditor Developer Edition add Alignment options in Image Properties

I see.

Let us know in case you found a better way.

Out of couriosity I will have a closer look at how it is implemented now into WBCE.
I know I had it all figured out at some point, but it's long time ago already, many CKE versions ago it is.

My final solution was to have a editor JS and a editor CSS File in my template (I don't remember the exact names of the files but those differed from the ones we use today).
I also had to bind/include the editor CSS file into my frontend template for it all to work.

So I will have a look at it tomorrow and consult with colinax. I don't want to bypass him on this matter because he is putting enormous effort into the upgrading and maintainance of CKE for WBCE.
But I agree that it is a good idea to see if it could be streamlined somehow, maybe a better how-to/tutorial or a slightly different implementation of it all.

BTW I also like to use notepad++ for many things. I even programmed some of my earlier modules using only notepad++ and I always liked that it's so lightweight, opening fast and ready to go on the spot.
Nowadays I do most of my work using NetBeans. It's a love/hate relationship to be honest (mostly for its slowness). But the more I work with it the more I appreciate its scope of potential.
I guess the Visual Studio thingy is similar, I somehow gravitated towards NetBeans as it was in vouge among the members of aother project I used to support a while ago.

In any event, have yourself a nice day,
Christian

Last edited by stefanek (13.03.2020 00:18:18)


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

Offline

#22 13.03.2020 03:06:38

losttrip
Member

Re: ckEditor Developer Edition add Alignment options in Image Properties

colinax wrote:

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

I want you to know I was never suggesting this.  I might have sounded like it, but that was not my intention.  The best solution is obviously one which works harmoniously with future versions of ckEditor for WBCE.  I have read the docs about plugins and widgets, but I was trying to see if there was a way to make even little usability improvements with the way the Image Properties dialogue is presently and maybe some default styles.

Not being 100% happy with my last attempt, I have been testing your suggestion of styling the a tag.  This allowed me to put all the pic2left etc. classes into the styles.  There is a trade off as now users have to add their image URL AND link URL (they can Browse or copy paste the image URL), but this approach keeps the pic styles in the template css file where they belong and the frontend image is a natural link with expected behaviour.

This is the editor.styles.js for this trial:

    /* 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' } },

I toyed with the idea of automatically populating the image link URL with the image URL, but I don't want EVERY image to have a link by default.

That's all for today.  Thanks again for your efforts.

Offline

#23 13.03.2020 13:43:49

stefanek
Developer

Re: ckEditor Developer Edition add Alignment options in Image Properties

colinax wrote:
losttrip wrote:

And the link in the readme - https://github.com/Colinax/CKEditor/tre … wb_config) is 404 because of the closing bracket at the end.  I didn't notice the bracket until now.

@colinax, losttrip is right, the link you provided has a closing bracket at the end.
https://github.com/Colinax/CKEditor/tre … /wb_config) <-- red emphasized by me

So where the F is the correct README.md?  cool

@losttrip, you need to understand, English is second (or third) language for the most of us here on this board. It can happen that things are not received/understood by the recipient as intentioned by the sender.  tongue
Thanks for your patience :-)

Last edited by stefanek (13.03.2020 13:45:15)


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

Offline

#24 13.03.2020 14:16:51

stefanek
Developer

Re: ckEditor Developer Edition add Alignment options in Image Properties

losttrip wrote:

This looks hopeful...

## CKEditor 4.4
New Features:
* Introduced the [`config.image2_alignClasses`](https://ckeditor.com/docs/ckeditor4/lat … ignClasses) option to configure the way images are aligned with CSS classes.
  If this setting is defined, the editor produces classes instead of inline styles for aligned images.

...and the way the "Captioned Image" checkbox is implemented here, is how I envision a "Colorbox Image" checkbox option appearing.
https://ckeditor.com/docs/ckeditor4/lat … mage2.html

@losttrip,

have you implemented this plugin to your CKE?
Did it work well?

@colinax, isn't it a good idea to have this plugin added to the CKE package shipped with WBCE?
Nevermind, I see it's already part of the package.

Last edited by stefanek (13.03.2020 14:52:02)


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

Offline

#25 13.03.2020 14:51:20

stefanek
Developer

Re: ckEditor Developer Edition add Alignment options in Image Properties

@losttrip

when you add the following code;

,
{
        id: 'isPopup',
        type: 'checkbox',
        label: 'popup image',
        requiredContent: features.popup.requiredContent,
        setup: function( widget ) {
                this.setValue( widget.data.isPopup );
        },
        commit: function( widget ) {
                widget.setData( 'isPopup', this.getValue() );
        }
}

Just after this line:
https://github.com/WBCE/WBCE_CMS/blob/d … e2.js#L527
you will have a checkbox in the dialogue box.
But it will have no functionality at all.

Please consult the cke forums for help.
I'm positive that there will be some people who are much better equipped to help you to get it working.
You can use the above sample as a starting point.

I'd love to figure it out myself, but my time is very limited and I am not very much into the cke code, which is pretty much complex to say the least.

Please let me know in case you have it all working.

Best regards,
Christian


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

Offline

Board footer

Powered by FluxBB

up