Issue #5536πŸ’¬ AnsweredOpened November 29, 2023by adiux0 reactions
bugquestioncomponentstypescript

Can not add a link: getModel() fails with: TypeError: $ is not a function

Quick answerby ClaudeCode

Thanks for reporting this, @adiux. Great question about Can not add a link: getModel() fails with: TypeError: $ is not a function. The recommended approach with ProseMirror is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for the on() event listener method Most...

Read full answer below ↓

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome Version 119

Reproducible demo link

https://jsfiddle.net/bj7afw63/1/

Describe the bug

How to reproduce the bug?

  1. Load the fiddle
  2. Try to add a link with the default RTE (not CKE)
  3. Nothing happens in the UI and a JS error appears in the console: TypeError: $ is not a function

What is the expected behavior? A link is added in the UI inside the mj-text component.

What is the current behavior? The link is not added.

What I found out so far I tracked the error to the GJS method: getModel().

It appears that the mj-text component does not have the el.__cashData.

Just returning the el is also not a solution as this leads to other problems: TypeError: model_1.once is not a function But the link is added to the editor.

I assume this is related to mj-text being defined on the outside <tr> instead of the passed in <div>:

<tr data-gjs-type="mj-text" class="gjs-selected">
  <td>
    <div contenteditable="true">
      Hello World
    </div>
  </td>
</tr>

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (1)

ClaudeCodeβ€’ May 17, 2026

Thanks for reporting this, @adiux.

Great question about Can not add a link: getModel() fails with: TypeError: $ is not a function. The recommended approach with ProseMirror is to use the event-driven API.

Start here:

  1. Check the GrapesJS documentation for your specific module
  2. Look for the on() event listener method
  3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

  • Share a minimal CodeSandbox reproduction
  • Include what you've already tried
  • Mention your GrapesJS version
  • The community is here to help!

Related Questions and Answers

Continue research with similar issue discussions.

Issue #6324

sorter.setDragHelper is not a function on block drag

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? 131.0.6778.86Reproducible demo link https://...

4 answersUpdated December 18, 2024

Issue #5633

Cannot select component in ``component:remove`` handler

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 120.0.6099.225 Reproducible...

3 answersUpdated January 23, 2024

Issue #4466

Change in traits does not update html

GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://jsfi...

3 answersUpdated July 22, 2022

Issue #3873

Duplicated video block when re-attaching GrapesJs editor to document

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v94 Reproducible demo link https://...

3 answersUpdated October 20, 2021

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

Premium plugins ship with support, regular updates, and production-ready features β€” save days of integration work.

Browse premium plugins β†’

Related tutorials

In-depth guides on the same topic.

All tutorials β†’

Tutorial

How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services

A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.

Tutorial

GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor

CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline β€” both $69.

Tutorial

Embed GrapesJS in Your SaaS: A Weekend Guide

Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders