Skip to main content
100%

WYSIWYG to CKEdtior hooks

✓ Published0🌍 Public
Aalexfinnarn
Last edited Aug 8, 2018
Created on Aug 8, 2018

This example shows how a Drupal module integrates a custom code syntax highlighting button into CKEditor through two hook implementations. The first hook, `hook_wysiwyg_plugin`, registers a plugin button for the CKEditor instance, while `hook_ckeditor_plugins` defines the plugin’s JavaScript file, button label, and icon image path. The code specifies the plugin’s location via `backdrop_get_path()` and uses t() for translatable UI strings, demonstrating the API contract for extending editor functionality in Backdrop CMS.

AI-generated description

Similar vizzes

Loading thumbnail…

final plugin code

This example shows a CKEditor plugin that adds a button labeled "Code Syntax Highlighting" to the editor toolbar, which triggers a custom dialog for generating code snippets. The plugin registers a command and dialog using the CKEDITOR API, and the button’s icon is loaded from the plugin’s image directory. It integrates with Backdrop and jQuery, wiring the command to the dialog so users can insert highlighted code through the editor interface.

Aalexfinnarn
73% match
Loading thumbnail…

need to add variables to pass into function

This visualization demonstrates how to extend the CKEditor rich-text editor with a custom plugin that injects syntax-highlighted code snippets into the editing area. The code defines a CKEditor plugin named `code_sc`, registered via `CKEDITOR.plugins.add`, which integrates with the editor’s toolbar and dialog system to insert formatted code blocks. It uses jQuery to bind event handlers and manipulate the editor’s DOM, while leveraging CKEditor’s native APIs for command execution and content insertion. The example shows the plugin’s initialization logic, including how it registers buttons and dialogs, but does not include the actual syntax-highlighting engine or rendering logic.

Aalexfinnarn
65% match
Loading thumbnail…

no page_alter

This example shows a Backdrop CMS module hook that conditionally loads JavaScript and CSS assets for code syntax highlighting on specific node types. It uses `hook_page_alter()` to check the current node’s type against configured enabled types, then calls `backdrop_add_css()` and `backdrop_add_js()` to include the Highlight.js library, a theme stylesheet, and a custom inline script that triggers `hljs.initHighlightingOnLoad()`. The rendering approach relies on server-side PHP logic rather than a client-side visualization library, with asset paths derived from `backdrop_get_path()`.

Aalexfinnarn
57% match
Loading thumbnail…

user role config info hook

This example shows a Drupal-style configuration hook that defines user role settings for a site. It demonstrates how the `hook_config_info()` function registers two role prefixes, `developer` and `site_owner`, each with name and label keys and a shared group label. The code returns an array of prefix definitions, mapping each role to its metadata structure. It uses the Backdrop CMS configuration API, specifically the `config_info` hook pattern, to declare configurable items without any rendering or data visualization logic. The data source is the hardcoded PHP array of role definitions.

Aalexfinnarn
52% match
Loading thumbnail…

Tailwindcss play link https://play.tailwindcss.com/jJ7APsi5d8 ide window prime for embedding some code

This example showcases a Tailwind CSS-based user interface for a code editor window, rendered as an SVG. It demonstrates a responsive layout with a top toolbar containing window controls and a sidebar toggle button, alongside a document title linking to a GitHub source file. The code uses Tailwind utility classes for styling, including grid layouts, flexbox, and custom pseudo-element effects for hover states. A reset button triggers a visual refresh, while the interface is designed with accessibility features like ARIA labels and focus states. The layout adapts across breakpoints, showing hidden elements on smaller screens.

HHugoberry
50% match
Loading thumbnail…

Gist d75e8f2f712233fda719

This example shows a TinyMCE popup dialog that inserts image tags into a document, built with jQuery and the tinyMCEPopup API. It displays a form for entering an image’s alt text and CSS class, then uses the `mceInsertContent` command to inject the generated `<img>` element into the editor. The code listens for clicks on file-browser buttons, constructs a `/media/` path from the button’s `data-forimage` attribute, and positions the dialog relative to the current scroll position. No data visualization is present; the example focuses on editor integration and DOM manipulation.

Aandybak
50% match
Loading thumbnail…

Gist 23705f481029d7e1cb22973540188d19

This snippet demonstrates a WordPress performance optimization technique by filtering the `style_loader_tag` hook to modify how stylesheet links are rendered. It shows the `add_rel_preload` function, which replaces standard `<link>` tags with preload directives that include an `onload` handler to swap `rel='preload'` to `rel='stylesheet'`, enabling asynchronous CSS loading. The code uses WordPress PHP APIs (`add_filter`, `is_admin`) and outputs a heredoc string with the HTML. It explicitly avoids altering output in the admin panel, targeting front-end performance only.

KKopylovVitalik
48% match
Loading thumbnail…

Introducción a asistente de páginas web con WYSWYG Web Builder 19

This example documents a hands-on lab for WYSWYG Web Builder 19, a visual web design tool, guiding users through a 30-day demo installation and template exploration. The workflow involves downloading the Windows-only app, experimenting with drag-and-drop editing of colors, fonts, and layouts, and excluding database and form features. A rubric scores installation, template familiarity, test edits, and tool usage, with a final step requiring users to back up their work as a ZIP file. The markdown file embeds a screenshot from a Gist, illustrating the edited design and serving as a submission record for GitHub-based version management.

IIoTeacher
48% match