VladPolskiy/webmin
1
0
Fork 0
mirror of https://github.com/webmin/webmin.git synced 2025-07-21 23:40:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add local editor classes and styles to inline styling in resulting HTML

Browse Source 
1/2 - needs more improvements and optimizations - although it works already
This commit is contained in:
iliajie
2023-06-18 03:23:02 +03:00
parent 8d595a7ac5
commit a268373550
2 changed files with 28 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
html-editor-lib.pl
View File

@ -16,6 +16,7 @@ $html_editor_load_scripts .=
<<EOF; <<EOF;
<link href="$opts->{'_'}->{'web'}->{'prefix'}/unauthenticated/css/quill.min.css?$opts->{'_'}->{'web'}->{'timestamp'}" rel="stylesheet"> <link href="$opts->{'_'}->{'web'}->{'prefix'}/unauthenticated/css/quill.min.css?$opts->{'_'}->{'web'}->{'timestamp'}" rel="stylesheet">
<script type="text/javascript" src="$opts->{'_'}->{'web'}->{'prefix'}/unauthenticated/js/quill.min.js?$opts->{'_'}->{'web'}->{'timestamp'}"></script> <script type="text/javascript" src="$opts->{'_'}->{'web'}->{'prefix'}/unauthenticated/js/quill.min.js?$opts->{'_'}->{'web'}->{'timestamp'}"></script>
<script type="text/javascript" src="$opts->{'_'}->{'web'}->{'prefix'}/unauthenticated/js/computed-style-to-inline-style.min.js?$opts->{'_'}->{'web'}->{'timestamp'}"></script>
EOF EOF
return $html_editor_load_scripts; return $html_editor_load_scripts;
@ -302,8 +303,26 @@ my $html_editor_init_script =
this.quill.format('blockquote', true); this.quill.format('blockquote', true);
}); });
editor.on('text-change', function() { editor.on('text-change', function() {
targ.value = editor.root.innerHTML + "<br>"; // This should most probably go to onSubmit event
sessionStorage.setItem('$module_name/quill=last-message', targ.value); const cloneId = '${target_name}clonedHTMLEditor',
clonedHTMLEditor = document.createElement('div');
clonedHTMLEditor.id = cloneId;
clonedHTMLEditor.innerHTML = editor.root.innerHTML;
document.body.appendChild(clonedHTMLEditor);
computedStyleToInlineStyle(clonedHTMLEditor, {
recursive: true,
properties: [
'color', 'background-color', 'position', 'box-sizing', 'width', 'height',
'margin', 'padding', 'border', 'font-size', 'font-family', 'line-height',
'text-align', 'content', 'text-decoration', 'overflow',
'list-style-type', 'counter-reset', 'counter-increment', 'ratio',
'opacity', 'cursor', 'left', 'top', 'right', 'bottom', 'vertical-align',
'direction', 'white-space', 'border-radius'
]
});
targ.value = clonedHTMLEditor.innerHTML + "<br>";
clonedHTMLEditor.remove();
sessionStorage.setItem('$module_name/quill=last-message', editor.root.innerHTML);
let extraValue = String(), let extraValue = String(),
sync = JSON.parse('@{[&convert_to_json($opts->{'textarea'}->{'sync'}->{'data'})]}'), sync = JSON.parse('@{[&convert_to_json($opts->{'textarea'}->{'sync'}->{'data'})]}'),
position = '@{[$opts->{'textarea'}->{'sync'}->{'position'}]}', position = '@{[$opts->{'textarea'}->{'sync'}->{'position'}]}',
@ -358,7 +377,7 @@ my $html_editor_init_script =
// Update editor on initial load // Update editor on initial load
editor.pasteHTML(targ.value); editor.pasteHTML(targ.value);
sessionStorage.setItem('$module_name/quill=last-message', targ.value); sessionStorage.setItem('$module_name/quill=last-message', editor.root.innerHTML);
} }
@{[$opts->{'load'} ? "fn_${module_name}_html_editor_init()" : '']} @{[$opts->{'load'} ? "fn_${module_name}_html_editor_init()" : '']}
</script> </script>

6
unauthenticated/js/computed-style-to-inline-style.min.js vendored Normal file
View File

@ -0,0 +1,6 @@
/*!
computed-style-to-inline-style v3.0.0 (https://github.com/lukehorvat/computed-style-to-inline-style)
Copyright (c) 2016 Luke Horvat
Licensed under MIT (https://github.com/lukehorvat/computed-style-to-inline-style/blob/master/LICENSE)
*/
!function(e,t){if("function"==typeof define&&define.amd)define(["module"],t);else if("undefined"!=typeof exports)t(module);else{var o={exports:{}};t(o),e.computedStyleToInlineStyle=o.exports}}(this,(function(e){var t=Array.prototype.forEach;e.exports=function e(o){var r,i,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!o)throw new Error("No element specified.");n.recursive&&(i=o.children,t).call(i,(function(t){e(t,n)}));var l=getComputedStyle(o);(r=n.properties||l,t).call(r,(function(e){o.style[e]=l.getPropertyValue(e),o.removeAttribute("class"),o.removeAttribute("id")}))}}));