From fba6d8ec66bc958b55cc1e7a61701082c03c5ebf Mon Sep 17 00:00:00 2001 From: Jeremy Pyne Date: Fri, 5 Sep 2014 15:00:54 -0400 Subject: [PATCH 1/2] Added codemirror plugin to tinymce v4 used in Umbraco7. This is a tinymce plugin to seamlessly use the already existing code mirror package in umbraco as the source editor. The tinymceconfig.config is updated to seamlessly replace the code plugin with the new codemirror plugin. (And the user can switch back to code here if they need to for some reason.) --- .../tinymce/plugins/codemirror/langs/en.js | 8 + .../tinymce/plugins/codemirror/plugin.min.js | 3 + .../tinymce/plugins/codemirror/source.html | 256 ++++++++++++++++++ .../config/tinyMceConfig.config | 16 +- .../CodeMirror/js/lib/codemirror.js | 4 + 5 files changed, 285 insertions(+), 2 deletions(-) create mode 100755 src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/langs/en.js create mode 100755 src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/plugin.min.js create mode 100755 src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/source.html mode change 100644 => 100755 src/Umbraco.Web.UI/umbraco_client/CodeMirror/js/lib/codemirror.js diff --git a/src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/langs/en.js b/src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/langs/en.js new file mode 100755 index 0000000000..d5e0bbde43 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/langs/en.js @@ -0,0 +1,8 @@ +tinymce.addI18n('en',{ + 'HTML source code': 'HTML source code', + 'Start search': 'Start search', + 'Find next': 'Find next', + 'Find previous': 'Find previous', + 'Replace': 'Replace', + 'Replace all': 'Replace all' +}); diff --git a/src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/plugin.min.js b/src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/plugin.min.js new file mode 100755 index 0000000000..2159c8536b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/plugin.min.js @@ -0,0 +1,3 @@ +tinymce.PluginManager.requireLangPack("codemirror"); +tinymce.PluginManager.add("codemirror",function(a,c){function b(){a.focus();a.selection.collapse(!0);a.selection.setContent('');var b=a.windowManager.open({title:"HTML source code",url:c+"/source.html",width:800,height:550,resizable:!0,maximizable:!0,buttons:[{text:"Ok",subtype:"primary",onclick:function(){document.querySelectorAll(".mce-container-body>iframe")[0].contentWindow.submit();b.close()}},{text:"Cancel",onclick:"close"}]})}a.addButton("code", +{title:"Source code",icon:"code",onclick:b});a.addMenuItem("code",{icon:"code",text:"Source code",context:"tools",onclick:b})}); diff --git a/src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/source.html b/src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/source.html new file mode 100755 index 0000000000..f91a50625d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/source.html @@ -0,0 +1,256 @@ + + + + + + + + diff --git a/src/Umbraco.Web.UI/config/tinyMceConfig.config b/src/Umbraco.Web.UI/config/tinyMceConfig.config index 5c0a7733bb..81c2d3569d 100644 --- a/src/Umbraco.Web.UI/config/tinyMceConfig.config +++ b/src/Umbraco.Web.UI/config/tinyMceConfig.config @@ -6,7 +6,7 @@ code images/editor/code.gif - code + code 1 @@ -199,7 +199,7 @@ - code + codemirror paste umbracolink anchor @@ -228,5 +228,17 @@ param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|cla raw GoogleSpellChecker.ashx + + { + "indentOnInit": false, + "path": "/umbraco_client/CodeMirror/Js", + "config": { + }, + "jsFiles": [ + ], + "cssFiles": [ + ] + } + \ No newline at end of file diff --git a/src/Umbraco.Web.UI/umbraco_client/CodeMirror/js/lib/codemirror.js b/src/Umbraco.Web.UI/umbraco_client/CodeMirror/js/lib/codemirror.js old mode 100644 new mode 100755 index 09a577aa18..f61f04a5dd --- a/src/Umbraco.Web.UI/umbraco_client/CodeMirror/js/lib/codemirror.js +++ b/src/Umbraco.Web.UI/umbraco_client/CodeMirror/js/lib/codemirror.js @@ -1980,6 +1980,7 @@ window.CodeMirror = (function() { if (extensions.propertyIsEnumerable(ext) && !instance.propertyIsEnumerable(ext)) instance[ext] = extensions[ext]; + for (var i = 0; i < initHooks.length; ++i) initHooks[i](instance); return instance; } // (end of function CodeMirror) @@ -2076,6 +2077,9 @@ window.CodeMirror = (function() { CodeMirror.defineExtension = function(name, func) { extensions[name] = func; }; + + var initHooks = []; + CodeMirror.defineInitHook = function(f) {initHooks.push(f);}; var modeExtensions = CodeMirror.modeExtensions = {}; CodeMirror.extendMode = function(mode, properties) { From 3d0e74522dba939a344bb63221c43f0032ff460f Mon Sep 17 00:00:00 2001 From: Jeremy Pyne Date: Fri, 5 Sep 2014 15:32:39 -0400 Subject: [PATCH 2/2] Fix for dialog size logic. Fix for css not associated with legend. --- .../tinymce/plugins/codemirror/plugin.min.js | 2 +- .../tinymce/plugins/codemirror/source.html | 25 +++++-------------- 2 files changed, 7 insertions(+), 20 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/plugin.min.js b/src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/plugin.min.js index 2159c8536b..425083626d 100755 --- a/src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/plugin.min.js +++ b/src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/plugin.min.js @@ -1,3 +1,3 @@ tinymce.PluginManager.requireLangPack("codemirror"); -tinymce.PluginManager.add("codemirror",function(a,c){function b(){a.focus();a.selection.collapse(!0);a.selection.setContent('');var b=a.windowManager.open({title:"HTML source code",url:c+"/source.html",width:800,height:550,resizable:!0,maximizable:!0,buttons:[{text:"Ok",subtype:"primary",onclick:function(){document.querySelectorAll(".mce-container-body>iframe")[0].contentWindow.submit();b.close()}},{text:"Cancel",onclick:"close"}]})}a.addButton("code", +tinymce.PluginManager.add("codemirror",function(a,c){function b(){a.focus();a.selection.collapse(!0);a.selection.setContent('');var b=a.windowManager.open({title:"Source code",url:c+"/source.html",width: a.getParam("code_dialog_width", 600),height: a.getParam("code_dialog_height", Math.min(tinymce.DOM.getViewPort().h - 200, 500)),resizable:!0,maximizable:!0,buttons:[{text:"Ok",subtype:"primary",onclick:function(){document.querySelectorAll(".mce-container-body>iframe")[0].contentWindow.submit();b.close()}},{text:"Cancel",onclick:"close"}]})}a.addButton("code", {title:"Source code",icon:"code",onclick:b});a.addMenuItem("code",{icon:"code",text:"Source code",context:"tools",onclick:b})}); diff --git a/src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/source.html b/src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/source.html index f91a50625d..6a4cd7ba57 100755 --- a/src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/source.html +++ b/src/Umbraco.Web.UI.Client/lib/tinymce/plugins/codemirror/source.html @@ -117,12 +117,14 @@ function start() // Create legend for keyboard shortcuts for find & replace: var head = parent.document.querySelectorAll('.mce-foot')[0], div = parent.document.createElement('div'), - td1 = '', - td2 = ''; + td1 = '', + td2 = ''; div.innerHTML = '' + td1 + (isMac ? '⌘-F' : 'Ctrl-F') + td2 + tinymce.translate('Start search') + '' + td1 + (isMac ? '⌘-G' : 'Ctrl-G') + '' + td2 + tinymce.translate('Find next') + '' + td1 + (isMac ? '⌘-Alt-F' : 'Shift-Ctrl-F') + '' + td2 + tinymce.translate('Find previous') + '' + '' + td1 + (isMac ? '⌘-Alt-F' : 'Shift-Ctrl-F') + '' + td2 + tinymce.translate('Replace') + '' + td1 + (isMac ? 'Shift-⌘-Alt-F' : 'Shift-Ctrl-R') +'' + td2 + tinymce.translate('Replace all') + '
'; - div.className="search-legend"; + div.style.position = 'absolute'; + div.style.left = '1em'; + div.style.bottom = '.5em'; head.appendChild(div); - + // Set CodeMirror cursor to same position as cursor was in TinyMCE: var html = editor.getContent({source_view: true}); html = html.replace(/]*)>([^<]*)<\/span>/gm, String.fromCharCode(chr)); @@ -235,21 +237,6 @@ body { background: #e8f2ff !important; } -.search-legend td.description, .search-legend td.shortcut { -font-size: 11px; -padding-right: 1em; -} -.search-legend td.shortcut { -font-family: courier; -font-weight: bold; -text-align: right; -} -.search-legend { -position: absolute; -left: 1em; -bottom: .5em; -} -