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.

       

      editor.PNG

       

      Regards,

      Satya

        • 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"

          value="..."

          theme="simple"

          readonly="#{readonly}"

          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 :

                 

                editor.PNG

                • 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;

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

                              }

                   

                              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.