Load through URL
Pretty hard to come up with a universal solution due to CORS restrictions.
Read full answer below ↓Question
Can we add an option to load through URL?
e.g.
we pass a URL to the init and there it initializes the page with editor?
Answers (4)
Pretty hard to come up with a universal solution due to CORS restrictions.
Pretty hard to come up with a universal solution due to CORS restrictions.
Correct, if your intention is to load HTML of some external site, you should have a server to fetch the content.
@Ju99ernaut, @artf I want to load same domains' pages to edit html for.
Thanks for reporting this, @assadnazar.
Great question about FEAT: Load through URL. The recommended approach with GrapesJS 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 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 #3506
FEAT: add click event on blocks
Or Is there any way to listen for click event in block ?
Issue #3237
Add Trait For wrapper
Hi @artf I've added trait for wrapper this way. How can I perform the init function for the same Here is the code @artf Could you please he...
Issue #3169
Hi There I am trying to implement an editor where certain sections of the page are editable / droppable etc (i.e a mixed page where some el...
Issue #3376
Changing upload URL for AssetManager programmatically
I've got an situation where depending on how the Asset Manager is opened I want to pass a slightly different upload URL. In the asset:uploa...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →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.
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
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
Tutorial
Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live
We're shipping a set of discovery upgrades. New label filters, a proper compatibility switch for GrapesJS vs Studio, one-click and a smarter sort bar.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.