Webspark ckeditor plugins module comes with a number of plugins for the ckeditor that add or alter the functionalities of the rich text editor when creating new content.
This alters the existing CKEditor image2 widget plugin, which is already altered by the Drupal Image plugin.
- Allow for the image margins to be set
- Allow for rounded-corners to be applied to the image
When the user inserts a new image in the CKEditor, there are several options available for the margins in the form of drop-down lists for setting margins on the image. In the Extra section we have an option (checkbox) to make the image round
Adds an icon to the ckeditor that creates a webspark block quote.
- Webspark block quote adds a template for a quote. The template contains a div with uds-blockquote class, font awesome specific quotation icons and citation specific tags.
- Add the content, name and description for the quote.
- Edit the content, name and desription for an existing qoute.
The icon has to added in the toolbar. Check this in the /admin/config/content/formats When clicking on the icon, the quote popup will prompt. By summiting the popup, the structure will be generated in the text editor. You can edit and existing one by selecting the quote in text editor and click on the icon.
Adds an icon to the ckeditor that creates a webspark button.
- The webspark button is a span tag inside a <a> tag with a class "btn".
- You can choose the style of the button
- It also has the context menu for changing the styles.
The icon has to added in the toolbar. Check this in the /admin/config/content/formats Add the button from the toolbar, fill the fields and save. Right click to change the options.
Adds an icon to the ckeditor that creates a webspark divider.
Adds a hr tag with a class "copy-divider".
The icon has to added in the toolbar. Check this in the /admin/config/content/formats Click on the button to add the divider.
Adds an icon to the CKEditor that inserts a Highlighted Heading.
- Allows headings (H1, H2, H3, H4) to be created.
- Allows highlight to be applied to the headings (Gold, Grey 7, White)
A highlighted heading can be inserted using the icon in the toolbar. When clicked, the text, color and heading type options will be available to be set. In order to edit an existing one, one needs to double-click the text inside the editor.
Adds an icon to the CKEditor that adds a Lead element.
- Adds a paragraph with the class "lead".
A lead element can be added by first selecting the text inside the editor and then press the lead icon in the toolbar.
This plugin alters the functionality of the ordered and unordered lists.
- Adds the required classes for the ASU
- Adds a context menu to be able to change the style
- On SHIFT+ENTER a "list item description" in the form of "<span>" is generated
Once the module is installed and the unordered list or ordered list icons are on the ckeditor toolbar, the plugin modifications appear when you click on these icons or if you right click on an existing list inside the ckeditor.
To create an icon list
- Create an unordered list.
- Right click on the list and select one of the Icon List options
- Click on the begining of the list item
- Click on the icon named "Font Awesome" (the flag shaped) and choose the icon
This plugin adds extra styles to the remote video media by executing a JS script.
Applies styles to the remote video by executing a script on "saveSnapshot" event.
The webspark table plugin replaces the default table that comes with the ckeditor to match webspark needs.
- Adds the required classes on the table and inside the table for the ASU
- Adds the option to change those classes on the context menu
The new icon needs to be added in the specific format : /admin/config/content/formats If the icon is added, you can click on it in the ckeditor. Another way to interact with the plugin is through the context menu, by right-clicking on an existing table inside the text editor.
There was no way to alter the default table, so the current plugin copies a lot from the ckeditor table code.
These plugins are built on the ckeditor version 4.
Drupal 8.x. or Drupal 9.x