pr-dtakac
commented
1 year ago Hi @taqueci, I had the same problem with images. I know nothing about Ruby or Redmine. I tried to analyse it and it seems that problem is in returned data from preview endpoint. Here is my attempt to solve it in javascript. Can you review it and maybe do some similar fix in next release? Thanks a lot.
--- a/assets/javascripts/redmine_wysiwyg_editor.js
+++ b/assets/javascripts/redmine_wysiwyg_editor.js
@@ -750,7 +750,12 @@ RedmineWysiwygEditor.prototype._setVisualContent = function() {
url: self._previewUrl,
data: previewData(self._jstEditorTextArea),
success: function(data) {
- self._editor.setContent(htmlContent(data));
+ var markup = htmlContent(data);
+ // when mode is switched to visual editor, attachment images are not loading,
+ // if they are in short form (like !image.jpg!), after any changes in visual editor
+ // images src value is broken - we'll try to fix it
+ markup = self._fixAttachmentImagesInContent(markup);
+ self._editor.setContent(markup);
}
});
};
@@ -1466,7 +1471,10 @@ RedmineWysiwygEditor.prototype._setPreview = function() {
url: self._previewUrl,
data: previewData(self._jstEditorTextArea),
success: function(data) {
- self._preview.html(data);
+ // when mode is switched to preview, attachment images are not loading,
+ // if they are in short form (like !image.jpg!) - we'll try to fix it
+ var markup = self._fixAttachmentImagesInContent(data);
+ self._preview.html(markup);
}
});
};
@@ -1604,5 +1612,46 @@ RedmineWysiwygEditor.prototype._setChanged = function() {
self._jstEditorTextArea.data('changed', 'changed');
};
+RedmineWysiwygEditor.prototype._escapeRegExp = function(string) {
+ return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+};
+
+RedmineWysiwygEditor.prototype._escapeReplacement = function(string) {
+ return string.replace(/\$/g, '$$$$');
+};
+
+RedmineWysiwygEditor.prototype._fixAttachmentImagesInContent = function(content) {
+ var self = this;
+
+ var attachment = Object.keys(self._attachment);
+
+ var attachmentImages = attachment.filter(function(name) {
+ return RedmineWysiwygEditor._isImageFile(name);
+ });
+
+ $.each(attachmentImages, function( index, image ) {
+ var src = 'src="' + image + '"';
+ var encodedSrc = 'src="' + encodeURIComponent(image) + '"';
+ var plainSrcFound = content.search(src) !== -1;
+ var encodedSrcFound = content.search(encodedSrc) !== -1;
+ if (plainSrcFound || encodedSrcFound) {
+ var id = self._attachment[image];
+ var url = self._prefix +
+ ['attachments', 'download', id, encodeURIComponent(image)].join('/');
+ var stringToEscape = plainSrcFound ? src : encodedSrc;
+ // regex magic - see https://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
+ var safeSrc = self._escapeRegExp(stringToEscape);
+ var replacement = src.replace(image, url);
+ var safeReplacement = self._escapeReplacement(replacement);
+
+ content = content.replace(
+ new RegExp(safeSrc, 'g'),
+ self._escapeReplacement(safeReplacement),
+ );
+ }
+ });
+ return content;
+}
+
return RedmineWysiwygEditor;
}));
taqueci
albenik85
nedprofit
jcatrysse
m0lchy
After adding an image in the normal textile editor inside the Wiki, it looks as follows:
!name_of_image.png!
When I switch to the visual editor, there is an empty space where the image should be. After saving the article, the image is gone in the Wiki. After switching back to edit mode in the textile editor, it looks as follows:
!https://url_of_redmine/projects/project_name/wiki/name_of_image.png!
Then I have to change the entry again to !name_of_image.png! in order to bring the image back