swcs/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #6147 from umbraco/v8/feature/2196-improve-tiny-load

Browse Source 
Improve JS Asset load of TinyMCE Editor
This commit is contained in:
Claus
2019-08-26 13:25:34 +02:00
committed by GitHub
parent d86db3fc11 bec54a0467
commit 66ba6f51da
11 changed files with 88 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Umbraco.Web.UI.Client/src/main.controller.js
+8 -1
View File
@@ -10,7 +10,7 @@
*/
function MainController($scope, $location, appState, treeService, notificationsService,
userService, historyService, updateChecker, navigationService, eventsService,
tmhDynamicLocale, localStorageService, editorService, overlayService) {
tmhDynamicLocale, localStorageService, editorService, overlayService, assetsService, tinyMceAssets) {
//the null is important because we do an explicit bool check on this in the view
$scope.authenticated = null;
@@ -21,6 +21,13 @@ function MainController($scope, $location, appState, treeService, notificationsS
$scope.search = {};
$scope.login = {};
$scope.tabbingActive = false;
// Load TinyMCE Assets ahead of time in the background for the user
// To help woth first load of the RTE
tinyMceAssets.forEach(function (tinyJsAsset) {
assetsService.loadJs(tinyJsAsset, $scope);
});
// There are a number of ways to detect when a focus state should be shown when using the tab key and this seems to be the simplest solution.
// For more information about this approach, see https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js
+4 -4
View File
@@ -1,6 +1,6 @@
angular.module("umbraco")
.controller("Umbraco.PropertyEditors.RTEController",
function ($scope, $q, assetsService, $timeout, tinyMceService, angularHelper) {
function ($scope, $q, assetsService, $timeout, tinyMceService, angularHelper, tinyMceAssets) {
// TODO: A lot of the code below should be shared between the grid rte and the normal rte
@@ -30,9 +30,9 @@ angular.module("umbraco")
var promises = [];
//queue file loading
if (typeof tinymce === "undefined") { // Don't reload tinymce if already loaded
promises.push(assetsService.loadJs("lib/tinymce/tinymce.min.js", $scope));
}
tinyMceAssets.forEach(function (tinyJsAsset) {
promises.push(assetsService.loadJs(tinyJsAsset, $scope));
});
//stores a reference to the editor
var tinyMceEditor = null;
src/Umbraco.Web.UI.Client/test/unit/app/propertyeditors/rte-controller.spec.js
+5 -2
View File
@@ -1,7 +1,9 @@
describe('RTE controller tests', function () {
var scope, controllerFactory;
beforeEach(module('umbraco'));
beforeEach(module('umbraco', function ($provide) {
$provide.value('tinyMceAssets', []);
}));
beforeEach(inject(function ($rootScope, $controller) {
controllerFactory = $controller;
@@ -20,4 +22,5 @@ describe('RTE controller tests', function () {
});
});
});
});
src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml
+2
View File
@@ -119,6 +119,8 @@
document.angularReady = function(app) {
@Html.AngularValueExternalLoginInfoScript(ViewData.GetExternalSignInError())
@Html.AngularValueResetPasswordCodeInfoScript(ViewData["PasswordResetCode"])
@Html.AngularValueTinyMceAssets()
//required for the noscript trick
document.getElementById("mainwrapper").style.display = "inherit";
}
src/Umbraco.Web.UI/Umbraco/js/main.controller.js
+8 -1
View File
@@ -10,7 +10,7 @@
*/
function MainController($scope, $location, appState, treeService, notificationsService,
userService, historyService, updateChecker, navigationService, eventsService,
tmhDynamicLocale, localStorageService, editorService, overlayService) {
tmhDynamicLocale, localStorageService, editorService, overlayService, assetsService, tinyMceAssets) {
//the null is important because we do an explicit bool check on this in the view
$scope.authenticated = null;
@@ -21,6 +21,13 @@ function MainController($scope, $location, appState, treeService, notificationsS
$scope.search = {};
$scope.login = {};
$scope.tabbingActive = false;
// Load TinyMCE Assets ahead of time in the background for the user
// To help woth first load of the RTE
tinyMceAssets.forEach(function (tinyJsAsset) {
assetsService.loadJs(tinyJsAsset, $scope);
});
// There are a number of ways to detect when a focus state should be shown when using the tab key and this seems to be the simplest solution.
// For more information about this approach, see https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
src/Umbraco.Web/HtmlHelperBackOfficeExtensions.cs
+16
View File
@@ -13,6 +13,7 @@ using Umbraco.Web.Models;
namespace Umbraco.Web
{
using Core.Configuration;
using Umbraco.Web.JavaScript;
/// <summary>
/// HtmlHelper extensions for the back office
@@ -118,6 +119,21 @@ namespace Umbraco.Web
sb.AppendLine(JsonConvert.SerializeObject(resetCodeModel));
sb.AppendLine(@"});");
return html.Raw(sb.ToString());
}
public static IHtmlString AngularValueTinyMceAssets(this HtmlHelper html)
{
var ctx = new HttpContextWrapper(HttpContext.Current);
var files = JsInitialization.OptimizeTinyMceScriptFiles(ctx);
var sb = new StringBuilder();
sb.AppendLine(@"app.value(""tinyMceAssets"",");
sb.AppendLine(JsonConvert.SerializeObject(files));
sb.AppendLine(@");");
return html.Raw(sb.ToString());
}
}
src/Umbraco.Web/JavaScript/JsInitialization.cs
+11
View File
@@ -131,6 +131,17 @@ namespace Umbraco.Web.JavaScript
return resources.Where(x => x.Type == JTokenType.String).Select(x => x.ToString());
}
internal static IEnumerable<string> GetTinyMceInitialization()
{
var resources = JsonConvert.DeserializeObject<JArray>(Resources.TinyMceInitialize);
return resources.Where(x => x.Type == JTokenType.String).Select(x => x.ToString());
}
internal static IEnumerable<string> OptimizeTinyMceScriptFiles(HttpContextBase httpContext)
{
return OptimizeScriptFiles(httpContext, GetTinyMceInitialization());
}
/// <summary>
/// Parses the JsResources.Main and replaces the replacement tokens accordingly.
/// </summary>
src/Umbraco.Web/JavaScript/Resources.Designer.cs
Generated
+12
View File
@@ -146,5 +146,17 @@ namespace Umbraco.Web.JavaScript {
return ResourceManager.GetString("ServerVariables", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to [
/// &apos;../lib/tinymce/tinymce.min.js&apos;,
///]
///.
/// </summary>
internal static string TinyMceInitialize {
get {
return ResourceManager.GetString("TinyMceInitialize", resourceCulture);
}
}
}
}
src/Umbraco.Web/JavaScript/Resources.resx
+4 -1
View File
@@ -130,4 +130,7 @@
<data name="ServerVariables" type="System.Resources.ResXFileRef, System.Windows.Forms">
<value>servervariables.js;System.String, mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089;utf-8</value>
</data>
</root>
<data name="TinyMceInitialize" type="System.Resources.ResXFileRef, System.Windows.Forms">
<value>TinyMceInitialize.js;System.String, mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089;utf-8</value>
</data>
</root>
src/Umbraco.Web/JavaScript/TinyMceInitialize.js
+17
View File
@@ -0,0 +1,17 @@
[
'lib/tinymce/tinymce.min.js',
'lib/tinymce/plugins/paste/plugin.min.js',
'lib/tinymce/plugins/anchor/plugin.min.js',
'lib/tinymce/plugins/charmap/plugin.min.js',
'lib/tinymce/plugins/table/plugin.min.js',
'lib/tinymce/plugins/lists/plugin.min.js',
'lib/tinymce/plugins/advlist/plugin.min.js',
'lib/tinymce/plugins/hr/plugin.min.js',
'lib/tinymce/plugins/autolink/plugin.min.js',
'lib/tinymce/plugins/directionality/plugin.min.js',
'lib/tinymce/plugins/tabfocus/plugin.min.js',
'lib/tinymce/plugins/searchreplace/plugin.min.js',
'lib/tinymce/plugins/fullscreen/plugin.min.js',
'lib/tinymce/plugins/noneditable/plugin.min.js'
]
src/Umbraco.Web/Umbraco.Web.csproj
+1
View File
@@ -1206,6 +1206,7 @@
</ItemGroup>
<ItemGroup>
<EmbeddedResource Include="JavaScript\PreviewInitialize.js" />
<None Include="JavaScript\TinyMceInitialize.js" />
<!--<Content Include="umbraco.presentation\umbraco\users\PermissionEditor.aspx" />-->
<Content Include="PublishedCache\NuCache\notes.txt" />
</ItemGroup>