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

making our own paste plugin to be able to handle images in pasted content from MS Word

Browse Source
This commit is contained in:
Niels Lyngsø
2019-09-13 13:44:54 +02:00
parent f59cf544a5
commit fa3f5287c1
3 changed files with 1900 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Umbraco.Web.UI.Client/lib/tinymce/plugins/umbpaste/index.js Normal file
View File

@@ -0,0 +1,7 @@
// Exports the "paste" plugin for usage with module loaders
// Usage:
// CommonJS:
// require('tinymce/plugins/paste')
// ES2015:
// import 'tinymce/plugins/paste'
require('./plugin.js');

1867
src/Umbraco.Web.UI.Client/lib/tinymce/plugins/umbpaste/plugin.min.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

36
src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
View File

@@ -204,6 +204,9 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
function initEvents(editor){
editor.on('SetContent', function (e) {
console.log("setcontent", e)
var content = e.content;
// Upload BLOB images (dragged/pasted ones)
@@ -233,14 +236,22 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
});
}
function cleanupPastedData(plugin, args) {
function cleanupPasteData(plugin, args) {
console.log("cleanupPasteData", args.content);
// Remove spans
var spanRemoveRegex = new RegExp("<\/?span[^>]*>([^<\/span]*)<\/span([^>]*)", "g");
args.content = args.content.replace(spanRemoveRegex,"");
//var spanRemoveRegex = new RegExp("</?span[^>]*>([^</span]*)</span([^>]*)", "g");
//args.content = args.content.replace(spanRemoveRegex, "$1");
args.content = args.content.replace(/<\s*span[^>]*>(.*?)<\s*\/\s*span>/g, "$1");
// Convert b to strong.
args.content = args.content.replace(/<b([^>]*)>([^<\/b]*)<\/b([^>]*)>/g, "<strong$1>$2</strong$3>");
args.content = args.content.replace(/<\s*b([^>]*)>(.*?)<\s*\/\s*b([^>]*)>/g, "<strong$1>$2</strong$3>");
// convert i to em
args.content = args.content.replace(/<\s*i([^>]*)>(.*?)<\s*\/\s*i([^>]*)>/g, "<em$1>$2</em$3>");
console.log(args.content);
}
@@ -272,6 +283,7 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
//plugins that must always be active
plugins.push("autoresize");
plugins.push("noneditable");
plugins.push("image");
var modeTheme = '';
var modeInline = false;
@@ -344,11 +356,11 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
init_instance_callback: initEvents
};
if (tinyMceConfig.pasteTidying) {
plugins.push("paste");
//if (tinyMceConfig.pasteTidying) {
plugins.push("umbpaste");
// We keep spans here, cause removing spans here also removes b-tags inside of them, instead we strip them out later.
var validElements = "-b,-strong,-i,-em,span,p,a,table,th,thead,tbody,tr,td,ul,ol,li,dl,dt,dd,iframe,svg,img,hr,abbr,sub,sup,figure,picture";
var validElements = "-strong/b,-em/i,-u,-span,-p,-ol,-ul,-li,-p/div,-a[href|name],sub,sup,strike,br,del,table[width],tr,td[colspan|rowspan|width],th[colspan|rowspan|width],thead,tfoot,tbody,img,ul,ol,li"
// add valid elements from styleFormats.
var style, i = 0;
@@ -361,6 +373,10 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
var pasteConfig = {
//paste_block_drop: false,
//paste_filter_drop: true,
//paste_enable_default_filters: false, // to avoid stripping img tags from word.
paste_remove_styles: true,
paste_text_linebreaktype: true,
paste_strip_class_attributes: "all",
@@ -368,12 +384,12 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
paste_word_valid_elements: validElements,
paste_preprocess: prepaste
paste_preprocess: cleanupPasteData
};
angular.extend(config, cleanupPastedData);
}
angular.extend(config, pasteConfig);
//}
if (tinyMceConfig.customConfig) {