Skip to main content
100%

need to add variables to pass into function

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

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.

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
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
65% 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
59% 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
55% match
Loading thumbnail…

Gist cf65d4442946f9016d84d3562f267824

This example demonstrates a dynamic plugin system for an Angular application that loads and initializes modular features at runtime. The code uses Angular’s `Compiler` and `Injector` APIs to asynchronously compile and instantiate modules, while the `SettingsService` supplies the list of plugins to activate. It shows how plugins can be defined either as direct Angular injector definitions or as objects containing an `ngModule` and optional providers, which are then compiled and attached to the application’s root injector. The rendering approach is code-based, with no visual output, focusing on the service layer that orchestrates lazy-loaded functionality.

HHypercubed
54% match
Loading thumbnail…

#javascript

This example demonstrates a JavaScript code editor that maintains focus and blur states for a text input area. The snippet configures event handlers for editor focus and focus loss, using a React component that passes `onEditorFocus` and `onEditorLoseFocus` callbacks through its props. It shows how the editor responds to user interaction by triggering these custom methods, which could update a visualization or UI state. The code relies on React’s event system and component props to manage the editor’s behavior, with no external libraries like d3 or Canvas involved.

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

Visualization Editor

This example demonstrates a visualization editor built on the Chiasm runtime engine, where a configuration file drives the layout and properties of interactive dummy visualizations. The code uses the `configEditor` plugin to render a side panel with clickable numbers and colors, while the `layout` plugin arranges panels A, B, and C in a nested box layout. Dragging the X lines in the dummy visualizations propagates changes back to the configuration. The implementation relies on RequireJS, D3.js for JSON loading, and the Chiasm package system to wire together plugins at runtime.

CCurran Kelleher
53% match