HTMLEditor | Real-time HTML and Markdown editor with CSS support | Editor library

Try setting your htmlEditorValue in .html file like this:

Credit to Jigar Patel in the comments!
I just needed to import 'dart:ui' as ui;

The problem is caused by props.onChange(e?.value); code inside changefunction. It updates value on App component and then forces RichTextEditor component to be rerendered. When props.value changes, a new instance of ToolbarSettingsModel is created and by default it is not full-screen mode.

You can move the definition of toolbarSettings outside of the RichTextEditor component and bind onClickHelp function to the click prop inside the component like toolbarSettings.items[5].click = onClickHelp;

You can take a look at this sandbox for a live working example of this usage.

Your full code will be like this:

Here you can move the .cke5-dialog

be careful the editor does not overlay the other checkbox - you do not have borders so it is not obvious

https://jsfiddle.net/mplungjan/fnthmy2u/

try to remove " from javascript

Currently (at the time this answer was written), no out of the box, easily implemented or adaptable solution to your problem exists in either JavaFX or available 3rd party libraries.

This is not a concrete answer to the question, but a suggestion of approaches which may be tried to solve problems such as this one.

Your current approach to solving the problem could be summarized as: render HTML content in a resizable JavaFX node the behaves similarly to a Label.

For the most direct assistance in trying to achieve that, review the information in answers to the linked question below, it is not re-iterated in detail here.

This question is related to a similar one which provides some information on ways to address sizing WebView to the displayed content of its HTML page, though the information there is currently not definitive and compete for all cases, so it won't immediately solve your problem:

• Correct sizing of Webview embedded in Tabelcell

The suggestion there is to use some JavaScript scripting to determine the size of the document, then set re-size constraints on the WebView node to fit the node to the content, dynamically updating the sizing link when the content changes or is re-rendered or the available space for the WebView changes.

Answers to additional and clarifying questions which were included in comments.

I was hoping I could accomplish this with JavaFX layouts or stylesheets to avoid scripts.

I think to accomplish your original solution idea of treating a WebView like a label, it will not be possible to avoiding writing some code in both JavaScript and JavaFX.

• The in-built JavaFX layout panes and CSS style sheets will not be sufficient.
• The current WebView doesn’t provide the appropriate support to work as nicely as desired with JavaFX layout systems.

If somebody has already wrotethe code and scripting to create the behavior and skin for a WebViewLabel control, then you could just use that and customize it with just JavaFX APIs similar to other controls, however that doesn’t exist as far as I know.

Is there another solution that could support lists and tables

I don't think RichTextFX has this support (I haven't looked at it in detail, so I don't know for sure).

Markdown will support lists well. It will also support tables, likely mapped to a GridView in a JavaFX node, not a TableView. But, the syntax for creating tables may be hard on users if the Markdown is just edited with a plain text editor without icon widget support. I suggest you search the web for JavaFX based Markdown viewers and see if they support your required functionality adequately.

My concern though is if i have a page with 100 webviews on it, do you see performance issues? User could only intereact with 1 at a time ofcourse, but there would still be 100 of them loaded into memory potentially. If it was Java Swing i could simply load content into labels but I didn't realise JavaFX doesnt have that

There might be performance issue with such a setup or it might perform OK.

You should create a minimal app to study and benchmark the performance of many WebView nodes.

A single WebView is slow to initialize with detectable lag when it is the first one shown in the app, but that might just because to display the first WebView the first time the JavaFX system may need to run a lot of runtime setup and initialization.

I never tried with many WebView nodes simultaneously displayed in a scene. Perhaps the internal implementation will allow good performance for that, but you have to test it to make sure or you might expend a lot of effort and be disappointed in the result.

I would guess maybe 100 WebViews would be an upper limit and would be surprised if performance didn't tend to drop either a lot earlier with less of them or soon thereafter with a few more of them.

JavaFX isn't really setup to simultaneously display 1000's of nodes, and, usually that isn't required anyway, you only need to display the stuff which is currently visible to the user. No user could immediately take in all of the data if there is too much of it and no output device could render it.

This is why there exist virtualized controls like TableView and ListView, which feature reusable cells created in factories to display interactive views into the underlying data rather then rendering display notes for the complete (perhaps 1000s or millions of lines) of underlying data.

If you find yourself in a situation where you want to create 1000s of nodes, usually that can be better solved by using cell factories and virtualization like ListView. Creating a new control with these facilities is an advanced topic and difficult to implement well.

What follows is a list of alternate approaches to the problem from what you outlined in your question. These approaches may not be directly applicable to your application but may be applicable to somebody with a different application who has a similar problem to solve.

Where your multiple WebViews are clustered for rendering output, instead just use a single WebView instance and manage more of the layout via HTML and JavaScript.

There are certain layout tasks (like laying out html) that a web engine is better at than JavaFX. Use the best tool for the job. JavaFX includes both tools (an internal JavaFX rendering engine for rendering the scene graph and an internal Web Engine for rendering html). So you can choose one rendering implementation or the other (or a mixture of the two), whichever best suits the current task you are implementing.

For some similar applications RichTextFX may be a preferred solution.

RichTextFX provides a memory-efficient text area for JavaFX that allows the developer to style ranges of text, display custom objects in-line (no more HTMLEditor), and override the default behavior only where necessary without overriding any other part of the behavior.

RichTextFX may not have full support for all of the required features, but can still accomplish many tasks, so investigate its functionality to see if it is a good fit before implementing your own solution.

Under this approach:

1. Use an editor to edit the Markdown.
2. Use a viewer to view the rendered Markdown.

It is not necessary to provide full Markdown support, only as much as might be very useful for your application users.

There are various JavaFX Markdown editors and viewers available in third party implementations that you can find if you search the web. There are also many HTML based Markdown editors and viewers which you can use from a WebView. So you could choose to integrate or modify one of those, rather than implementing this from scratch.

For a general purpose library or utility it would be best to make these two things custom controls (e.g MarkDownEditor and MarkDownView) which hide their implementation in a JavaFX control skin and expose their public API in a JavaFX control subclass.

For the editor which creates (not renders) the Markdown, that can be different from the viewer.

The editor implementation, instead of using the built-in JavaFX HTMLEditor, which is a what-you-see-is-what-you-get (wysiwyg) editor the generates HTML output, you would provide either:

1. A plain text editor to create the markdown OR
2. A wysiwyg editor that generates Markdown output.

For the implementation you could use either:

1. 100 percent JavaFX solutions OR
2. HTML embedded in WebView Markdown editor solutions (e.g. similar to the editor used in StackOverflow for editing questions and answers).

A JavaFX based editor could be as simple as a TextArea, or more complex with additional formatting support widgets implemented in JavaFX (again similar to the editing toolbar provided in the StackOverflow Markdown editor JavaScript implementation, just implemented in JavaFX rather than HTML).

Again for the viewer you could choose either:

1. 100 percent JavaFX solutions OR
2. HTML embedded in WebView Markdown editor solutions (e.g. similar to the editor used in StackOverflow for editing questions and answers).

Whereas, for the editor, using a HTML markdown editor embedded in a WebView would likely be fine, for the viewer, you would likely be better off with a 100 percent JavaFX solution if you wanted to view many snippets of documents and display and size them like Label controls.

Essentially the JavaFX solution would be similar to the implementation of a new control called say, MarkDownLabel, which would render a formatted label like thing based on MarkDown text input.

If the view needs to render a large document, it could be equipped with scrolling, scaling and panning functionality, but a simple view for small documents would not need this. Also a cell style factory style implementation (similar to ListView) could allow the nodes used to render the view to be updated and repurposed for different content rather than recreated (for efficiency), but that is just a performance optimization (and quite tricky) so may not be necessary.

So i've come to a solution. So the problem was the use of an abstract class UploadValidator used in the component TextEditor. The imports wasn't sufficient for the abstract class to use the Services needed. So i modified UploadValidator like this.

You need to use a filter, not a handler.

Here is an example application which demonstrates this:

Here is a working example with a demo key: https://codesandbox.io/s/stupefied-sutherland-09eh2

There are several ways to achieve what you want. One of it is to use Controller or useController.