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!
Related
I am using the Quill editor (via ngx-quill) to give my user the ability to edit documents. When the documents are displayed I show them like this:
<div [innerHTML]="doc.text"></div>
This works reliably, but the styling of the content of the div tag is quite different from what you see in the Quill editor window. What I want to do is apply the Quill content stylesheet to my div tag, but I haven't been able to find any document to do that. Does anyone here know how to do that?
I know one alternative is to invoke a Quill editor in read-only mode and without a tool-bar. That's my fall-back but I would prefer not to do that.
I was facing the same issue. Some inline styles are displayed, but the styles applied from the Quill.js class are not applied. post-content is class of div containing the content:
let content=document.querySelector('.post-content')
content.innerHTML=content.innerText
The text in my popups is unselectable. I am able to close popups via click, etc., but when hovering the pointer over the text, the pointer remains as the hand icon, and never changes into the I-beam text selection icon. I've tried adding the popups a few different ways, to no avail:
//with visgl/react-mapbox-gl:
<Popup latitude={0.0} longitude={0.0}>this text is unselectable</Popup>
//via the regular api:
new MapboxGL.Popup()
.setLngLat([0.0, 0.0])
.setHtml(<h1>this text is also unselectable</h1>)
.addTo(map);
//this method that I copied from somewhere:
const placeholder = document.createElement('div');
ReactDOM.render(<h1>still unselectable</h1>, placeholder);
new MapboxGL.Popup()
.setDOMContent(placeholder)
.setLngLat()
.addTo(map);
In the Mapbox examples, their text is selectable. Any idea why mine isn't? Thanks.
I believe it will be difficult to get to the exact cause without a running example. Here are some ideas:
Use the same class they use in the examples for the content: mapboxgl-popup-content
Inspect the HTML and see if there isn't some sort of invisible layered element on top of your text. From the Browser DevTools, in the "Inspector" (Firefox) or "Elements" (Chrome) tab, by hovering the tags, you'll be able to see the bounding box of each rendered element like so:
Similar to the point before, check for the z-index CSS property in the rendered element to see if something isn't layering on top of your content
Lastly, there's also the cursor CSS property which you can use to force the cursor's appearance.
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 have developed app using Codename one.I want to set specific height of dialog because my text overidden while displaying message in dialog body .what should I do for that?
Thanks in Advance?
I have added image in which first image is original image and second one is cut image which is displaying on screen while using infinite progress bar. my code is "Dialog ipDialog = new InfiniteProgress().showInifiniteBlocking(); ipDialog.Dispose()" I want whole image on screen like original image.
can you help me to solved this ?
You can use the Dialog show method that accepts int values to determine the distance from the edges. But normally this is a matter of the text sizing and dialog construction.
Also make sure you are showing the Dialog from the EDT thread.
How to use an image as a button in GTK in c language in code blocks? I have tried making the button of same color as that of the background and then adding image on it. But there is a outline or shadow still there. So, how can i remove those shadows or is there a way to directly use an image as a button?
One way is outlined by #Shabhaz, by putting the image in an EventBox, and handling the button-press event.
The other way is by placing the image in the button and customizing the style of the button to remove the outline and the shadow. You would call gtk_rc_parse_string() to define an outline-less button class, and gtk_widget_set_name() on your button to apply the style.