How to set default custom ratio for image crop while open image editor
Question
Hey @artf , Thanks for creating such a helpful open source library.
@artf i am working on open image editor while user change photo from Select Image modal.
I got success to open image editor while user close select image modal, with the help of this code.
var cmdm = editor.Commands;
editor.on("stop:open-assets", function () {
cmdm.run('tui-image-editor');
});
But when this modal will open i want to set custom crop ratio in editor by default, and that default cropper ratio user can't change also user can't use other image editor other options like flip, mask, text, draw, filter and etc. Only default cropper ratio and redo, undo and reset options can be enable other options need to be hide or disable.
How can i achieve with this command editor.commands.run('tui-image-editor');?
As i am thinking need to pass some configuration object into this above command. If yes then can you please help me that configuration keys which can be helpful for me?
Or if i don't need to pass that configuration object into above command then what will be other option for me to achieve this functionality.
Your answer will be helpful for me a lot.
Answers (3)
Hey @artf , I guess i found something helpful for another users.
I debug the code from https://github.com/artf/grapesjs-tui-image-editor git repo and i guess i can achieve all the above functionality and many more customize functionalities like Tui image editor(This is the main library which is use into grapejs-tui-image-editor).
But there i can't figure it out how can i re-initialize grapesjs-tui-image-editor.min.js !
Actually if we re-initialize grapesjs-tui-image-editor.min.js when image editor opens, then value of variable opts will be change if we pass something in options parameter and then based on that again getEditorConfig will also re-generate.
So, now when user will call below command from editor,
editor.commands.run('tui-image-editor', 'Options will be here')
Then again opts will be change and getEditorConfig function will return new configuration for below function,
this.imageEditor = new constr(content.children[0], this.getEditorConfig());
And based on that the next image editor will be open based on new configuration.
Just help me how to re-initialize the grapesjs-tui-image-editor.min.js while new image editor opens, i can implement rest of whole things and create a merge request to you.
I hope this can help you and you will also help us to make more flexible.
As you can see here https://github.com/artf/grapesjs-tui-image-editor#options
there is a config option available for the plugin which will be called on every initialization by this.getEditorConfig() so just place your options there
@artf, I already tried man, but seems not working.
In this.getEditorConfig() function we are not getting updated options.
I also try with log to print updated config in after this line const config = { ...opts.config };, but seems config prints initial configuration object(When i initialize editor at that time whatever i passed pluginsOpts for grapesjs-tui-image-editor).
Anyways i resolved this issue from my side. Let me know if you want me to generate PR request.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1748
How to prevent drag items inside the editor
Hello @artf You are doing great job with grapesjs and it's extremely helpful to make our functionality more user friendly. Thanks for creat...
Issue #1399
Change the trait view
Hi Artf, Thanks for your great work i really wonder for your work. I have small doubt in trait management i would like to open modal instea...
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 #3415
QUESTION: Custom Asset Manager. How to set bg image
Hi there! I'm building a custom modal for the Asset Manager and basically, it seems that I need to override command. How I can understand i...
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.