B4J Question Change HTMLEditor bgr-color/font/size

ThRuST

Well-Known Member
Licensed User
I've answered my own questions about the HTMLEditor control so this post now works as a reference to this very powerful control. Please add your contribution to it for properties I did not cover if you want. The HTMLEditor control handles .htm (.html) files to read and write from the control. Examples:

Save

B4X:
Dim HTMLEditor As HTMLEditor

File.WriteString("c:\myfolder\","TestHTML.htm",HTMLEditor.HtmlText)
Load

B4X:
Dim HTMLEditor As HTMLEditor

HTMLEditor.HtmlText = File.ReadString("c:\myfolder\","TestHTML.htm")
Focus (Erel's code)

B4X:
Dim HTMLEditor As HTMLEditor

Dim jo As JavaObject = HTMLEditor
   Dim r As Reflector
   r.Target = jo.RunMethodJO("getSkin", Null)
   jo = r.GetField("webView")
   jo.RunMethod("requestFocus", Null)
   jo = jo.RunMethod("getEngine", Null)
   jo.RunMethod("executeScript", Array("document.body.focus()"))
   jo.RunMethod("executeScript", Array($"
   var el = document.body;
if (typeof window.getSelection != "undefined"
  && typeof document.createRange != "undefined") {
   var range = document.createRange();
   range.selectNodeContents(el);
   range.collapse(false);
   var sel = window.getSelection();
   sel.removeAllRanges();
   sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
   var textRange = document.body.createTextRange();
  textRange.moveToElementText(el);
   textRange.collapse(false);
   textRange.select();
}
   "$))
I'd like someone to add how to actually clear the textbox by using this way, as it will be most useful as an option. Hopefully Erel want to add his answer to how to do this.
 
Last edited:

ThRuST

Well-Known Member
Licensed User
It's possible to set the default style 'webpage look' at runtime by doing this:
B4X:
HTMLEditor.HtmlText = "<body style='background-color: #404043; color: white; font-family: Consolas; font-size: 12px;'/>"
However the value for font-size must be two pixels higher than what's showing in Scene builder 2, why I don't know.
Hopefully someone else can answer that question. Also if you can, post your solution to how to change all of the other properties that is visible inside the HTMLEditor control as it will be of great help for everybody else who's going to use the HTMLEditor control, which is very powerful.
You can also add your own buttons to the empty area of the control, which can be very useful. Please add your answers to this post, thanks.
 
Last edited:

ThRuST

Well-Known Member
Licensed User
About the HTMLEditor:

You can style each button in the toolbar separately. The following are the list of style-class names for the toolbar buttons. The names are self-explanatory, for example, html-editor-align-right and html-editor-hr are the style-class names for the toolbar buttons used to right align text and draw a horizontal ruler, respectively.

CSS
B4X:
·  html-editor-cut
·  html-editor-copy
·  html-editor-paste
·  html-editor-align-left
·  html-editor-align-center
·  html-editor-align-right
·  html-editor-align-justify
·  html-editor-outdent
·  html-editor-indent
·  html-editor-bullets
·  html-editor-numbers
·  html-editor-bold
·  html-editor-italic
·  html-editor-underline
·  html-editor-strike
·  html-editor-hr
Use the button and toggle-button style-class names if you want to apply styles to all toolbar buttons and toggle buttons:

CSS
B4X:
.html-editor .button, .html-editor .toggle-button
{
-fx-background-color: lightblue;
}
The HTMLEditor hows two ColorPickers for users to select the background and foreground colors.
Their style-class names are html-editor-background and html-editor-foreground. The following code shows the selected color labels in the ColorPickers:

CSS
B4X:
.html-editor-background
{
-fx-color-label-visible: true;
}
.html-editor-foreground
{
-fx-color-label-visible: true;
}
Hope this helps :rolleyes:
 

Harris

Expert
Licensed User
These (posts) would be most helpful as code snippets, after you asked and answered (resolved) your own questions.
Perhaps there is a move (re-assign) method to do this?
Appreciate your input...

Thanks
 

ThRuST

Well-Known Member
Licensed User
Thanks Harris, I changed my post as I answered my own questions. It became more of a reference to the HTMLEditor control. :)
 

ThRuST

Well-Known Member
Licensed User
I have come up with a solution how to clear the textbox in the HTMLEditor control:

1. Create an empty htm document in i.e. MS Word. Change the background/text color. Save and close your document.
2. Initialize a timer to trigger after 100 milliseconds.
3. From a button Load your htm page into the HTMLEditor control and enable the timer.
4. In the timers tick event stop the timer and call Erels focus code.

The HTMLEditor control will now look the way you want and cursor will be focused and ready to type :cool:
 
Top