The Aloha Editor ships with an image plugin that enables users to edit images inline. However, i've not found a way to delete an image in the editor. I'm on a Mac, and i've tried:
Press Backspace when the image is selected
Press Backspace wehn the cursor is in front of the image
There's also no "delete image" button in the floating toolbar.
Has anyone found a way to delete an inline image?
I have a similar issue. On windows, I can delete an image by pressing the 'Del' key. However, I've used a float:right css to position the image automatically and in this case I can not delete it anymore.
I have added the following workaround in my page. It makes possible to delete the image by double-clicking on it.
$(function() {
$('.aloha img').live('dblclick', function(event) {
if (confirm("Supprimer l'image?")) {
event.preventDefault();
$(this).remove();
}
return false;
});
});
This seems to works on firefox. However sometimes I can see the image to be magically restored. On Chrome this magic behavior happens every time.
I keep investigating and I'll keep you informed if I fix this problem in a clean way.
Update: this is now fixed in aloha-editor. If you select the image and clear the src field value. See https://github.com/alohaeditor/Aloha-Editor/issues/513
You can delete the image URL from the URL field that appears when you click on the inserted image. That makes the image disappear for me. Not very convenient though. :)
Related
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 am building a new website, and want to use the srcset to let the browser deside what image is the best for the current viewport.
What happens is that what ever i put in the srcset the browser will just show the alt tag text "test". If i through F12 developer tools removes the srcset attribute completely, the image shows up just fine.
All images in my example exists and shows up in a browser:
Here is my image tag, can any one see what is wrong with that?
<img src="http://localhost/Medium/Alaska-2-1818.jpg" srcset="http://localhost/Large/Alaska-2-1818.jpg 500w, http://localhost/XXLarge/Alaska-2-1818.jpg 1000w" alt="test">
My problem is shown in this codepen i made:
https://codepen.io/AxelAndersen/project/editor/DxKeaV
In your Codepen, some URLs have an error, missing one "i".
https://codesandbox.io/s/Op8BoLzQ
If you click on the first line, the editor cursor will show, but if you click on blank space below, nothing will happen.
I've tried to set min-height to height, now it is acting correctly regarding this issue, but the content is not auto-resizable anymore.
Yes. The problem is that the part of the editor that's contentEditable is only one line right now, here's a screenshot to illustrate which part of the editor is the dom node with contentEditable set to true.
Instead, if you want to make the area of the editable interface larger, you need to style .public-DraftEditor-content
I've forked the sandbox to show this
That fixes the issue.
I am trying to use lightbox2 to display a block of text after clicking a heading element:
something like
<h3>name</h3>
I have used lightbox for images with captions but this time I would like the caption to come up without an associated image after clicking a name on a webpage.
Thanks for any replies.
I don't think that lightbox2 is made for such a thing, why don't you try http://fancybox.net/ this one works 100%.
I have built a HTML email newsletter containing an animated GIF Christmas Ecard which is being sent to all employees of a company who exclusively use Lotus Notes.
The problem I'm having is that they are receiving the email fine, but the GIF isn't animating.
Any idea if there's a way to get this working?
You could ensure that the first frame of the gif looks nice so that the animation is an 'added benefit' rather than a requirement.
That they had one come through last year seems amazing to me. But if that is actually the truth it might have had something to do with the file size being too large. You should try to keep them under 40kb
Click Create in the toolbar above the email message. Click on the Picture option and then choose GIF from the pull-down menu. Go to the folder location of the animated GIF that you want to embed in the email. Click and highlight the file. Click the Import button to add the animated GIF.