I'm using quill editor v 1.3.7 inside primeng Editor. There is a strange behavior with whitespaces before an element. First line is my inout, second line is the content of the editor after reloading the stored string of step 1.
<p>line1</p><p><br></p><ul><li>e1</li><li>e2</li></ul>
<p>line1</p><p><br></p><p><br></p><ul><li>e1</li><li>e2</li></ul>
So I store the content with one linebreak before the lit element, after reloading the content quill editor adds an extra linebreak. Does anybody know how to fix this?
I was facing the similar issue.
On debugging the problem, I found that the problem was occurring because of the faulty CSS.
In the styles.scss, I was trying to override the ul and ol attributes to add custom margin for block-start and block-end. This was the main culprit due to which the extra line break was automatically getting introduced on the editor at the time the data was being populated into it.
On removing the custom css, it fixed the issue.
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].
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 got the very strange bug with angular-ui bootstrap tooltips. When its attribute tooltip-append-to-body set to true on some pages (not all of them) it doesn't work. Every time I hover the target element angular-ui appends the element to DOM (look at the screenshot), and don't delete it on "unhover".
I will be very appreciated for any thoughts about possible reasons.
I found the reason of such a strange behavior:
on those pages when the bug happens I have the 3rd-party SVG component, which is using foreignObject. This foreignObject hosts html with the body tag in it...
I would like to remove the image handlers in the aloha-editor but i can't figure out how.
I tried using settings.contenthandler.allows but it didn't work.
Remove the default image plugin from the plugins list. But to remove handling for images, removed the selection range from the document.
document.selection.empty();
i have a form that contain htmleditor field...
in report module, the content/value of thoose field must be readable and printable
so i am using someone answer to make it printable..
at first, i just make it using displayfield, and just load it using getForm().setValues()
it done,..
this is the simple demo
but now i have a problem...
try to insert bullet/numbering...
and then klik "set and display"...
there is no bullet exist..
i think this is because in main.css they set li{ list-style: none;}.
how to fix it??? how to display htmleditor content in displayfield??
There is no need to include ext-all.css in printing frame. When you remove it, the bullets will be visible. Another thing - why you use this display field? You can print content right away without setting it to displayfield. Example: http://jsfiddle.net/EVYm3/5/