Use as a WYSIWYG Editor with html text in background and styled design in front

[ASchmidt84]

Hi,

this is a great project. And I try to familiar with your project. But at this moment I have a few problems with that.
I have to build an editor WYSIWYG like the HTMLEditor in JavaFX. My problem is at this moment, in background I generate a html text. Of course without head and body. Only the text for a paragraph and the inline code for maybe bold or italic. Like <b> oder <i>.

Now maybe the user wants to add a colored text at a special caret position. Do I have the caret position inside the html text? And how I can realize that I have the possibility to add <b> in htmltext and show only the bolder in WYSIWYG? I try to implemented InlineCssTextArea and I can transform a few things like <b> or <i>.

Do you have a special version of this editor?

Thank you

Hi there,
if I understand your question correctly, here is the info you need(i think):

richtext data structure is made of paragraphs, that are made if styledtext,
which are text+styles.

There are methods to get paragraphs from a text area, its text and its
style segments, and each segment has a length. So you can compute segments
start positions starting from 0 then adding segments lengths.

So what the user hits save, you parse the text area info and write to/open
a text file where you open a

for each parapgraph, append style and text
for each segment, then close your parahraph. do this for each paragraph and
you get your html code as an ASCII text file. You close the text file and
set its extenion to html.

I hope this helps.

[ASchmidt84]

Hi
this is not exactly what I mean.

I have a fully styled html paragraph. This can contains for example things like <ul>.

Now I hoped that this editor has the possibility to set a htmlText in background. The visual editor shows the styled html. And each caret, for example carte position 5 would be caret position 8 in html text.

Ok, so I have to build this by my self.
Thanks for your help

from what I know, RichTextFX is made intentionally abstract with only the needed low level functions so that it is used as base for other things. special behaviors are typically added on top. I would wait to hear from Tomas, there might be a way to do this. I was trying to give feedback from my experience working with the library in case you needed quick help :)

[TomasMikula]

Hi André,

RichTextFX is not going to magically know the index within HTML.

I eventually want to support custom implementations of what is now called EditableStyledDocument. Your implementation of EditableStyledDocument could then hold HTML text (or some kind of syntax tree or DOM) and provide a view of it as a sequence of paragraphs for RichTextFX to render. Even then, however, resolving text indexes to html indexes would be the job of your custom EditableStyledDocument implementation.

Also note that you can reasonably map only a subset of HTML to styled text. Things like tables will not work.

[ASchmidt84]

Hi Thomas,

thats sound great. Yes I know thinks like table are not relevant to me.
But you eventually plan to support. So this is not implemented, do it not?

At this moment implemented by my self the normal styling things like <b>, <font ...>, <i> and so on.

André

[TomasMikula]

Yes, that is unfortunately not supported right now, but I plan to add it in the future.

[JordanMartinez]

I'm closing this since Tomas' suggestion of a custom ESD can be done now, even if tables are not yet supported at this time.

[elkebasel]

I am working with JavaFX in connection with jpro webserver, which means that neither HTMLEditor nor SwingNodes are supported.
I would like to parse the document output as html as described in this thread.
My question:
I have a bullet list with two layers.

the output of the paragraphs is:
Par[; StyledSegment(segment=left(text 1) style=12,Serif,0x000000ff)]
Par[; StyledSegment(segment=left(text 2) style=12,Serif,0x000000ff)]
Par[; StyledSegment(segment=left(text 3) style=12,Serif,0x000000ff)]
Par[; StyledSegment(segment=left(text 4) style=12,Serif,0x000000ff)]
where do I find the information about the bullets and the indents?
Thank you very much in advance for your answer!
Best, Elke

[Jugen]

I think that for each paragraph you would need to extract it's paragraph style using: getParagraphStyle()
So for example: area.getParagraph(0).getParagraphStyle()

[elkebasel]

Dear Jurgen Thank you for your fast reply! This is my Code: for(int i =0; i< doc.getParagraphs().size(); i++){ System.out.println("paragraph "+doc.getParagraph(i)); System.out.println("style "+doc.getParagraph(i).getParagraphStyle()); } and this is what I get: paragraph Par[; StyledSegment(segment=left(text 1) style=12,Serif,0x000000ff)] style paragraph Par[; StyledSegment(segment=left(text 2) style=12,Serif,0x000000ff)] style paragraph Par[; StyledSegment(segment=left(text 3) style=12,Serif,0x000000ff)] style paragraph Par[; StyledSegment(segment=left(text 4) style=12,Serif,0x000000ff)] style So the style seems not to be set. This is in Java 11/JavaFX15 which the pro server wants; I had to give manually the stylesheet, no CSS errors or warnings. this.getStylesheets().add("/org/fxmisc/richtext/demo/richtext/rich-text.css"); (this is a VBox in which I wrapped the Editor) For the sample, I use Java 1.8 build 212. Here I get a warning: /usr/lib/jvm/jdk1.8.0_212/bin/java - WARNING: Could not resolve '-fx-text-background-color' while resolving lookups for '-fx-text-fill' from rule '*.label' in stylesheet jar:file:/usr/lib/jvm/jdk1.8.0_212/jre/lib/ext/jfxrt.jar!/com/sun/javafx/scene/control/skin/modena/modena.bss Dez 01, 2020 9:20:17 PM javafx.scene.CssStyleHelper calculateValue WARNING: Could not resolve '-fx-text-background-color' while resolving lookups for '-fx-text-fill' from rule '*.label' in stylesheet jar:file:/usr/lib/jvm/jdk1.8.0_212/jre/lib/ext/jfxrt.jar!/com/sun/javafx/scene/control/skin/modena/modena.bss pargraphPar[; StyledSegment(segment=left(text 1) style=12,Serif,0x000000ff)] style pargraphPar[; StyledSegment(segment=left(text 2) style=12,Serif,0x000000ff)] style pargraphPar[; StyledSegment(segment=left(text 3) style=12,Serif,0x000000ff)] style pargraphPar[; StyledSegment(segment=left(text 4) style=12,Serif,0x000000ff)] style Do you have any idea what is going wrong? Best, Elke

…

On Dez. 1 2020, at 9:00 pm, Jurgen ***@***.***> wrote: I think that for each paragraph you would need to extract it's paragraph style using: getParagraphStyle() So for example: area.getParagraph(0).getParagraphStyle() — You are receiving this because you commented. Reply to this email directly, view it on GitHub (#181 (comment)), or unsubscribe (https://github.com/notifications/unsubscribe-auth/ALHIZSWQCW72SY2CZRMN7X3SSVDOTANCNFSM4BQB7DWA).

[Jugen]

Ah sorry, my bad - my suggestion applies to the next release, which I think will be next week sometime.
In the mean time you can look at the latest ParStyle and update your code with it if you want.

ParStyle has the following new methods that apply to your use case:

    public boolean isIndented() {
        return indent.map( in -> in.level > 0 ).orElse( false );
    }

    public Indent getIndent() {
        return indent.get();
    }

[Jugen]

@elkebasel also see PR 987 to help you with this.
Feel free to comment there as well.