PHPackages ubc-web-services/ubc\_ckeditor\_widgets - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. ubc-web-services/ubc\_ckeditor\_widgets ActiveDrupal-module[Templating & Views](/categories/templating) ubc-web-services/ubc\_ckeditor\_widgets ======================================= A Drupal module to add some common widgets to CKeditor 4.3.6(7mo ago)021.4k↓32.7%2[1 issues](https://github.com/ubc-web-services/ubc_ckeditor_widgets/issues)[7 PRs](https://github.com/ubc-web-services/ubc_ckeditor_widgets/pulls)JavaScriptCI failing Since Jan 14Pushed 3mo ago7 watchersCompare [ Source](https://github.com/ubc-web-services/ubc_ckeditor_widgets)[ Packagist](https://packagist.org/packages/ubc-web-services/ubc_ckeditor_widgets)[ RSS](/packages/ubc-web-services-ubc-ckeditor-widgets/feed)WikiDiscussions master Synced today READMEChangelog (10)DependenciesVersions (80)Used By (0) ubc\_ckeditor\_widgets ====================== [](#ubc_ckeditor_widgets) A Drupal module to add some common widgets to CKeditor Working with the javascript --------------------------- [](#working-with-the-javascript) Plugin source should be added to `js/ckeditor5_plugins/{pluginNameDirectory}/src` and the build tools expect this directory to include an `index.js` file that exports one or more CKEditor 5 plugins. Note that requiring `index.js` to be inside `{pluginNameDirectory}/src` is not a fixed requirement of CKEditor 5 or Drupal, but a requirement of this starter template that can be changed in `webpack.config.js` as needed. In the module directory, run `yarn install` to set up the necessary assets. The initial run of `install` may take a few minutes, but subsequent builds will be faster. After installing dependencies, plugins can be built with `yarn build` or `yarn watch`. They will be built to `js/build/{pluginNameDirectory}.js`. co Custom Styles ------------- [](#custom-styles) Custom styles can be added to the widget dropdowns via the configuration form at: /admin/config/content/ubc-ckeditor-widgets ### Styles per widget [](#styles-per-widget) The following style / widget combinations are supported: WidgetBackground ColourPaddingMarginGapShadow2 Column Layout3 Column LayoutTable StylesTable Column WidthAccordionAccordion ToggleCard: Horizontal✓✓✓Card: Vertical (1)✓✓✓Card: Vertical (2)✓✓✓✓Card: Vertical (3)✓✓✓✓Colour Box✓✓✓✓Columns (2)✓✓✓✓✓✓Columns (3)✓✓✓✓✓✓Columns (4)✓✓✓✓✓Table Class✓Table Cell Class✓### Custom style prefixes [](#custom-style-prefixes) To add custom styles, you must ensure your custom class maintains the following prefixes (`.prefix-[customclass]`): WidgetRequired PrefixBackground Colour`bg-`Gap`gap-`Margin`my-`Padding`p-`Shadowcustom styles not supported2 Column Layout`align-`3 Column Layout`align-`Table Styles`table-`Table Column Width`w-`### Adding Custom Style Support to the Theme [](#adding-custom-style-support-to-the-theme) There are two parts to this. You need to provide your custom styles to the theme and to the editor. 1. THEME - these styles are added to your main stylesheet - that will be sufficent to have the applied styles reflected correctly. 2. EDITOR - create a separate stylesheet that contains your custom widget styles. To ensure the styles don't leak into your admin theme, it is recommended to that you prefix every style with the class `.ck-editor `, ending up with something like `.ck-editor .bg-myclass`. You can then reference this stylesheet in your \[theme\].info file like so: ``` ckeditor5-stylesheets: - css/customeditorstyles.css ``` CKEditor 5 widgets ------------------ [](#ckeditor-5-widgets) ### Goals: [](#goals) - make editor widgets for CKEditor 5 that retain feature parity tothose from CKEditor 4 - CKE4 and CKE5 widgets should exist in one module - CKE5 widgets from repo #2 and #3 should be moved to repo #1 (can leave repo #2 and #3 as is) - final markup in CKE5 widgets should be the same as is currently used by the CKE4 widgets ### Version 4 widget repos: [](#version-4-widget-repos) 1. [https://github.com/ubc-web-services/ubc\_ckeditor\_widgets/tree/vanilla-js](https://github.com/ubc-web-services/ubc_ckeditor_widgets/tree/vanilla-js) 2. 3. ### CKE 4 widgets \[CKE 5 widget status\]: [](#cke-4-widgets-cke-5-widget-status) - accordion \[complete\] - accordion toggle \[complete\] - card-horizontal \[complete\] - card-one \[complete\] - card-two \[complete\] - card-three \[complete\] - 2 columns \[deprecated\] - 2 columns 1 2 \[deprecated\] - 2 columns 2 1 \[deprecated\] - 3 columns \[deprecated\] - fontawesome icon \[deprecated - no cke5 equivalent\] - 2 columns with options \[complete\] - 3 columns with options \[complete\] - 4 columns with options \[complete\] - Color Box \[complete\] Net new CKE5 widgets: --------------------- [](#net-new-cke5-widgets) - UBC Table Class (adds presentational classes to table elements) \[complete\] - UBC Table Cell Class (adds width classes to TD elements) \[complete\] CKEditor API ------------ [](#ckeditor-api) - v4: - custom widget example: - - v5: - plugin examples: - - Drupal resources ---------------- [](#drupal-resources) - Dev Tools for CKE5 - [https://www.drupal.org/project/ckeditor5\_dev](https://www.drupal.org/project/ckeditor5_dev) - CKE5 Drupal API - - Development guide - ### Health Score 51 — FairBetter than 95% of packages Maintenance75 Regular maintenance activity Popularity27 Limited adoption so far Community16 Small or concentrated contributor base Maturity73 Established project with proven stability Bus Factor1 Top contributor holds 98.4% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~34 days Recently: every ~57 days Total 64 Last Release 211d ago Major Versions v2.0-beta3 → v3.0-beta12020-03-11 v2.0-beta4 → v3.0-beta22020-07-15 3.1.20 → 4.0.02024-06-24 3.1.21 → 4.0.22024-06-28 3.x-dev → 4.0.32024-12-19 ### Community Maintainers ![](https://www.gravatar.com/avatar/bb2057c95b72281166d1223f90909ff8440a29a5ee5f450cf0d71194563dda94?d=identicon)[occupant](/maintainers/occupant) ![](https://www.gravatar.com/avatar/b6c1e9ad0b426341d05e305d124a5e013c722962ce6ce98c036318e6f1e8dc76?d=identicon)[gocaps](/maintainers/gocaps) --- Top Contributors [![occupant](https://avatars.githubusercontent.com/u/130125?v=4)](https://github.com/occupant "occupant (190 commits)")[![darkodevubc](https://avatars.githubusercontent.com/u/40574086?v=4)](https://github.com/darkodevubc "darkodevubc (2 commits)")[![joelpittet](https://avatars.githubusercontent.com/u/70129?v=4)](https://github.com/joelpittet "joelpittet (1 commits)") ### Embed Badge ![Health badge](/badges/ubc-web-services-ubc-ckeditor-widgets/health.svg) ``` [![Health](https://phpackages.com/badges/ubc-web-services-ubc-ckeditor-widgets/health.svg)](https://phpackages.com/packages/ubc-web-services-ubc-ckeditor-widgets) ``` ### Alternatives [limenius/react-bundle Client and Server-side react rendering in a Symfony Bundle 3851.2M](/packages/limenius-react-bundle)[area17/laravel-auto-head-tags Laravel Auto Head Tags helps you build the list of head elements for your app 4616.1k](/packages/area17-laravel-auto-head-tags)[jelix/wikirenderer WikiRenderer is a library to generate HTML or anything else from wiki content. 1712.3k1](/packages/jelix-wikirenderer)[webkinder/sproutset A Composer package for handling responsive images in Roots Bedrock + Sage + Blade projects. 282.2k](/packages/webkinder-sproutset) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)