Comments (12)
Hi Nicholas, what happens when you inspect the block on chrome dev tools? is the image tag shown ?
what happens on react dev tools ? did the block get the proper props ?
from dante2.
Hi !
Thank you for your answer !
First, when I upload an image using the widget, it prints an alert with the URL as expeted. And if I check my cloud service, the image is uploaded.
And the console log of blocks:
And the block props with the react dev tools :
I can't see what looks wrong :(
Nicolas
from dante2.
from dante2.
In the src property of image, I replace my cloud bucket with "mycloud" before paste it
<div data-contents="true">
<h1 class="graf graf--h2 is-selected" data-block="true" data-editor="3in64" data-offset-key="ar27o-0-0">
<div data-offset-key="ar27o-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="ar27o-0-0"><span data-text="true">This is a test for images</span></span></div>
</h1>
<figure class="graf graf--figure " data-block="true" data-editor="3in64" data-offset-key="3qajd-0-0" contenteditable="false">
<div>
<div class="aspectRatioPlaceholder is-locked">
<div class="aspect-ratio-fill"></div>
<img src="http://res.cloudinary.com/mycloud/image/upload/v1601197005/grlencrfccjmyzeuhulj.jpg" class="graf-image" contenteditable="false" alt="http://res.cloudinary.com/mycloud/image/upload/v1601197005/grlencrfccjmyzeuhulj.jpg">
<div></div>
</div>
<figcaption class="imageCaption">
<div data-offset-key="3qajd-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="3qajd-0-0"><span data-text="true">This is the image caption</span></span></div>
</figcaption>
</div>
</figure>
</div>
If I paste just the tag generated in a new html file , the image is shown:
Is it a bug in my project ?
EDIT:
If I wrap the image inside the div, it does not work. Is the css broke for me ?
<div class="aspectRatioPlaceholder is-locked">
<img src="http://res.cloudinary.com/mycloud/image/upload/v1601197005/grlencrfccjmyzeuhulj.jpg"
class="graf-image" contenteditable="false"
alt="http://res.cloudinary.com/mycloud/image/upload/v1601197005/grlencrfccjmyzeuhulj.jpg">
</div>
EDIT 2:
aspectRatioPlaceholder
alone works, is-locked
alone works, but both does not work.
from dante2.
thing is, there is an aspect ratio div that should have a height value: like this:
the block must have this state :
which version of dante2 are you using ?
from dante2.
I'm using Dante2 v0.5.0-rc9
from dante2.
ok, try 0.5.0-rc26
, let me know how it goes
from dante2.
It still doesn't work :(
When I hovered my mouse on the image link, it displayed this
I think the 0px is the problem
from dante2.
do you have some link where I can see your implementation ?
from dante2.
My repo is private, is it ok if I add you temporarily as a collaborator ?
from dante2.
sure , no problem
from dante2.
Hum after reflexion that's not a good idea. I have som config files with passwords :|
But here is my implementation
Content admin page:
const Editor = () => {
return <Dante
body_placeholder={'Start typing'}
onChange={editor => { myEditor = editor }}
widgets={[
ImageBlockConfig({
options: {
upload_url: "myurl",
upload_callback: (ctx, img) => {
alert('file uploaded: ' +
ctx.data.url)
},
upload_error_callback: (ctx,
img) => {
console.log(ctx)
},
},
}),
]} />;
};
Print page
const Focus_Editor = () => {
//Get route param
const id = FlowRouter.getParam('_id');
//Search document in mongodb
const doc = Focus.find({ '_id': id }).fetch();
if (typeof doc !== 'undefined' && doc.length > 0) {
return <Dante content={doc[0].content} read_only={true} />;
}
return null;
};
from dante2.
Related Issues (20)
- How to upload images HOT 1
- Dante Editor not rendering content HOT 3
- onChange not being triggered HOT 1
- title placeholder does not show in editor
- How to add another side button without forking the library ? HOT 3
- issues with save_handler and immutability when trying to update entries HOT 4
- onChange not work! HOT 2
- Tooltip link option doesn't show text HOT 1
- Tooltip link assumes base URL HOT 1
- Medium (+) tooltip on mobile left property not set correctly.
- Can't run app locally. npm start unexpected error HOT 1
- Delete at mobile browser
- use Focus at Dante
- Error: Element ref was specified as a string (image_popover) but no owner was set. HOT 10
- how to limit content ?
- DanteInlineTooltipConfig path is missing HOT 1
- Element ref was specified as a string (editor) but no owner was set. HOT 1
- How to use convertFromHTML
- new Dante version, repo changed
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 dante2.