B4J Library HTMLEditorWrapper - Edit HTML

I got fed up looking for a simple solution to be able to add tables to the HTML editor, so in the vein of keeping it simple I decided just to make it super easy and edit the HTML source from the Editor instead.

This wrapper just adds a code button

to the Editors toolbar and when selected displays a text area with the code from the editor which you can then edit and style with inline <style></style> tags.

​

There is also a designer property that allows reducing the space between lines as in this post If your target output is not the editor, you will need to make sure that the same css for the p tag is somewhere in your styles to maintain the look.

The attached project contains the code, and there is also a b4xlib.

The HTML editor is basic and based on some online editors. It only handles a limited amount of tags and styles, but does what I require of it : Quickly setting up simple tables.

To use, open the code editor window and place the cursor where you want the table inserted and click the Table button. To edit a table click anywhere within the table code, then click the table button. It will autoselect the table code and try to parse the tags.

I have tried to make it warn if anything is likely to be lost, and occasionally it may refuse to parse a table if it doesn't recognise the tags or style formats.

I wouldn't use the JavaFX HTMLeditor in a commercial situation as it quite often does strange things, especially when trying to do more than just basic editing. Not that I can find anything better that doesn't cost a fortune. But it is great for a programmers utility.

Enjoy.


Dependencies

Requires jSoup jar 1.14.3, download from their website

Updates:

V 1.1

• Added Indent HTML with jsoup currently 1.14.3. download from their website
• Added Indent Style tags - Custom code.
• Added mini table generator to the editor toolbar
• Added HTML table editor to the code area
• Added B4xPlusMinus click to edit (Numeric only)
• Added SL_B4xColorTemplate to allow entry of values. Accepts hex and web format color codes and optionally returns an appropriate color string.

​

V 1.2

• Bugfixes
• Restored table data remembers html styling from within the cells.
• Added Print to Job (Requires jFX8Print library and is commented out in the demo project code so you only need the lib if you want to use it.)
• Added PasteHTML to HTMLEW_Utils
• Added getWebview to HTMLEditorWrapper (Needed to turn off the context menu)
• Added insert link. If an external link is followed it is not normally possible to use a back method as the HTMLtext update is not registered in the browser history I've added an extra reload HTML button that will re-load a snapshot of the html from just before the link was followed.
• Added insert Image
  • Urls strings are not validated for insert link or insert image.
• Added edit link as a menu item.
  • The whole link needs to be manually selected by the user and although this is validated, the validation can fail if there are two links with the same href, and the text in a second link matches the selected text from the first. It shouldn't happen often, but it can screw up the html if/when it does. I guess a proper undo should be implemented but therein lies other issues.
• Added edit image as a menu item. The image must be selected prior to clicking the edit option.
• Added OpenExternal as menu item. Will open an image or link in your default external viewer. Target must be selected as above.

There are No additional external dependencies.

​

 

[stevel05]

Update to V1.1 see first post.

 

[stevel05]

Update to V1.2 see first post.

 

[jmon]

I just realized that you worked on something I was also doing on my side!

Here is something you should add to your wrapper (which is more complete than mine):

1) There is a bug in the HTMLEditor that causes it to not resize vertically. I think it's limited to 500px high. This fixes the bug:

Private Sub ChangeResizePolicy
    Dim GP As JavaObject = HTMLEditor1.As(JavaObject).RunMethod("lookup", Array("GridPane"))
    Dim WebView As JavaObject = HTMLEditor1.As(JavaObject).RunMethod("lookup", Array("WebView"))
    GP.RunMethod("setHgrow", Array(WebView, "ALWAYS"))
    GP.RunMethod("setVgrow", Array(WebView, "ALWAYS"))
End Sub

In your code, i would add that to the DesignerCreateView sub.

This is a screenshot of the bug:

 

[stevel05]

Thanks jmon, I did notice that and my planned fix was just to set the height in base resize, your solution should be more robust.

 

[Serge Bertet]

jsoup-1.14.3.jar available here.

 

[micro]

Hi Stevel05
Tanks for your wrapper.
Why can't i view png images but only jpg?
I stand corrected, that is not really the case.
Some images are not displayed whether they are jpg, png etc.
For example this one:

https://www.b4x.com/images/Logo_on-dark.png

or this

https://www.b4x.com/wp/wp-content/uploads/2021/07/Ringwood-V-Melbourne-30-June-2021_3-150x150.jpg

which is the logo of this site and another image, is not displayed and I don't understand why.
Thank you very much

 

[stevel05]

How are you displaying the images? They both work here by adding an image using the button with the resulting html:

<html dir="ltr"><head></head><body contenteditable="true" style="background:black;"><p>
<img src="file:\\C:\Users\Steve\Downloads\Logo_on-dark.png" alt="image"></p><p><br></p><p>
<img src="file:\\C:\Users\Steve\Downloads\Ringwood-V-Melbourne-30-June-2021_3-150x150.jpg" alt="image"></p></body></html>

 

[micro]

How are you displaying the images? They both work here by adding an image using the button with the resulting html:

<html dir="ltr"><head></head><body contenteditable="true" style="background:black;"><p>
<img src="file:\\C:\Users\Steve\Downloads\Logo_on-dark.png" alt="image"></p><p><br></p><p>
<img src="file:\\C:\Users\Steve\Downloads\Ringwood-V-Melbourne-30-June-2021_3-150x150.jpg" alt="image"></p></body></html>

Hi Stevel05
so you first downloaded the images from the text I see, I instead copy the image address and put it in the URL text box but it doesn't show up.
If I use your method and send an email the images do not appear because they are naturally on the pc and not on the web.
Thank you

 

[stevel05]

The links are to web pages that hold the images. You need to find the link for the actual images.

Edit:
Hmm, maybe not. I've tried it on a few images from my own server and it works as expected. It is as though it can't find the image at the address.

 

[micro]

The links are to web pages that hold the images. You need to find the link for the actual images.

Edit:
Hmm, maybe not. I've tried it on a few images from my own server and it works as expected. It is as though it can't find the image at the address.

in fact, I did several tests before posting here.
Thanks