function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Chitra ThambirajanChitra Thambirajan 

How to display Rich Text field vallue with line breaks in div

Hi All,

It may be a dump question but am not able to get the answer for this..
My situation is I will be entering some hint values in Rich Text box and need to show(toggle) it to the user based on the click event.

Am entring the values in rich text field line by line.While entering the value am giving enter to make it as line by line.
When am viewing the record with this value is coming properly.

But when am assigning this value to a div tag it is coming as a paragraph instead of line by line.

Why am placing this content to div tag means i need to toggle that rich text content based on the user click.Below is my code,
<apex:column breakBefore="true" colspan="2" headerValue="Hint" style="border-size:0px;border-color:#fff;" > 
    <div id="{!c.data.Name}" class="hider" style="border-size:0px;border-color:#fff;">
        {!c.data.Hint__c}
    </div>
</apex:column>
So what change needs to be done to display the rich text data as it is inside of the DIV..

Any help..

Thanks
Chitra
Best Answer chosen by Chitra Thambirajan
Deepak Kumar ShyoranDeepak Kumar Shyoran
You can show Rich text data by using <apex:outputText /> with excape = "false" attribute but it does introduce a security issue.

Use below code to solve your problem
<apex:column breakBefore="true" colspan="2" headerValue="Hint" style="border-size:0px;border-color:#fff;" > 
    <div id="{!c.data.Name}" class="hider" style="border-size:0px;border-color:#fff;">
       <apex:outputText value="{!c.data.Hint__c}" escape="false" />
    </div>
</apex:column>
Please mark my answer as a best solution to your question to help others if it solves your problem.

All Answers

bob_buzzardbob_buzzard
I suspect its because you are just outputting the raw value - what happens if you use <apex:outputField value="{!c.data.Hint__c}"/> ?
Chitra ThambirajanChitra Thambirajan
Thank you for your time..
Same output..Am getting everything in a single line..Not seperated lines...
bob_buzzardbob_buzzard
What does the underlying HTML look like - if you view source or inspect the element?
Chitra ThambirajanChitra Thambirajan
It is coming with the &nbsp; in all the places where ever I put enter..
Deepak Kumar ShyoranDeepak Kumar Shyoran
You can show Rich text data by using <apex:outputText /> with excape = "false" attribute but it does introduce a security issue.

Use below code to solve your problem
<apex:column breakBefore="true" colspan="2" headerValue="Hint" style="border-size:0px;border-color:#fff;" > 
    <div id="{!c.data.Name}" class="hider" style="border-size:0px;border-color:#fff;">
       <apex:outputText value="{!c.data.Hint__c}" escape="false" />
    </div>
</apex:column>
Please mark my answer as a best solution to your question to help others if it solves your problem.
This was selected as the best answer
Chitra ThambirajanChitra Thambirajan
Thanks for your reply Deepak..Even I have tried your option earlier..But no use..The same output am getting..
issue
Chitra ThambirajanChitra Thambirajan
Sorry Deepak..My mistake..
Am getting values properly in line by line with the gelp of your adivce...
Thank you anyway...
Am using the same value in tooltip.
<apex:column headerValue="Question" value="{!c.data.Question__c}" title="{!c.data.Hint__c}" onclick="slidehint('{!c.data.Name}');"  />
But it is showing with <br> tag..how to change this to line by line ...Any idea..?
User-added image
Chitra ThambirajanChitra Thambirajan
Deepak any idea for removing this <br> tag in the tooltip...?
Deepak Kumar ShyoranDeepak Kumar Shyoran
Hi Chitra,

I used your code by modifying it and it shows me the expected result. Please check you rich text data you are providing for you records as it seems that you're having <br> in your data,try to use  <b/> instead of <b> in your rich-text field data.
Chitra ThambirajanChitra Thambirajan

How can I escape the HTML tags in apex:coulmn..?
Chitra ThambirajanChitra Thambirajan
Deepak am not adding <b> tag while giving input in Rich Text Field.
Am just giving enter and giving the next line input...
Also I have noticed the value of rich text field in object,it is added with <br> tag only.
data

So when am appying this value to the apex:column title property it is simply rendering the value..

The Rich text value when I go for editing,

rich text value

am not giving <br> tag at the end..
Deepak Kumar ShyoranDeepak Kumar Shyoran
Chitra now I got  your problem, basically you are trying to display a rich Text data as a content of your native tool-tip and as you provided a new line which is <br> in Html that's why it's showing this <br> tag. If you want to show new line instead of <br> then you have you replace <br> tag with "&#013;" (for new line)
Now it depends on you how to replace those values you can either replace them within your controller before showing on page or you can write a javaScript on page to replace them.

Below is the reference link for similar problem you have.
http://stackoverflow.com/questions/3340802/add-line-break-within-tooltips
Chitra ThambirajanChitra Thambirajan
Thank you so much for your time Deepak..
Even I tried to hard code the value in title field..It doesn't work,
<apex:column headerValue="Question" value="{!c.data.Question__c}" title="line 1&#013;line2" onclick="slidehint('{!c.data.Name}');" onmouseover="" style="border-size:0px;border-color:#fff;cursor:pointer;" />
but it is simply showing line 1&#013;line2 while hover over the apex column...
Chitra ThambirajanChitra Thambirajan
Hi Deepak,

I have the following function in my apex column's onmousemove event,
function convertValue(hintVal){
               var hintValue = hintVal.replace(/<br>/g,'&#013;');
               alert(hintValue);
            }
and now this alert is,
alert

here ny query is how can I assign this value to the title property of my apex column...?
<apex:column headerValue="Question" value="{!c.data.Question__c}" title="<title value needs to added>" onclick="slidehint('{!c.data.Name}');"  />