HTML Render is not working

[ghost]

Hey,

I have data which are coming from database. I am giving content in variable of ngModel. but html is not displaying as actual it is. (HTML tags are not working)

HTML.txt

Please let me help for that.

[onaluf]

Your HTML contain table, which is not supported at the moment. Everything you pass into the ngModel is parsed and only supported features are then rendered in the editor. This is by design. If you want to add support for table you can sub-class fate-html-parser.service.ts.

Ideally you should also add custom control in the ui for editing tables but that is not required as long as you're OK with the users not being able to create table by themselves.

Eventually support for table will come but this has a low priority for me at the moment.

[Void-0]

On the subject of HTML parsing, what's the difference between the fate-html-parser.service and the fate-parser.service ? My guess is that example-custom-html-parser.service parses the HTML present in the ngModel as in the example is parsed and replaced by a in the input (editable div). The example-custom-parser.service is then parsing the "content" of the input and thus rendering the span as well as its contents (icons etc.) inside the input. I'm really not sure I got this right. Also, why do we need two separate services for that ? Is there no way to only use one ? PS: great component by the way. :)

Thanks @Void-0. Yes, you are right: he idea behind the two parser is that the representation of the HTML inside of the editor and the text in the ngModel may be different.

In fact there is no reason for the ngModel to contain HTML at all. I have a plan to release a markdown version of the parser... that way you would be able to edit markdown text in a wysiwyg manner. By default at the moment both are HTML so that's why they hierarchically related.

[jacobbeasley]

Hey, is it just me or is the html parser missing the br tag?

[onaluf]

@jacobbeasley Yes you're right <br> should be supported... At the moment the editor instead uses <p> to format line-break.

For the sake of consistency, what should be done is to convert the markup to this. I'll try to fix this as soon as possible.

[jacobbeasley]

Great! Thanks!

[jacobbeasley]

Awesome, thanks! Say, saw you wrote a book on jQuery game development! Awesome stuff!

[onaluf]

Thanks ! It's a bit outdated now :)

[onaluf]

@jacobbeasley I've released 1.9.3 that should fix your issue. Tell me if it works for you when you get the time to test it!

[RicardoJBarrios]

Hello.

I've installed this version. Only tried the material version, but now there is no way to create a p tag, even clicking the "p" button. Always use div instead.

[onaluf]

@RicardoJBarrios Yes that's an expected (but maybe confusing) behaviour. In order to have the HTML code generated to be consistent the editor always uses div instead of p to render paragraphs. On top of that this icon is not used to insert a paragraph but to remove the h1-6 or list formatting.

If you want to insert a paragraph you can just press return. Maybe the UI is confusing here and maybe it would be good to have a simple option to use p everywhere instead of div (you can do that now by using your own parse but it's a bit cumbersome).

What would you want to see there ?

[FriesBureau]

Hi I also only tried the material version, and the "p" tag is not inserted after pressing "enter".

[onaluf]

At the moment the editor is only using div to handle paragraphs and explicit line breaks. What I mean by

If you want to insert a paragraph you can just press return

Was that pressing enter will start a new paragraph, at the moment this is marked up as a div. I have a few opened defect and I will try to add an option to always use p instead of div.