scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-02-01 04:32:16 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix table overflow for TinyMCE [SCI-7782]

Browse source
This commit is contained in:
Anton 2023-01-19 12:56:15 +01:00
parent 1ac86b8188
commit a39058ffe5
3 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/my_modules/protocols.js
View file

@ -18,6 +18,10 @@ function initEditMyModuleDescription() {
if ($(this).hasClass('record-info-link')) return; if ($(this).hasClass('record-info-link')) return;
e.stopPropagation(); e.stopPropagation();
}); });
setTimeout(function() {
TinyMCE.wrapTables(viewObject);
}, 100);
} }
function initEditProtocolDescription() { function initEditProtocolDescription() {

14
app/javascript/packs/tiny_mce.js vendored
View file

@ -1,4 +1,4 @@
/* global I18n hljs GLOBAL_CONSTANTS HelperModule SmartAnnotation */ /* global I18n hljs GLOBAL_CONSTANTS HelperModule SmartAnnotation TinyMCE */
import tinyMCE from 'tinymce/tinymce'; import tinyMCE from 'tinymce/tinymce';
import 'tinymce/models/dom'; import 'tinymce/models/dom';
@ -329,6 +329,7 @@ window.TinyMCE = (() => {
editorForm.find('.tinymce-status-badge').removeClass('hidden'); editorForm.find('.tinymce-status-badge').removeClass('hidden');
editor.remove(); editor.remove();
editorForm.find('.tinymce-view').html(data.html).removeClass('hidden'); editorForm.find('.tinymce-view').html(data.html).removeClass('hidden');
TinyMCE.wrapTables(editorForm.find('.tinymce-view'));
editor.plugins.autosave.removeDraft(); editor.plugins.autosave.removeDraft();
removeDraft(editor, textAreaObject); removeDraft(editor, textAreaObject);
if (options.onSaveCallback) { options.onSaveCallback(data); } if (options.onSaveCallback) { options.onSaveCallback(data); }
@ -455,7 +456,16 @@ window.TinyMCE = (() => {
makeItDirty: (editor) => { makeItDirty: (editor) => {
makeItDirty(editor); makeItDirty(editor);
}, },
highlight: initHighlightjs highlight: initHighlightjs,
wrapTables: (container) => {
container.find('table').toArray().forEach((table) => {
if ($(table).parent().hasClass('table-wrapper')) return;
$(table).css('float', 'none').wrapAll(`
<div class="table-wrapper" style="overflow: auto; width: ${container.width()}px"></div>
`);
});
}
}; };
})(); })();

5
app/javascript/vue/shared/tinymce.vue
View file

@ -136,6 +136,7 @@
this.$emit('update', data.data) this.$emit('update', data.data)
} }
this.$emit('editingDisabled'); this.$emit('editingDisabled');
this.wrapTables();
}, },
afterInitCallback: () => { afterInitCallback: () => {
this.active = true; this.active = true;
@ -151,9 +152,7 @@
}, },
wrapTables() { wrapTables() {
this.$nextTick(() => { this.$nextTick(() => {
$(this.$el).find('.tinymce-view table').toArray().forEach((table) => { TinyMCE.wrapTables($(this.$el).find('.tinymce-view'));
$(table).css('float', 'none').wrapAll('<div style="overflow: auto"></div>');
})
}); });
}, },
initCharacterCount() { initCharacterCount() {