How to show particular Text Lines in Italic format in the TextArea Tag in SAP Fiori Apps?

Question

I want to show particular text-lines in the "TextArea" tag in italic format in SAP Fiori App .

My text-area data is coming from SAP OData Service in the form of Array. I am able to display the data by using for loop & then set my final data as below ( JS sample code):-

var tempcomm = this.getView().byId("txtArea"); 
oModel.setData({
                text_listSet : data   //here data - contains the final data
            }); 
tempcomm.setModel(oModel);

Below is the XML View sample code:-

<TextArea id="txtArea" 
                        value="{/text_listSet}"
                        height="20rem" growing="true" editable="false" />

Current o/p:-

test Line 1.
ok, good - line 2.

test Line 3.
ok, good - line 4.

Desired o/p:-

test Line 1- italic format.
ok, good - line 2.

test Line 3 - italic format.
ok, good - line 4.

Note:- Text Area is non-editable .

Answer 1

If sapui5 uses the normal HTML 5 textarea, then there is no way to format text inside it. If you want to be able to format text, then you will have to create your own custom element with contenteditable="true" then populate it with <i></i> tags or <span></span> tags with font-style: changes in css.

See docs for contenteditable : https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable