Skip to main content
100%

final plugin code

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

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.

AI-generated description

Similar vizzes

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
79% match
Loading thumbnail…

WYSIWYG to CKEdtior hooks

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.

Aalexfinnarn
73% 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
58% match
Loading thumbnail…

Gist 305339

This example demonstrates a reusable jQuery plugin pattern for encapsulating a custom visualization or interaction, applying it to selected DOM elements with configurable defaults. The code defines a `PluginClass` that initializes on plugin call, using `$.fn.extend` and `$.extend` to merge user options with defaults. It shows the structural scaffolding for a visualization module, though it contains no actual rendering logic or data-binding calls. The implementation relies on jQuery’s event and DOM utilities, with the plugin returning `this` to support method chaining, a common convention for jQuery-based visual components. The source is a single JavaScript file from a gist, focusing on code organization rather than visual output.

DDylanFM
57% match
Loading thumbnail…

CM6 demo

This example demonstrates a browser-based code editor with syntax highlighting, line numbers, bracket matching, and undo/redo functionality. It constructs an `EditorState` with extensions including legacy JavaScript mode parsing, multiple selections, and custom keybindings. The editor view renders into a DOM element, showing a sample script that reads from the filesystem. The implementation uses the `@datavis-tech/codemirror-6-prerelease` package, which exposes APIs like `EditorState.create`, `EditorView`, `legacyMode`, `lineNumbers`, and `matchBrackets`.

CCurran Kelleher
54% match
Loading thumbnail…

Gist 4da3ecb32517e64ddc52428cdb30eaab

This example demonstrates a Sketch plugin that monitors document changes and provides real-time feedback through popup messages. It shows how the plugin reacts to three types of edits: property modifications, object deletions, and object additions or moves. The code uses the Sketch JavaScript API, including `sketch.UI.message` for notifications and `sketch.fromNative` to wrap native objects for access to parent artboards. It logs the full path of each change and distinguishes between moved objects and genuine additions or deletions, with special handling for deletions that are part of a move operation.

KKevinGutowski
53% 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
52% match
Loading thumbnail…

Gist 03ea367d00ac593217cf6770ee1cc539

This example demonstrates a Sketch plugin that launches a floating panel window with a table view interface. The code uses Sketch’s JavaScript API, `NSThread`, `NSPanel`, and `NSMakeRect` to construct a 312×210 pixel textured window, position it at the screen center, and set it to float above other windows. It manages a thread dictionary key to prevent duplicate panels, toggling the window open or closed on repeated plugin runs. The plugin calls `document.showMessage()` for user feedback and hides the miniaturize and zoom buttons via `standardWindowButton`, with the table view setup currently stubbed out.

KKevinGutowski
52% match