Display Rich Text Area field content in a page using Remoting

Question

I have a VF page and a custom controller, Controller to Query for the Articles and a Visualforce page to display the details related to that article, such as Title, Summary, Custom Fields (Rich Text).

The Rich text custom fields contain with multiple images that support the Article explanation. Thus I am trying to display these images through my Visualforce page. I have used Javascript Remoting, JQuery and HTML tags to acquire the above. But I am not able to fetch the images in my page.

My Output is:

Image= "<a href="/articles/Technical_Solutions/Article-deb-3" target="_self">Article 3</a><br>
<img alt="User-added image"  src="https://c.cs15.content.force.com/servlet/rtaImage?
eid=ka2e000000004za&amp;feoid=00N1300000B71nx&amp;refid=0EMe0000000D1uE"></img><br>
<br><br><img alt="User-added image" src="https://c.cs15.content.force.com/servlet/rtaImage?
eid=ka2e000000004za&amp;feoid=00N1300000B71nx&amp;refid=0EMe0000000D1uO"></img>"

I did come across few JQuery methods, but do not know how to work around. Cannot mix Standard VF tags like outputField.. Does anyone know/(or is there any) methods that will extract the source image links from the returned Field values??

<apex:page>
function ArticleDisplayRemote(ArtId){
  var articleId = ArtId;
  var clickedArt='';
  Visualforce.remoting.Manager.invokeAction(
    "{!$RemoteAction.CTSS_KnowledgeArticlePageCtrlr.getArticleOnClick}",
      articleId,
      function(result, event){
      if(event.status){
        var r = result;
        clickedArt += '<p>' + r.Title + '</p>'+'<p>'+ r.Summary+ '</p>' +'<p>'+ r.Solution_Details__c + '</p>'+'</br>';  
document.getElementById("ClickedTitle").innerHTML=clickedArt;
    }else if(result == "NULL"){
      alert("No Match Found");
     }
      else if(event.type==='exception'){
       alert(event.message);
      }                     
    },{escape: true}
   );
 }
<div id="ClickedTitle"></div>
</apex:page>

Any help will be highly appreciated.

Answer 1

Change {escape: true} to {escape: false}

Answer 2

Below is the code that will save your time if you are into same problem..

<apex:page>
var ArtId;
              // To display particular Article when Article Link is clicked
              function ArticleDisplayRemote(ArtId){
                  var articleId = ArtId;
                  var clickedArt='';
                  var articleContent = '';
                  Visualforce.remoting.Manager.invokeAction(
                       "{!$RemoteAction.CTSS_KnowledgeArticlePageCtrlr.getArticleOnClick}",
                       articleId,
                       function(result, event){
                           if(event.status){
                               var r = result;
                               if((r.Id).substr(0,4)=='ka3e'){
                                   articleContent= r.Solution_Details__c;
                                   var convert = function(convert){
                                        return $("<span />", { html: convert }).text();
                                    };
                                   clickedArt += '<p>' + r.Title + '</p>'+'<p>'+ r.Summary+ '</p>';
                                   $('#RichId').html(convert(articleContent));                
                               }
document.getElementById("ClickedTitleID").innerHTML=clickedArt;
                           }else if(result == "NULL"){
                                alert("No Match Found");
                            }
                            else if(event.type==='exception'){
                                alert(event.message);
                            }                     
                        },{escape: true}
                    );
</script>
<div id="RichId" style="display:none;">sssss</div>
</apex:page>