Show HTML content from rich:editor

[satyakatti]

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.

Regards,

Satya

[mcmurdosound]

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();"/>

[satyakatti]

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

which escapes the content sensitive to HTML

[mcmurdosound]

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!

[satyakatti]

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 :

[mcmurdosound]

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.