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 5.0.0(3w ago)021.7k↓38.6%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 3w 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 1w ago READMEChangelog (10)Dependencies (2)Versions (81)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 `npm 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 `npm build` or `npm 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 API ------------ [](#ckeditor-api) - 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 56 — FairBetter than 97% of packages Maintenance94 Actively maintained with recent releases Popularity27 Limited adoption so far Community16 Small or concentrated contributor base Maturity73 Established project with proven stability Bus Factor1 Top contributor holds 98.5% 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 ~37 days Recently: every ~114 days Total 65 Last Release 25d ago Major Versions 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 4.3.6 → 5.0.02026-07-23 ### 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 (203 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 3841.2M](/packages/limenius-react-bundle)[pdewit/nova-external-url An external URL Laravel Nova field. 30383.2k](/packages/pdewit-nova-external-url)[wbrowar/guide A CMS Guide for Craft CMS. 6154.7k1](/packages/wbrowar-guide)[localgovdrupal/localgov_base The base theme for LocalGov Drupal websites. 13126.9k5](/packages/localgovdrupal-localgov-base) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)