Blog archive

NopCommerce HTML Editor Text Color and Size Modified

Application: NopCommerce

Purpose: The font color and size for more detailed editing on NopCommerce

How Is Made: Replace the contents of the following file

Path of file to be modified: NopCommerce\Presentation\Nop.Web\Administration\Views\Shared\EditorTemplates\RichEditor.cshtml

 

///copy the following codes

@model String
@using Nop.Core
@using Nop.Core.Domain.Common
@using Nop.Services.Security
@using Nop.Web.Framework.UI
@{
Html.AddScriptParts("~/Administration/Content/tinymce/tinymce.min.js", true);
var permissionService = EngineContext.Current.Resolve<IPermissionService>();
var allowJbimages = false;
var allowRoxyFileman = permissionService.Authorize(StandardPermissionProvider.HtmlEditorManagePictures);
var random = CommonHelper.GenerateRandomInteger();
var additionalEditorSettings = EngineContext.Current.Resolve<AdminAreaSettings>().RichEditorAdditionalSettings;
var allowJavaScript = EngineContext.Current.Resolve<AdminAreaSettings>().RichEditorAllowJavaScript;
var enableFullPage = Convert.ToBoolean(ViewData["nop.RichEditor.EnableFullPage"] ?? false);
}

<script>
$(document).ready(function () {
@* wooncherk contribution *@
function RoxyFileBrowser@(random)(field_name, url, type, win) {
var roxyFileman = '@Url.Content("~/Administration/Content/Roxy_Fileman/index.html")';
if (roxyFileman.indexOf("?") < 0) {
roxyFileman += "?type=" + type;
} else {
roxyFileman += "&type=" + type;
}
roxyFileman += '&input=' + field_name + '&value=' + document.getElementById(field_name).value;
tinyMCE.activeEditor.windowManager.open({
file: roxyFileman,
title: 'Roxy Fileman',
width: 850,
height: 650,
resizable: "yes",
plugins: "media",
inline: "yes",
close_previous: "no"
}, { window: win, input: field_name });
return false;
}

var defaultEditorSettings@(random) = {
selector: "#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)",
fontsize_formats: "8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 26pt 36pt",
height: 200,
width: '100%',
autoresize_min_height: 200,
autoresize_max_height: 200,
plugins: [
"advlist autolink autoresize directionality lists link image charmap print preview anchor textcolor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste@(allowJbimages ? " jbimages" : null)@(enableFullPage ? " fullpage" : null)"
],
toolbar: "ltr rtl | insertfile undo redo | styleselect | fontselect | fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image@(allowJbimages ? " jbimages" : null) | forecolor backcolor",

relative_urls: false,
@if (allowJavaScript)
{
<text>
valid_elements: "*[*]",
</text>
}
@if (allowRoxyFileman)
{
<text>
file_browser_callback: RoxyFileBrowser@(random),
</text>
}
convert_urls: false
};

function getAdditionalEditorSettings@(random)(settings) {
@Html.Raw(additionalEditorSettings)
return settings;
}

tinyMCE.init(getAdditionalEditorSettings@(random)(defaultEditorSettings@(random)));
});
</script>

@Html.TextArea(string.Empty, /* Name suffix */
ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)

Leave your comment