need to be able to display HTML in my forum posts

Hello-

I understand why the HTML editor that was included in the forum had problems and was removed from subsequent releases.

My forum will not be allowing comments of customers or visitors, so I do not have to worry about the potential security risks associated with allowing strangers to possibly inject malicious code into the database, nor do I have to worry about improperly formatted HTML being inserted by novice coders.

It is essential that my forum posts include HTML and image references, and without a better GUI admin interface for creating and editing posts, it will make it necessary for me to manually insert the data into the database.

Has anyone addressed this yet?

In order to move forward with progress, I created a new forum topic with some bogus text, and then inserted my content directly into the database record, replacing the bogus text. When viewed in a browser, the embedded HTML didn't render and you would just see the raw HTML code.

I figured that the _ForumPost.cshtml would be the place to look, and I found this on line 87:

                @Html.Raw(@Model.FormattedText)


I'm a total novice at ASP.NET/C# but it looked to me like it was being encoded as non-HTML and I wanted the exact opposite.

I tried just this:
@Model.FormattedText

..and it displayed character encoded text with " &lt "  instead of a " < " for example, so I at least knew I was editing the correct piece of code, but it's just not what I was looking for. I needed for the HTML content in the database field to actually render on the page at real-time.


Then...I tried this:
            @Html.Raw(Server.HtmlDecode(Model.FormattedText))

...and it worked!

HOWEVER, I'd still be very interested in how to go about integrating the TinyMCE editor into my site if anybody has a clue. It will be extremely time consuming for me to have to manually insert/update data in my database every time I want to edit or add a new forum topic.

If somebody knows how to embed a TinyMCE or CKEditor into the forum topic editor, that would be awesome...and I do have a small development budget..

Also..I noticed that the TinyMCE is actually bundled into the site already, so I'm hoping it won't be too hard to integrate it into the forum topic editing page...? And even better...if the TinyMCE only appears for user's who have Administrator role, otherwise, it's just the plain textarea.

If you want to just give me some suggestions, thats great, or if you want to bid this as a custom development project, that's OK too.


Thanks,
Steve

Huge security issues here, so unless you lock down any add or edit except for administrators I would NOT do this.

First you are going to want to extend the Presentation/Nop.Web/Extensions/EditorExtensions.cs to include another variation on the editor

        public static MvcHtmlString TinyMCECodeEditor<TModel>(this HtmlHelper<TModel> html, string name)
        {
            var sb = new StringBuilder();

            var storeLocation = EngineContext.Current.Resolve<IWebHelper>().GetStoreLocation();
            string bbEditorWebRoot = String.Format("{0}Content/", storeLocation);

            sb.AppendFormat("<script src=\"{0}Content/editors/tinymce/tiny_mce.js\" type=\"text/javascript\"></script>", storeLocation);
            sb.Append(Environment.NewLine);

            sb.Append("<script type=\"text/javascript\">");
            sb.Append(Environment.NewLine);
            sb.Append("    //Notes: autosave plugin is disabled");
            sb.Append(Environment.NewLine);
            sb.Append("    (function () {");
            sb.Append(Environment.NewLine);
            sb.Append("        tinyMCE.init({");
            sb.Append(Environment.NewLine);
            sb.Append("            // General options");
            sb.Append(Environment.NewLine);
            sb.Append("            mode: \"exact\",");
            sb.Append(Environment.NewLine);
            sb.AppendFormat("            elements: \"{0}\",",name);
            sb.Append(Environment.NewLine);
            sb.Append("            theme: \"advanced\",");
            sb.Append(Environment.NewLine);
            sb.Append("            height: \"350\",");
            sb.Append(Environment.NewLine);
            sb.Append("            width: \"790\",");
            sb.Append(Environment.NewLine);
            sb.Append("            verify_html: false,");
            sb.Append(Environment.NewLine);
            sb.Append("            plugins: \"netadvimage,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist\",");
            sb.Append(Environment.NewLine);
            sb.Append("            // Theme options");
            sb.Append(Environment.NewLine);
            sb.Append("            theme_advanced_buttons1: \"save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect\",");
            sb.Append(Environment.NewLine);
            sb.Append("            theme_advanced_buttons2: \"cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,netadvimage,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor\",");
            sb.Append(Environment.NewLine);
            sb.Append("            theme_advanced_buttons3: \"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen\",");
            sb.Append(Environment.NewLine);
            sb.Append("            theme_advanced_buttons4: \"insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,codehighlighting,netadvimage\",");
            sb.Append(Environment.NewLine);
            sb.Append("            theme_advanced_toolbar_location: \"top\",");
            sb.Append(Environment.NewLine);
            sb.Append("            theme_advanced_toolbar_align: \"left\",");
            sb.Append(Environment.NewLine);
            sb.Append("            theme_advanced_statusbar_location: \"bottom\",");
            sb.Append(Environment.NewLine);
            sb.Append("            theme_advanced_resizing: false,");
            sb.Append(Environment.NewLine);
            sb.Append("            // Example content CSS (should be your site CSS)");
            sb.Append(Environment.NewLine);
            sb.Append("            //content_css : \"css/content.css\",");
            sb.Append(Environment.NewLine);
            sb.Append("            convert_urls: false,");
            sb.Append(Environment.NewLine);
            sb.Append("            // Drop lists for link/image/media/template dialogs");
            sb.Append(Environment.NewLine);
            sb.Append("            template_external_list_url: \"lists/template_list.js\",");
            sb.Append(Environment.NewLine);
            sb.Append("            external_link_list_url: \"lists/link_list.js\",");
            sb.Append(Environment.NewLine);
            sb.Append("            external_image_list_url: \"lists/image_list.js\",");
            sb.Append(Environment.NewLine);
            sb.Append("            media_external_list_url: \"lists/media_list.js\"");
            sb.Append(Environment.NewLine);
            sb.Append("        });");
            sb.Append(Environment.NewLine);
            sb.Append("    })();");
            sb.Append(Environment.NewLine);
            sb.Append("</script>");

            return MvcHtmlString.Create(sb.ToString());
        }

Then you will want to alter the editor that is loaded

                        @if (Model.ForumEditor == EditorType.BBCodeEditor)
                        {
                            //@Html.BBCodeEditor("Text");
                            @Html.TinyMCECodeEditor("Text");
                        }

That pretty much handles it.  Of course you should probably now go into the admin tool and add the TinyMCECodeEditor to the EditorType so you can select it from the admin tool... but this worked great for me.

Kudos to the NOP team for making it this simple...  I love the new MVC architecture

I would also play with forumsettings.postmaxlength once you've modified your editor...