Comments (14)
Is there going to be any update here? I feel like this is super close and would add alot of value to our users. We simply need to have both options present - not one or the other.
from react-email-editor.
@tsu1980 this feature is now available. It would work like this:
unlayer.registerCallback('selectImage', function(data, done) {
done({ url: imgUrl })
})
from react-email-editor.
@milicadj2 this issue has been fixed
from react-email-editor.
@tsu1980 this is a good solution, we are looking into this.
from react-email-editor.
Thank you for a quick response!
I tried using selectImage
callback. I have a few points and questions.
- When I register
selectImage
callback, Upload image drag here area is disappeared, I would like to use both. Is it possible? - I think select image button label is wrong, it should be "Select Image" instead of "Upload Image".
- I would appreciate if it can set ALT text too!
Anyway, thank you again for great work!
from react-email-editor.
Thanks for implementing this as well
Our use case, sounds similar to @tsu1980, and we'd like the user to either choose from a file on their system or one from our existing image gallery, so we'd want both options.
I also agree that the button/link should say "Select Image" or "Choose Image" instead of "Upload Image".
Just to give you an idea of what we were hoping for, we had tried to implement this feature inserting HTML into the DOM and were going for something like this:
<div class="blockbuilder-widget-label">
<label class="blockbuilder-label-primary">
<span>Image Gallery</span>
</label>
<label class="blockbuilder-label-right">
<button type="button" onClick="CALLBACK HERE" class="btn btn-link btn-sm">
<span>Choose Image</span>
</button>
</label>
</div>
from react-email-editor.
Any update here?
from react-email-editor.
Any update on this?
from react-email-editor.
Our company is a new customer of Unlayer and we would also like the option to use both scenarios, as robmack and tsu1980 described. The mockup that robmack submitted would be ideal as it would give our users the best of both worlds.
from react-email-editor.
Image library is now supported. Check the following docs:
https://docs.unlayer.com/docs/images
from react-email-editor.
Can I get the current image url in the data:
unlayer.registerCallback('selectImage', (data, done) => {
let imageUrl = data.url
})
from react-email-editor.
@tsu1980 this feature is now available. It would work like this:
unlayer.registerCallback('selectImage', function(data, done) { done({ url: imgUrl }) })
@tsu1980 @adeelraza i am not getting registerCallback method in unlayer object. What can be the issue?
i also tried to use addEventListener event, but showing same issue.
My unlayer object in console, without registerCallback
React: (...)
ReactDND: (...)
ReactDOM: (...)
createEvent: (...)
createPanel: (...)
createViewer: (...)
createWidget: (...)
hidePreview: (...)
loadBlank: (...)
loadBlocks: (...)
loadConfig: (...)
loadDesign: (...)
loadProject: (...)
loadSession: (...)
loadStockTemplate: (...)
loadTemplate: (...)
loadUser: (...)
loadUserUploads: (...)
registerColumns: (...)
registerPropertyEditor: (...)
registerTab: (...)
registerTool: (...)
reloadProvider: (...)
setAppearance: (...)
setBodyValues: (...)
setCustomCSS: (...)
setCustomFonts: (...)
setCustomJS: (...)
setDesignMode: (...)
setDesignTags: (...)
setDesignTagsConfig: (...)
setDisplayConditions: (...)
setDisplayMode: (...)
setLinkTypes: (...)
setLocale: (...)
setMergeTags: (...)
setMergeTagsConfig: (...)
setSpecialLinks: (...)
setTranslations: (...)
showPreview: (...)
startSession: (...)
Symbol(Symbol.toStringTag): "Module"
__esModule: true
get React: ()=>dl._$
get ReactDND: ()=>dl.FB
get ReactDOM: ()=>dl.gE
get createEvent: ()=>dl.yM
get createPanel: ()=>dl.wf
get createViewer: ()=>dl.i9
get createWidget: ()=>dl.A4
get hidePreview: ()=>dl.wE
get loadBlank: ()=>dl.yW
get loadBlocks: ()=>dl.tX
get loadConfig: ()=>dl.ME
get loadDesign: ()=>dl.$7
get loadProject: ()=>dl.Cb
get loadSession: ()=>dl.dF
get loadStockTemplate: ()=>dl.LT
get loadTemplate: ()=>dl.$k
get loadUser: ()=>dl.II
get loadUserUploads: ()=>dl.mV
get registerColumns: ()=>dl.m
get registerPropertyEditor: ()=>dl.Ty
get registerTab: ()=>dl.uh
get registerTool: ()=>dl.ZD
get reloadProvider: ()=>dl.IL
get setAppearance: ()=>dl.xt
get setBodyValues: ()=>dl.Wn
get setCustomCSS: ()=>dl.Ue
get setCustomFonts: ()=>dl.kJ
get setCustomJS: ()=>dl.Y9
get setDesignMode: ()=>dl.SW
get setDesignTags: ()=>dl.gr
get setDesignTagsConfig: ()=>dl.kF
get setDisplayConditions: ()=>dl.Wg
get setDisplayMode: ()=>dl.UC
get setLinkTypes: ()=>dl.yh
get setLocale: ()=>dl.i
get setMergeTags: ()=>dl.pQ
get setMergeTagsConfig: ()=>dl.zp
get setSpecialLinks: ()=>dl.Cz
get setTranslations: ()=>dl.Yh
get showPreview: ()=>dl.Bx
get startSession: ()=>dl.yj
proto:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
defineGetter: ƒ defineGetter()
defineSetter: ƒ defineSetter()
lookupGetter: ƒ lookupGetter()
lookupSetter: ƒ lookupSetter()
get proto: ƒ proto()
set proto: ƒ proto()
from react-email-editor.
For react
const onLoad = () => {
ref.editor.registerCallback('selectImage', () => {
// console.log('image label disapears')
const input = document.createElement('input')
input.setAttribute('type', 'file')
input.click()
input.onchange = () => {
const files = input?.files
if (!files) return
const file = files[0]
// file type is only image.
if (/^image\//.test(file.type)) {
// this.sendToServer(file)
console.log(file)
} else {
console.warn('You could only upload images.')
}
}
})
}
from react-email-editor.
Hi :)
When I try to select image from my own gallery, as soon as I click on "Upload Image" button, I get this error:
"Invalid result passed to selectImage callback. Expected object with url, width, height and size. Received: undefined"
My implementation is the same as in https://examples.unlayer.com/media/custom-media-library/
To me it seems that the problem might be the src value within img tag. It looks like it has to be in a certain format so that the mentioned error is not shown.
Regardless of this error, the images from custom gallery are shown and can be selected properly.
It seems that everything work fine despite this error message.
How to get prevent displaying of this error?
Btw, I have implemented the unlayer using classic js and html within mvc application .
from react-email-editor.
Related Issues (20)
- Docs for Custom CSS - Available classes / variables to edit HOT 6
- Hide Drag and Drop
- Rich Text Editor doesn't work properly in custom tool.
- Adding custom loading spinner component HOT 2
- Usage and Save Post API request fails with 502 Request Code Bad Gateway HOT 4
- Running unlayer.init in React HOT 3
- Query regarding the APIs Auth Session triggered
- AccessDeniedAccess error HOT 10
- date field in form (Unlayer)
- image export failing
- List overflow causes vertical spacing between blocks
- Box on left and right side
- loading template in react-email-editor HOT 6
- How to add API-KEY in react-email-editor HOT 1
- how can disable a card like "HTML" and "menu" if we don't need it. IS there any option to disable cards HOT 1
- Renders twice with latest nextjs HOT 1
- "design:updated" event is not triggered when consecutive changes are made to the currently focused element HOT 1
- manage colors via design tags
- Editor is reloading when press ENTER in the link inputs HOT 1
- Unlayer Types not correct for the newer version HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-email-editor.