Using CKEditor plugins to represent server-side content elements

Events happening in the community are now at Drupal community events on www.drupal.org.
mathieso's picture

Paragraphs and slices make a lot of sense, but the authoring experience can get a bit clunky. One possibility it to use CKEditor plugins to be the user interface to server-side elements.

An example, from CyberCourse. There's a content type called Pseudent Pose (stands for pseudo-student). Pseudent Pose nodes have a title, description, images, and taxonomy terms. See pose.png below.

Authors insert them in content with a button in the toolbar. See toolbar.png. The button opens a dialog for authors to choose a pseudent pose. See dialog.png.

The author selects one, and it's inserted into CKEditor. See pp-edit1.png. The author types in whatever the pseudent should say. To change what the pseudent says, click on the text, and type. To choose a different pseudent pose, double-click on the image, and the dialog opens again.

The author experience is clean. Instance parameters, like what the pseudent says, are edited directly in CK.

The idea is the same as paragraph's. The difference is that the interface is kept in CK's iframe (or div or whatevs).

Is this worth pursuing?

Kieran

AttachmentSize
pose.png49.36 KB
toolbar.png10.5 KB
dialog.png29.75 KB
pp-edit1.png41.99 KB
pp-edit2.png44.26 KB

Comments

Wysiwyg fields?

ptsimard's picture

Sounds similar to what Wysiwyg Fields does:

https://www.drupal.org/project/wysiwyg_fields

Is this what you mean?

Aye, that's it! Didn't know

mathieso's picture

Aye, that's it! Didn't know about this. Thanks.


Kieran Mathieson
kieran@dolfinity.com

Or use styles?

fkelly12054@gmail.com's picture

While I understand the desirability of structured content, especially for complex situations, I also am concerned that paragraphs and the other solutions being proposed here are clunky and overkill for simpler situations (use cases in Drupalism lingo). I've read several paragraphs articles stating that trying to insert and format multiple images and flow text around them within a set of body tags is not desirable, thus paragraphs. This thread deals with using ckeditor plugins instead and like so much else references modules that have no Drupal 8 version.

How about just making it easier and more reliable to inject styles into the ckeditor box. Right now, to avoid having custom styles overwritten by the next Drupal update, you have to write a sub-theme and deal with the fact that the ckeditor iframe doesn't see styles from the rest of the page. And each site admin has to write his own styles, regardless of his CSS expertise.

Instead, how about a set of styles based on flexbox that could be accessed within the ckeditor window and used to align images and text in a responsive way. Make it customizable of course and extendable but also make it independent of any theme update overwriting the customization.

I find it hard to see why you could not do some pretty complex content layout using css styles in the ckeditor window without the complexity involved in the other solutions proposed in the structured content group postings.

I agree with you that

mathieso's picture

I agree with you that Paragraphs is clunky for the editor. Not an option for me.

Styles aren't enough, though. Objects that editors add to content might involve database queries, Ajax calls, and other data-fetchy things, each time a site visitor looks at content.

What I do now is write custom CK plugins for each object type, with an accompanying Drupal module. That works well, but is costly compared to a more general solution that a site builder could use.

I should read up on flexbox (again). That does sound like a good approach to use across the plugins. Last time I looked - a while ago - browser implementation was iffy. Time to take another look.

Kieran


Kieran Mathieson
kieran@dolfinity.com

Styles aren't enough

fkelly12054@gmail.com's picture

thanks for the reply Kieran. I'd agree that styles aren't enough. They could handle a much greater percentage of (uggh ...) "use cases" for content authors within ckeditor if it wasn't such a p.i.t.a. to apply them. No reason a given article prepared by ckeditor couldn't contain a 2 column layout, followed by a one column layout, followed by a 3 column area all managed by flexbox based styles that are responsive to various device types.

The go to article that I've found on flexbox is:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

and browser support has improved significantly since that was written a couple of years back.

The AdaptiveTheme theme for Drupal 8, (which has a stable release! -- though not everything works) has a bunch of layouts based on flexbox. I haven't figured out how to use them but am working on it.

By the way, views offers a way to generate pages based on database queries and doesn't involve writing your own modules and ckeditor plugins. I'm sure you knew that though.

Structured Content

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: