search

backdrop / backdrop-issues

Issue tracker for Backdrop core.
144 stars 38 forks source link

Add plugins to ckeditor available in D7 contrib module via CDN, but not in Backdrop core. #3875

Open Egarbeil opened 5 years ago

Egarbeil commented 5 years ago

Description of the need The D7 ckeditor contrib module has a lot more options and configuration available than in Backdrop. The issue that I'm looking at right now is the buttons available on the toolbar are extremely limited compared to what we currently use. I'd like to see those options added to the Backdrop core implementation of ckeditor, rather than having to disable the core module and use a contrib version of ckeditor. It's a deal breaker for some of our clients to be able to have those available for use. What we do now is basically just load the full package from the CDN and then eliminate the buttons we absolutely do not want the client to use (flash for example)

The full list buttons (plugins) that we have available for our clients (and ourselves) is:

(edit: I've grouped these into the sets below - but they up for discussion)

These are done already:

These we can & should add to core:

These are handled by the browser or OS already, and maybe don't need to be repeated in the editor:

These are probably be best left to contrib:

Proposed solution Ideally, I'd like those to be included as available on the configuration page. We can then enable what we need.

Alternatives that have been considered Right now, it looks like we will need to disable the ckeditor module in core and port over the D7 version of ckeditor using the CDN, which will give us the full set of plugins. We will also lose all the integration with Backdrop, but it's a non-negotiable with many of our clients. TinyMCE for Wordpress has the full set available by default as well, but I don't really want to use Wordpress.

Is there a contributed module that accomplishes this? ...if so, then has this been ported to Backdrop?: https://github.com/backdrop-contrib

I don't think so. I was planning on doing the port myself.

...if not, then look here to see if anyone has already requested it to be ported: https://github.com/backdrop-ops/contrib/issues

No, it has not.

...if not, then create a request for it to be ported: https://github.com/backdrop-ops/contrib/issues/new Ckeditor already exists in core and I would rather see that module updated than port a contrib module.

Additional information

D7-global-config-page
olafgrabienski commented 5 years ago

Hi @Egarbeil, welcome to the Backdrop issue queue!

The full list buttons (plugins) that we have available for our clients (and ourselves) is: Source Cut Copy Past Spell Check (...)

Which of the buttons are not available for Backdrop?

klonos commented 5 years ago

Hey @Egarbeil, as @jenlampton also proposed over in Gitter, it would be best if you listed what's missing in Backdrop, so we can consider adding it in.

Loading the vanilla CkEditor from CDN would most likely break things (for one, it would certainly break adding managed images/files).

serundeputy commented 5 years ago

There is this contrib version of ckeditor: https://github.com/backdrop-contrib/ckeditor and a few that look like they provide enhancements to ckeditor: https://github.com/backdrop-contrib?utf8=%E2%9C%93&q=ck&type=&language=

@Egarbeil could be good starting points for your contrib project; or maybe you just request maintainer status to one or more of those modules.

klonos commented 5 years ago

https://github.com/backdrop-contrib/ckeditor was an initial port, before CKEditor got merged into Backdrop core:

This is the first official release of this port to Backdrop. In a future release of Backdrop it is expected that CKEditor will be incorporated in Core and this contributed module will no longer be needed.

I think that it'd be safe to start from scratch (or merge any commits that happened in the past 4+ years in the 7.x version), and then port things over again (rename drupal* functions to backdrop* ones etc.). There are 2 releases, and the respective module page in b.org only states the fact that it's been merged into core in 1.2: https://backdropcms.org/project/ckeditor

Also, as @jenlampton mentioned on Gitter:

As far as your port of the ckeditor module - you may need to change it’s name. There is already a module in core called “ckeditor” (the one that provides the integrations), and a bunch of checks throughout core to see if a module with that name is available. If there were a different module with the same name, that might reek havoc.

I do think this sounds like a good (fast?) alternative though - use a module to load the full CKE build via CDN, and disable the core ckeditor module. You’d loose everything that ties the editor to the CMS, but you’d get a closer experience to what you had in D7.

Egarbeil commented 5 years ago

@olafgrabienski - of the list I mentioned, these are the ones that are missing:

Spell Check Find Replace Select All iFrame Indent Outdent Div RTL (right to left) LTR (left to right) Anchor Font Size Font Color Background Color Horizontal Line Teaser Break

There are others too, but these are the ones we need. The others are either already there or our clients don't use or don't have access.

Egarbeil commented 5 years ago

@serundeputy, I would rather that the functionality I need be merged into core. The contrib module would be only an interim fix, as it loses the functionality gained from core integration. I would only do it as a short term solution to hopefully be removed in the near future.

klonos commented 5 years ago

I will take some time over the coming weekend to look into those missing ones you've mentioned @Egarbeil, but for starters, may I ask why the need fr spell check specifically, when you have support to use the native browser spellchecker?:

Screen Shot 2019-06-21 at 5 19 02 am

serundeputy commented 5 years ago

this is how we build the ckeditor lib for backdrop: https://ckeditor.com/cke4/builder/6fb1cc844895a936c156bd50f7fafd26 so presumably we can add the desired plugins and file a PR

Egarbeil commented 5 years ago

@klonos, that one's less critical, but we have some clients very attached to it. I could live without it if we had to. Also could live without RTL and LTR for now, but would need that later on for non-English sites I'd rather not move to Wordpress.

jenlampton commented 5 years ago

@Egarbeil Native Browser spell check wasn't available in ckeditor before, so maybe let your editors give the new way a shot first and let us know if that doesn't work out - and if not, please tell us why. Our thinking was that browsers will advance more quickly than ckeditor will, so this approach will give all our editors the best possible experience, both now and also as things change in the future.

I've re-ordered the list of tags in the top issue into several sets:

My ordering is open to discussion, so if anyone feels that one or more of them need to be moved, please let us know here :)

Also for those interested in all rich-text editor follow up issues, see our project: https://github.com/backdrop/backdrop-issues/projects/1

Egarbeil commented 5 years ago

@jenlampton,

Where do I find the documentation on how to create the contrib module for creditor plugin? I mean the creditor plugin specifically. I think there’s plenty of documentation on on creating a general contrib module (plus I think it works just like D7). I know it sounds stupid, but you would not believe how many of my clients use that functionality when creating pages.

Warmest regards,

Elisabeth Garbeil, MBA PMP Brainwrap LLC "Being on the web doesn't have to make your head hurt." www.brainwrap.com (810) 560-7181 egarbeil@brainwrap.com

On Jun 20, 2019, at 8:10 PM, Jen Lampton notifications@github.com wrote:

@Egarbeil https://github.com/Egarbeil Native Browser spell check wasn't available in ckeditor before, so maybe let your editors give the new way a shot first and let us know if that doesn't work out - and if not, please tell us why. Our thinking was that browsers will advance more quickly than ckeditor will, so this approach will give all our editors the best possible experience, both now and also as things change in the future.

These we can / should add to core

Div (do we have this already?) iFrame Indent Outdent RTL (right to left) LTR (left to right) Anchor Horizontal Line Teaser Break #1222 https://github.com/backdrop/backdrop-issues/issues/1222 These are handled by the browser already:

Spell Check #2071 https://github.com/backdrop/backdrop-issues/issues/2071 Find Replace Select All These may be best left to contrib:

Font (best handled by theme + editor styles) Size (best handled by theme + editor styles) Font Color (best handled by theme + editor styles) Background Color (best handled by theme + editor styles) Also for those interested in all rich-text editor follow up issues, see our project: https://github.com/backdrop/backdrop-issues/projects/1 https://github.com/backdrop/backdrop-issues/projects/1 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/backdrop/backdrop-issues/issues/3875?email_source=notifications&email_token=AJ4HZVQ5YZKT6PODUQYR57LP3QMBDA5CNFSM4HZN35QKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYHCAQY#issuecomment-504242243, or mute the thread https://github.com/notifications/unsubscribe-auth/AJ4HZVRWLJGISRDQW2IWHLLP3QMBDANCNFSM4HZN35QA.

jenlampton commented 5 years ago

Where do I find the documentation on how to create the contrib module for creditor plugin?

All the documentation is general because it needs to work for everyone working on every contrib project. Your best bet for this one would be to copy the pieces you need (like loading ckeditor from CDN) out of the Drupal 7 version of the ckeditor module, and paste them into your new ckeditorplus module (or whatever you decide to name it), then change the names of the hook implementations.

I mean the creditor plugin specifically.

I would check to see if there is any documentation for how to add ckeditor to a website (one that is not Drupal) on the ckeditor website and go from there.

you would not believe how many of my clients use that functionality when creating pages.

I believe it! 100% of my clients used a rich-text editor on their Drupal sites too. All of them have adjusted to using the Backdrop editor without any issues, and they all appreciate the superior integration and simplicity of doing things the new way :) The only thing I regularly get complaints about is the missing teaser break plugin.

Egarbeil commented 5 years ago

I was more thinking about documentation on how to do a contrib module for the extensions to ckeditor core module for the specific functionality you were mentioning that would not be rolled into core (i.e. font color, background color, etc.). If I need to do it for a client, I might as well do it for everyone. I don’t think I will have a problem creating a temporary ckeditor contrib module until the core is where I need it. I can pretty much cannibalize what was done earlier for that. Someone gave me the URL for the old backdrop CKEditor contrib module.

What I’m not sure about is how to add plugins for the existing core ckeditor module. I looked at doing it (very briefly) for D8 when we were evaluating it and the cost was way too prohibitive. It was also definitely not easy.

In terms of other websites, I’m pretty familiar with Wordpress, Joomla, Zencart, Open Cart and Cube Cart. They all just have a small module that just loads the CDN and goes from there. TinyMCE advanced (Wordpress) is the most complex and they still just load the CDN for the editor itself.

I get the teaser break! I have clients that use it religiously too. But for some reason, I have some clients that love being able to make fonts and backgrounds any color they want. It can be frightening.

Warmest regards,

Elisabeth Garbeil, MBA PMP Brainwrap LLC "Being on the web doesn't have to make your head hurt." www.brainwrap.com (810) 560-7181 egarbeil@brainwrap.com

On Jun 21, 2019, at 5:35 PM, Jen Lampton notifications@github.com wrote:

Where do I find the documentation on how to create the contrib module for creditor plugin?

All the documentation is general because it needs to work for everyone working on every contrib project. Your best bet for this one would be to copy the pieces you need (like loading ckeditor from CDN) out of the Drupal 7 version of the ckeditor module, and paste them into your new ckeditorplus module (or whatever you decide to name it), then change the names of the hook implementations.

I mean the creditor plugin specifically.

I would check to see if there is any documentation for how to add ckeditor to a website (one that is not Drupal) on the ckeditor website https://ckeditor.com/ and go from there.

you would not believe how many of my clients use that functionality when creating pages.

I believe it! 100% of my clients used a rich-text editor on their Drupal sites too. All of them have adjusted to using the Backdrop editor without any issues, and they all appreciate the superior integration and simplicity of doing things the new way :) The only thing I regularly get complaints about is the missing teaser break plugin.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/backdrop/backdrop-issues/issues/3875?email_source=notifications&email_token=AJ4HZVV7SBK3JDNQLAKCFATP3VCQLA5CNFSM4HZN35QKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYJUP7A#issuecomment-504580092, or mute the thread https://github.com/notifications/unsubscribe-auth/AJ4HZVWTXMNXP7EHSNS2UOTP3VCQLANCNFSM4HZN35QA.

jenlampton commented 5 years ago

Someone gave me the URL for the old backdrop CKEditor contrib module.

That could be a good starting point, but it may be more work than all the other alternatives. You could give it a try and see if it feels closer to what you want.

They all just have a small module that just loads the CDN and goes from there.

This is one solution that I was thinking about for contrib (instead of the above). It would be quick to build, and would give you something similar to what you had in Wordpress, Joomla, Zencart, Open Cart and Cube Cart. You'd loose all the CMS integration, but if your customers didn't have that before anyway, it could be fine.

I was more thinking about documentation on how to do a contrib module for the extensions to ckeditor core module for the specific functionality you were mentioning that would not be rolled into core (i.e. font color, background color, etc.). If I need to do it for a client, I might as well do it for everyone.

Do you mean... how to write a contrib module to add back the missing buttons? (Are those called extensions in ckeditor? shows how much I know!)

This is my ideal vision for contrib as people wouldn't loose the CMS integration we've provided. Now for how do it... Have you tried hook_editor_info_alter()? I'd start there and poke around.

herbdool commented 5 years ago

Screenshot_20190622-004310

One thing missing in this thread is a full accounting of which buttons are available. By going to the text formats and editors link in the admin and selecting full HTML I was able to add all of the above (a bit messy). It includes div, horizontal line, preset styles, undo/redo, super/sub script, clear formatting, etc.

As for adding ckeditor plugins see this API https://github.com/backdrop/backdrop/blob/1.x/core/modules/ckeditor/ckeditor.api.php

klonos commented 5 years ago

OK, I've updated the issue summary to move a bunch of things in the "These are done already" section, and to also include links to CKEditor plugins that provide the feature (if available).

What is "Div"? Is it https://ckeditor.com/cke4/addon/divarea, or perhaps https://ckeditor.com/cke4/addon/div ??

Also, we have https://ckeditor.com/cke4/addon/table, which allows adding/editing a table by specifying number of rows/cols etc.:

Screen Shot 2019-06-22 at 5 25 00 pm

...perhaps consider https://ckeditor.com/cke4/addon/bootstrapTable as an alternative?

We also seem to have https://ckeditor.com/cke4/addon/tableselection and https://ckeditor.com/cke4/addon/tabletools, which allow things like "Cell properties"

Screen Shot 2019-06-22 at 5 35 15 pm Screen Shot 2019-06-22 at 5 37 32 pm

https://ckeditor.com/cke4/addon/tableresize (although we should perhaps consider replacing it with https://ckeditor.com/cke4/addon/tableresizerowandcolumn which also allows resizing rows, instead of only columns)

This one may also be good for better UX with tables: https://ckeditor.com/cke4/addon/ckeditortablecellsselection (intuitive table cells selection, like MS Excel or Google Docs)

For indention, I have found the following to be available:

Finally, we may also consider:

PS: notable mention (for Wp feature parity): #1477

klonos commented 5 years ago

...some of these can be contrib. We already have the following:

https://github.com/backdrop-contrib/ckeditor_addon https://github.com/backdrop-contrib/ckeditor_autogrow https://github.com/backdrop-contrib/ckeditor_fixed https://github.com/backdrop-contrib/ckeditor_mentions

Egarbeil commented 4 years ago

Right now, I seen indent and outdent the major ones that are missing. I think this issue is still important.

jenlampton commented 4 years ago

Yeah... where the heck are indent and outdent? I must admit I never use them myself (I use tab and shift-tab on my lists...) but they should be in the available buttons.

docwilmot commented 4 years ago

Proof of concept for adding plugins https://github.com/backdrop-contrib/ckeditor_indent Could use the same scaffolding to build other requested plugins.

If its satisfactory we can release.

Egarbeil commented 4 years ago

@docwilmot it works great! I think the long term idea would be to fold into core, but this is a great interim solution, along with adding a great example of how to add other plugins should the need arise.