5 Replies Latest reply on Oct 17, 2011 1:54 AM by Christian Peter

    Show HTML content from rich:editor

    Satya K Newbie

      Hi All,


      I am using rich:editor feature and also able to get the HTML content when user enters data in the editor.


      But the question is : Now I have to display the same HTML content back to user. How would I do that.


      i.e if I have entered some bold characters in editor, bean property will contain "<strong>bold</strong>".


      But when displaying to user, I should not show him those HTML tags rather show him the data as bold.


      I did something like : "<span>#{testplannerBean.description}</span>" but it displays along with the HTML tags as in image.






        • 1. Re: Show HTML content from rich:editor
          Christian Peter Expert

          I have used a disabled version of the rich:editor which also hides the toolbar in this state.


          <rich:editor id="myid"




          oninit="if (#{readonly}) jQuery("#myid").find('.mceToolbar.mceLast').hide();"/>

          • 2. Re: Show HTML content from rich:editor
            Satya K Newbie

            I had to use h:outputText like this : <h:outputText value="#{testplannerBean.description}" escape="false"></h:outputText>


            which escapes the content sensitive to HTML

            • 3. Re: Show HTML content from rich:editor
              Christian Peter Expert

              Warning: Please try to insert javascript-code into your rich:editor. Like: <script>alert('hello world');</script>


              No unescaped html code from userinput should be written into your documents!

              1 of 1 people found this helpful
              • 4. Re: Show HTML content from rich:editor
                Satya K Newbie

                That was a good catch, thanks for showing that. Yes I tried that and it prints the user input unescaped


                Here is the final output and desired one :



                • 5. Re: Show HTML content from rich:editor
                  Christian Peter Expert

                  One other thing: if somebody tries to copy and paste code from a microsoft office application into your rich:editor, you'll get ugly xml code. In my case I had to cleanup the code first right after completing the copy and paste event.




                  /* copy and paste from m$office:



                              function cleanWord(str){

                                  // get rid of unnecessary tag spans (comments and title)

                                  if (typeof str === 'undefined') return "";

                                  str = str.replace(/\<\!--(\w|\W)+?--\>/gim, '');

                                  str = str.replace(/\<title\>(\w|\W)+?\<\/title\>/gim, '');

                                  // Get rid of classes and styles

                                  str = str.replace(/\s?class=\w+/gim, '');

                                  str = str.replace(/\s+style=\'[^\']+\'/gim, '');

                                  // Get rid of unnecessary tags

                  str = str.replace(/<(meta|link|\/?o:|\/?style|\/?div|\/?st\d|\/?head|\/?html|body|\/?body|\/?span|!\[)[^>]*?>/gim, '');

                                  // Get rid of empty paragraph tags

                                  str = str.replace(/(<[^>]+>)+ (<\/\w+>)/gim, '');

                                  // remove bizarre v: element attached to <img> tag

                                  str = str.replace(/\s+v:\w+=""[^""]+""/gim, '');

                                  // remove extra lines

                                  str = str.replace(/"(\n\r){2,}/gim, '');


                                  // Fix entites

                                  str = str.replace("&ldquo;", "\"");

                                  str = str.replace("&rdquo;", "\"");

                                  str = str.replace("&mdash;", "–");


                                  return str;



                              function cleanStuff(id){

                                  var h = jquery(id).find('iframe').contents().find('body[id=tinymce]').html();

                                  if (typeof h === 'undefined') return;




                              function setupPaste(id){

                                  //console.log("setupPaste " + id);

                    jquery(id).find('iframe').contents().bind('paste', function(e){

                                      setTimeout(function(){cleanStuff(id);}, 100);







                  the "setupPaste(id)" function is bound to the rich editor at its "oninit=..." attribute.