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.
Example:
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: http://www.tinymce.com/wiki.php/Configuration:valid_children
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:
tinyMCE.init({ 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:
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 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 :)
