How to solve tinymce editor issue of ignoring link references in nopCommerce 3.40 topic pages

There are many users who are experiencing an issue with tinymce HTML Editor in nopCommerce 3.40 version (specifically in topic pages). This issue causes 2 major problems:

1) 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.

2) If you have upgraded your nopCommerce based website from previous version and you already have <link> references in the topic pages. After upgrading your site to 3.40, if you open the topic page in administration section and make any kind of changes. You will lose all the references as tinymce editor will ignore it while saving.


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

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

In order to make sure that tinymce editor is really ignoring the <link> reference or not, we will check the database value in the nopCommerce database (for topic: About us).

Yes, the editor is indeed ignoring the <link>  reference - Here is the proof !

Here is a quick fix to this problem

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

According to the tinymce documentation:

We will add this option: 

valid_children: "+body[link]"

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

If you look into the code, you will find this:

           selector: "#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)",
           fontsize_formats: "8pt 9pt 10pt 11pt 12pt 26pt 36pt",
           height: 350,
           width: 790,
           plugins: [

Now, simply add this in the code:
valid_children: "+body[link]"

The complete code should look like this:

            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){
                //picture manager
                    file_browser_callback: RoxyFileBrowser@(random),
            //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 souce code of the topic - You will see your <link>  reference there !

Here is the screenshot of database value:

This solution gives you the freedom to add custom stylesheets (via link references) in your topic pages.

Hope it helps :)

About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment