image not change while we fetch html using editor.getHtml()
Question
Hello @artf
I am using grapes.js for my website-builder tool into my website. While i double click on any image the asset-manager will open and i can choose the image from asset-manager.
Now thing is that i putted the conditions like once user will choose any image from asset-manager i will replace that img tag with div tag and initialise oneimage-editor (It's cropper.js) at there.
Now once i close the asset manager after selection of image the new path of image is set and also the new div will also set instead of img tag.
Once user will click on done button inside the editor(i mean image editor), then it will gives us the base-64 image i also replace the updated base-64 image into the UI but once i get the actual html content using editor.getHtml() i only get the updated path img tag instead of replaced div and base:64 image path.
Can i know how can i update the new image path (base-64) while i get html content using editor.getHtml()?
Here i attaching the screen-cast video for the same, https://drive.google.com/file/d/1zeUcO8aVXDCeWCVakHpbycgHGtfnU4Qa/view
Answers (3)
You didn't show any code but I guess you've just edited DOM elements of the component when instead you should change its Component model data (eg. imgModel.set('src', 'base64....'))
Hello @artf Thank you for your reply on my query.
I am attaching my code here, please let me know at where i am going wrong.
// This will execute once asset manager will be open
editor.on("run:open-assets", function () {
var dateNow = Date.now();
editor.getSelected().setId(dateNow);
// Store active asset manager image id and it's src
localStorage.setItem('activeAssetManagerImageId', dateNow);
})
So, basically above code will be run while user will double-click on particular image. In this function i am going to add one random generated id attribute in selected image.
Now i also called the stop:open-assets,
editor.on("stop:open-assets", function () {
// Here i am taking `src` from the `Dom` with `activeAssetManagerImageId` which is saved into `local-storage` and checking if both previous `src` and current `src` is not matched then i am going to initialize the cropper otherwise not. Now once user will be done with editing image i have one button and on button i called the one function. In this function right now i am changing the image `src` using jQuery which is working fine. But when i get `editor.getHtml()` It's not reflacted.
})
I have tried with like, This code is working fine while i am going to use .set function with opts. But here issue is that when i am adding this 3 lines then the assetManager is not going to open.
editor.Commands.add('open-assets', function(editor, sender, opts) {
opts.target.set('src', 'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg');
});
If there any editor.command method while user is choose the image and close the assetManager it will be run with three params like editor, sender, opts, so using this opts i can set the new image path which will be reflects into the UI as well as into model, so, when i will get the whole HTML then this src should be updated.?
or else how can i get this three params editor, sender, opts into the editor.on("stop:open-assets" function?
I did whatever, i tried to explained you here. If you still not get my point then let me know i will explain it again, but please give me some kinds of the example or something so i can get more idea about how can i achieve my goal with fantastic grapes.js lib as well people who have invented this.
Thanks in advance for your help.
In this function right now i am changing the image
srcusing jQuery which is working fine. But when i geteditor.getHtml()It's not reflacted.
... @AkibDeraiya123 this is exactlly what I told you in my previous comment... DON'T EDIT the DOM with JQuery... edit the model as I told you
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1719
Event while click on image from asset modal
Hello @artf , Hope you are doing well. I am working on asset-manager. I have total 5 images as a default asset-manager image. I want to do...
Issue #1660
Content will automatically removed while edit in editor
Hello @artf I am facing an issue with grapes.js while editing any textual content. I am using grapes.js Version 0.14.37 with angular 1.6.1....
Issue #1817
Change HTML content while block is render in editor
Hello @artf I have one block into block manager like As per above script inside the block, i want to add dynamic HTML content while this bl...
Issue #1780
How to change extra dropdown for link change trait
Hello @artf , I want to give one more functionality to user like user can change any link with default links drop down. In above image i wa...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.