RichTextEditor <font> tag

[Hirn]

Dear developers
is RichTextEditor expected to switch from using the <font> tag to the css properties font-family, font-size, and color in the near future?

[Isomorphic]

it’s not in the roadmap. Why is this important to you?

[Hirn]

We have strict content design rules. These rules strictly specify the font sizes that we can use. They are specified in px.
This is why I would like to switch from pt to px in your editor.

Now about the more unpleasant case of the editor that I encountered.

We have texts saved in the database and we want to edit them using your editor. You can also print these texts using selections from the database. So there are big problems with the printout.

Let me explain with an example...

the database stores this text
"text1 text2 text3 text4 text4 text5 text6"
I only change the font color of individual words in the editor, as you can see in the picture


as a result, I get this html text
"text1 <font color= "#ff0000">text2< / font>text3<font color= "#3366ff">text4< / font>text4<font color= "#339966">text5< / font><span style="color: rgb(255, 255, 255);">&nbsp; text6<br>< / span>"

Then I want to print the received text. And as you may have guessed, I don't see the word text6 on paper.

In reality, you can't see entire paragraphs.
If the text printout was from my client, I could replace color: rgb(255, 255, 255) with color: rgb(0, 0, 0) before printing.
But printing prepares our server.
And this replacement has to be done on the server.

Can you have any solution to this problem?


I also give an example with paragraphs.
There is such a mess that I think you will be interested to see.

[Isomorphic]

So to summarize, if the user is using a dark theme, they may pick text colors that don't print well?

What are you hoping for our component to do - adjust the colors? Or are you saying, it would be easier to wipe out the user's color choices if the styling was done via CSS instead of via a font tag?

[Hirn]

>> if the user is using a dark theme, they may pick text colors that don't print well?

No, you don't understand me.
I didn't choose the white text color.
I chose only red, blue, and green.
And white for some reason is automatically inserted in your editor.

>>What are you hoping for our component to do - adjust the colors?

I would suggest not to adopt the CSS properties of the theme.
I'm not talking about the case where I explicitly set the font color in the text. In this case, it's my own fault that my text won't be visible in another CSS theme.

And the fact that you adopt properties from the CSS theme leads to such a result, for example.
What do you think? What color will this text be on the screen?

<font color="#ff0000" style="color: rgb(255, 255, 255); font-size: 14px;">In der
Gruppe "Print box" ist im Objekt "WBT-Titel" der Titel des WBTs
anzupassen.Folgende Einstellungen sind im Dialog - Dialoge -&gt;
Runtime-Einstellungen - f�r diese Seite zu treffen:<br>- Objekt
ist im Men� unsichtbar
</font>

[Isomorphic]

OK, that was a very long story, but it looks like all you're saying is: in dark themes, don't apply the white color for text that the user hasn't explicitly styled. Is that it?

Note this is very easy to work around, just use a regex to get rid of the white color before saving.

[Hirn]

>>but it looks like all you're saying is: in dark themes, don't apply the white color for text that the user hasn't explicitly styled. Is that it?

No, the problem is a little broader. The problem is not just the white font color in a dark theme. The point is that the color, size, and other font properties should not be taken over from the CSS properties of the theme, if they were not set by the editor user.

[Isomorphic]

We'll take a look - please confirm your SGWT version and build-date, and your OS and Browser.

[Hirn]

SGWT Version SNAPSHOT_v13.0d_2020-06-16
Windows 10 Pro
Google Chrome 83.0.4103.116

[Isomorphic]

It looks like it's not our code adding that extra <span> tag - this is what the native execCommand() does - it just grabs the current text color from the CSS definition applies, and turns it into a <span>.

While we could hardcode certain color transformations, we don't actually have enough information to fix printing problems for content created in a dark theme in general.

So we continue to recommend that, if you use an RTE in a dark theme, and you require the content to later be printable, you pre-process it in some way to make sure it prints well on a white background.

[Hirn]

You are right <span>tag appears after executing the execCommand.
I solved the problem by replacing color: rgb(255, 255, 255) with color: rgb (0, 0, 0)

But there is still one problem. When RTE generates HTML like this.

<font color="#ff0000" style="color: rgb(255, 255, 255); font-size: 14px;">In der
    Gruppe "Print box" ist im Objekt "WBT-Titel" der Titel des WBTs
    anzupassen.Folgende Einstellungen sind im Dialog - Dialoge -&gt;
    Runtime-Einstellungen - f�r diese Seite zu treffen:<br>- Objekt
    ist im Men� unsichtbar
</font>

Here, as you can see, the <font> tag and style="color: rgb(255, 255, 255);" are used simultaneously
I allowed myself (for the sake of experiment) to insert in ISC_RichTextEditor.js one line.

isc.A.$230 = function isc_RichTextCanvas__execCommand(_1, _2) {
        if (!this.isDrawn() || !this.editable) return;
        if (!isc.Page.isLoaded()) {
            this.logWarn("Unsupported attempt to manipulate RichTextCanvas content style before page load: postponed until the page has done loading.");
            isc.Page.setEvent("Load", this.getID() + ".$230('" + _1 + "','" + _2 + "');");
            return
        }
        this.focus();
        var _3 = this.$22y(),
            _4 = _3 ? this.getContentDocument() : document;
        if (!_4) return;
        if (!this.$231(_1)) return false;
        try {
            _4.execCommand("styleWithCSS", false, true); // this line is from me
            _4.execCommand(_1, false, _2);

And this problem disappeared.
I'm sure you'll find a better place for this line.

[Isomorphic]

We'll take a look - but please let us know how you made the RTE "generate HTML like this".

[Hirn]

Initially I have this HTML text

<b>Folgende Einstellungen</b> sind im Dialog - Dialoge -&gt; Runtime-Einstellungen - f�r diese Seite zu treffen:<br>- Objekt ist im Men� unsichtbar<br><br>In der Gruppe "Print box" ist im Objekt "WBT-Titel" der Titel des WBTs anzupassen.Folgende Einstellungen sind im Dialog - Dialoge -&gt; Runtime-Einstellungen - f�r diese Seite zu treffen:<br>- Objekt ist im Men� unsichtbar<br><br>In der Gruppe "Print box" ist im Objekt "WBT-Titel" der Titel des WBTs anzupassen.Folgende Einstellungen sind im Dialog - Dialoge -&gt; Runtime-Einstellungen - f�r diese Seite zu treffen:<br>- Objekt ist im Men� unsichtbar<br><br>In der Gruppe "Print box" ist im Objekt "WBT-Titel" der Titel des WBTs anzupassen.Folgende Einstellungen sind im Dialog - Dialoge -&gt; Runtime-Einstellungen - f�r diese Seite zu treffen:<br>

I format the font colors of the first second and last paragraphs in RTE as shown in the screenshot.

Saving the result to the database. And I call RTE a second time.
I format the font color of the second paragraph in a different color in RTE. And in RTE, the font colors in the first and last paragraph instantly change to white.


The result of the HTML text after this looks like this.

<font color="#ff0000" style="color: rgb(255, 255, 255);"><b style="">Folgende Einstellungen</b> sind im Dialog - Dialoge -&gt; Runtime-Einstellungen - f�r diese Seite zu treffen:<br>- Objekt ist im Men� unsichtbar<br></font><br>
<font style="" color="#ff9900">In der Gruppe "Print box" ist im Objekt "WBT-Titel" der Titel des WBTs anzupassen.Folgende Einstellungen sind im Dialog - Dialoge -&gt; Runtime-Einstellungen - f�r diese Seite zu treffen:<br>- Objekt ist im Men� unsichtbar</font><br><br>
In der Gruppe "Print box" ist im Objekt "WBT-Titel" der Titel des WBTs anzupassen.Folgende Einstellungen sind im Dialog - Dialoge -&gt; Runtime-Einstellungen - f�r diese Seite zu treffen:<br>- Objekt ist im Men� unsichtbar<br><br>
<font color="#339966" style="color: rgb(255, 255, 255);">In der Gruppe "Print box" ist im Objekt "WBT-Titel" der Titel des WBTs anzupassen.Folgende Einstellungen sind im Dialog - Dialoge -&gt; Runtime-Einstellungen - f�r diese Seite zu treffen:</font><br>

[Isomorphic]

We've added RichTextEditor.styleWithCSS, which will apply the command you mentioned.

We've also exposed an advanced setting, RichTextEditor.useDesignMode, which allows you to override an internal mechanism that controls how we edit HTML in different browsers.

Please try setting this flag to false, which will switch to using contentEditable directly - that will probably address all of these styling issues right away (in recent Chrome, in particular). However, note that contentEditable can differ cross-browser, so you could see subtle differences in behavior in different browsers.

[Hirn]

Thanks.
In what build can I see this?