<input type="file" />
Can I replace the file input field (above) with a simple button:
<button type="submit">Upload</button>
File input doesn't fit nicely into the design, and styling it is a pain so if its possible to use a button instead for file uploading, thats also cross-browser compatible, that'd be awesome!
Thanks!
1- You can't call the open dialog using a button, you can just show the dialog using the input file field, or using a flash component.
2- You can work around this by putting input file on a button "using CSS" and set this input file transparent so it will look like the user is clicking on the button but infact he is clicking on the transparent input file.
Sample: http://www.quirksmode.org/dom/inputfile.html
You can style with CSS and DOM the input type file
See this page
Related
How my text appears when rendered
How my text appears in the textarea input
I am posting multi-paragraph blogs, some about poetry (where line breaks and spacings matter a lot). How do I make the line breaks and other spacing stay when I render the data? Can I make it so the user can put html tags in the textarea somehow? I am using firebase realtime database to store the data.
I tried changing the HTML tag in the rendered component from p to per, expecting to be able to use html tags, but that didn't work.
write this code on css file
white-space: pre-wrap;
After failing to load 5 TinyMCE editors on one page, I decided to create "edit" buttons which then loads the editor inside a modal.
<Modal.Body>
<FormGroup className="mb-3">
<Editor name="text" label="Text" /> //My TinyMCE object
</FormGroup>
</Modal.Body>
But when any of the TinyMCE features opens a modal of its own, none of its input controls are getting focused. Tried setting autoFocus to false on the Bootstrap Modal but still no use. I found this has been addressed in the past, as in this question. However, like the same, most responses are tailored for jQuery, which I'm not familiar with. Any React based solution?
Assuming you're using the react-bootstrap library, then you'd need to set the enforceFocus prop to false (instead of autoFocus). See https://react-bootstrap.github.io/components/modal/#modal-props
The reason this is needed is that bootstrap will try to ensure that the focus never leaves the modal dialog for accessibility purposes. This is normally fine, however in this case it conflicts with TinyMCE which itself needs to open new modal dialogs and focus the content inside (as you've already alluded to).
I am trying to create a sign-in button where the button displays 'Sign-in' when the user is not signed in and their profile picture when they are signed in.
The button displays the right things when I use text instead of an image when the user is signed in.
{!user || !isSignedIn ? 'Sign in' : 'Profile'}
I am unsure how to add the image to use as a button instead.
You are trying to wrap image inside the button tag which is wrong approach. You should use Input Tag to embedded image on button or you can use image as a backgroundUrl for button, With the help of conditional class styles you can show text or imagebackground on button. which is more obvious and better approach I think.
<input type="image" src="youpathtoimage" />
or
<button style="background: url(yourimage.png)" />
for conditional styles I've always used MUI CLSX. If you are using Material UI in your project. Try to use CLSX.
Steps to reproduce the issue::
Open the froala editor on https://www.froala.com/wysiwyg-editor.
Remove everything in the editor.
Insert an image.
Add a caption to the image.
Click outside the image and try to type.
Issue: After adding image caption, If write any text then it always written inside the image area[blue color]
Video:
In Froala: https://github.com/froala/wysiwyg-editor/issues/2597#issuecomment-386163085
Can anyone help me?
If you look at your browser's dom inspector you will see that erasing the content and adding the image leaves you with one element wrapping the image and caption, and therefore no-where else to set focus to continue typing. The quickinsert feature also fails to show as there are no block boundaries to trigger it.
Froala Editor offers a decent events API, and there is a workaround via the 'image.inserted' event which fires when an image element is added into the editor. The code below listens for this event and inserts a new para element immediately after Froala's wrapping elements around the image. When typed, your caption text is part of Froala's wrapper around the image, leaving this new para ready to accept focus and let you type into it.
$('#yourselector').on('froalaEditor.image.inserted', function (e, editor, $img, response) {
$img.after("<p>Type something here</p>"); // insert a new para or div here
});
Note the downside of the simple workaround is that you get extra content injected, but the benefit hopefully outweighs that for your use-case.
This is a plain JS solution which hopefully you can adapt for your environment.
I have previously failed to add JS snippets for Froala to SO so provide this codepen working example.
Is this what you are looking for? The text is after the image caption and not inside the image area [blue bordered].
I use the froala editor. (using angular).
I want that the first image get focus on initialize.
When I open the editor I get the editor without focus
And I want it to be with the image toolbar
What I need to write in the "froalaEditor.initialized" event for focusing the first image
Thanks!