I just want to display html text inside a textArea for exemple if I write <h1>Header</h1> I want it to be displayed as header not with the tags.
I tried with webBrowser but it didn't work.
Codename Ones text area doesn't support it. What you're looking for is a rich text edit which we don't have. What you can do is use the BrowserComponent and in it open an HTML rich edit and use that.
There used to be a CN1LIB that did that seamlessly but because JS frameworks break constantly it stopped working.
Related
I have a sortable collection of TinyMce editors and when an editor is moved, this one doesn't work anymore.
The TinyMCE editor iframe turn empty after drag end event but I don't understand why.
The editor toolbar is here but doesn't work and the content disappear without possibility of typing in it again.
Is there a way to reinitialize the dragged editor with his initial content after drag end event.
I'm using Reactjs and #dnd-kit/sortable.
Moving the iFrame editor around the DOM is not supported. If you want to move the editor you can achieve this by removing the editor with remove() and reinitializing it with init() once it has been moved.
https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.root/#remove
https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.root/#init
The other alternative is to run TinyMCE in inline mode:
https://www.tiny.cloud/docs/tinymce/6/use-tinymce-inline/
I want to display HTML in my forms. The problem is I have to use a Boxlayout to place my components. So when I put a WebBrowser I'll have some height and scroll issues. I get the HTML I want to display from a webservice. The length of the content is variable. I just want to display a part of this response. Here is what I already have:
The webBrowser is below the edit button and ends near the LBL_LIB_NOM label.
As you can see the webBrowser is way too high and I can't scroll the Form when I click over the WebBrowser. In this example I would like to reduce the size of the WebBrowser so we can only see the Title. I also would like if possible to scroll my form when I click on the WebBrowser since I don't want the WebBrowser to scroll.
I have tried a few things to solve my issue:
I tried to override the calcPreferredSize method.
I revalidate my form and my webbrowser.
I resized it's container using the deprecated setPreferedSize method.
In that case the container is well sized but the the WebBrowser displays
above the other components.
The usual answer I have seen in other posts is to put the WebBrowser in a BorderLayout but I can't do that.
So here is my question: Is there any other component I can use to display one HTML line ? Or is there a way to make a webBrowser work properly in a boxLayout ? Do I have to write my own HTML renderer ?
I'm guessing you want box layout so you can scroll... This is problematic.
Web views generally expect to scroll themselves and this is common in native widgets which handle their own events and thus scrolling. It's hard for our code to know when your swipe is intended for us or to the underlying native widget and it's harder still to do this in a consistently portable way.
There are 3 options:
Use only Codename One code
Use a border layout or similar layout
Use the web browser for the entire UI of this form
If you want to take the first option this article might be useful as a starting point.
We have a nifty AngularJS 1 app and we're using TextAngular add on. Works great. We now have the requirement to add the customer's custom header into our work, which is being added via JS AJAX call and it inserts the HTML into the page. This header is using CKEditor. I've asked to remove it but they can't. As a result, when I click into my TextAngular box, the CKEditor toolbar appears.
Thoughts on how I can separate the two? It appears CKEditor is attaching itself to any div where contenteditable="true". Is there a way to tell CKEditor to ignore divs?
I am using the Angular Google maps directive to show maps on my webpage. Currently my markers are created using SVG but this is slow as I have to pass my information into a function that creates an SVG in memory to pass to the Google Icon. So I want to replace it with a custom HTML marker which will hopefully be less code and can leverage CSS classes for lots of the heavy lifting.
Unfortunately this isn't available as standard within the Angular Google Maps markers (unless I havent seen it?!)
I found a tutorial on how to do this with Overlays but I need clustering to work with my icons.
How can I do this? Without rewriting everything from scratch? Ideally I'd like to leverage as much of the existing angular-google-maps code as possible
The way I ended up doing this was to put in rich HTML into the labelContent property, setting a class on it via labelClass and then setting the icon to be transparent (https://maps.gstatic.com/mapfiles/transparent.png)
This way the actual icon is invisible but you can create rich HTML / CSS markers through the label. And this doesnt break functionality with the clusterer
I am new to drupal and im on practicing the product. How would someone add a button on a page using the WYSIWYG without having to have any HTML or CSS knowledge. I am confused.
You can try this markup in your WYSIWYG in Plain text mode.
TEXT
Then swich to Full HTML and save page.
Then you can add some styles.