Fix for TinyMCE Editor Issue in nopCommerce

There are many users who are experiencing an issue with tinymce HTML Editor in nopCommerce 3.40 version (specifically in topic pages). Due to this issue, no matter how many <link> references you add in the html source code of your topic page, the editor refuses to save it and disregard all the references.

For this example, I am going to try saving a <link>  reference in the “About us” topic page like this:

linkrefissue-1-nop_3-4

Now, after saving, when I open the html source code again, the link reference is missing (because the editor ignored it while saving)

linkrefissue-2-nop_3-4

Quick Fix

In order to enable the <link> tag, we will have the option in the initialization of tinymce editor

We will add this option:

valid_children: "+body[link]"

Go to this location:
Presentation\Nop.Admin (or Administration)\Views\Shared\EditorTemplates\RichEditor.cshtml

After adding the above code, your source code should look like this:

tinyMCE.init({
            selector: "#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)",
            fontsize_formats: "8pt 9pt 10pt 11pt 12pt 26pt 36pt",
            height: 350,
            width: 790,
            valid_children: "+body[link]",
            plugins: [
                "advlist autolink lists link image charmap print preview anchor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table contextmenu paste@(allowJbimages ? " jbimages" : null)"
            ],
            toolbar: "insertfile undo redo | styleselect | fontselect | fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image@(allowJbimages ? " jbimages" : null)",
            //"relative_urls" required by jbimages plugin to be set to "false"
            relative_urls: false,
            @if (allowRoxyFileman){
                <text>
                //picture manager
                    file_browser_callback: RoxyFileBrowser@(random),
                </text>
            }
            //we should set "convert_urls" set to "false" (because of "relative_urls" requirement)
            //otherwise, it'll break existing links when editing message template
            convert_urls: false
        });

Now, build your solution >  open your website > go to administration section > open “About us” topic > try saving a <link> reference.

Once you save it, open the html source code of the topic – You will see your <link>  reference there. Hence, you will be able to add custom stylesheets to your topic pages.

Looking for quality nopCommerce Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Lavish Kumar

Founder, developer and owner of StrivingProgrammers.com - By profession, he is a software programmer / web developer, web designer & DBA. He is passionate about technology and electronic gadgets. He enjoys writing tech articles and developing web applications. He is a nopCommerce MVP and author of official nopCommerce Designer's Guide.

4 Comments on Fix for TinyMCE Editor Issue in nopCommerce

  1. Svetla says:

    Hi Lavish,
    I am using arvixe hosting and nopcommerce 3.50 and I have problem like this one – I can’t add iframe to the TinyMCE editor. I have iframe with src which is loading shipping buttons, they were sent to me from my shipping company, but I couldn’t add them to the editor. Do you have any idea or suggestions?
    Thanks in advice!

    • Lavish Kumar says:

      Hello Svetla,

      You can easily add iframe in TinyMCE Editor. Simply go to your editor > click on “Tools” source code.

      You will get a popup windows where you can place your iframe source code. Please “OK” and “SAVE” the page.

      View the page and you should be able to see the iframe output.

  2. ask says:

    Hey there would you mind letting me know which web host
    you’re using? I’ve loaded your blog in 3 completely different internet browsers and
    I must say this blog loads a lot quicker then most. Can you recommend a good hosting provider at a reasonable price?

    Cheers, I appreciate it!

Leave a Reply

Your email address will not be published. Required fields are marked *