Skip to content

Commit

Permalink
markdown图片宽度高度优化：图片上传后手动指定最大展示宽度高度
Browse files Browse the repository at this point in the history
  • Loading branch information
@mylxsw
mylxsw committed Aug 3, 2020
1 parent be51d2e commit ce877e0
Show file tree
Hide file tree
Showing 8 changed files with 72 additions and 35 deletions.
6 changes: 3 additions & 3 deletions public/assets/js/markdown-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,13 +256,13 @@ $.wz.mdEditor = function (editor_id, params) {
mermaid.init(undefined, $(".markdown-body .mermaid"));
});

$.wz.imageResize('.editormd-preview-container');
$.wz.imageClick('.editormd-preview-container');
$.wz.sqlCreateSyntaxParser('.editormd-preview-container .wz-sql-create');
$.wz.loadIframe();
},
onchange: function () {
// 图片缩放支持
$.wz.imageResize('.editormd-preview-container');
// 图片点击支持
$.wz.imageClick('.editormd-preview-container');
// mermaid 支持
var mermaidElements = $('.editormd-preview').find('.mermaid');
if (mermaidElements.length > 0) {
Expand Down
24 changes: 2 additions & 22 deletions public/assets/js/wizard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,32 +269,12 @@ $.wz = {
}, 3000);
},
/**
* 图片缩放支持
* 图片点击支持
*
* @param selector
*/
imageResize: function (selector) {
imageClick: function (selector) {
$(selector).find('img').each(function () {
var size = $(this).attr('title');
var regexp = /size:\s*\d*,\d*/;
if (regexp.test(size)) {
var sizes = regexp.exec(size)[0].substr(5).split(',');

var width = parseInt(sizes[0]);
var height = parseInt(sizes[1]);


if (width > 0) {
$(this).css('max-width', width + 'px');
}

if (height > 0) {
$(this).css('max-height', height + 'px');
}
} else {
$(this).css('max-width', '99%');
}

if ($(this).parent().get(0).tagName !== 'A') {
$(this).wrap('<a href="' + $(this).attr('src') + '" target="_blank"></a>');
}
Expand Down
37 changes: 35 additions & 2 deletions public/assets/vendor/editor-md/editormd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
};

editormd.defaults = {
resourcesVersion: "", // 静态资源版本
mode: "gfm", //gfm or markdown
name: "", // Form element name
value: "", // value for CodeMirror, if mode not gfm/markdown
Expand Down Expand Up @@ -3220,6 +3221,38 @@
var editormdLogoReg = regexs.editormdLogo;
var pageBreakReg = regexs.pageBreak;

markedRenderer.image = function(href, title, text){
var out='<img src="' + href + '" alt="' + text + '"';
out += ' title="' + (title ? title : '点击查看大图') + '"';

var cssStyle = '';
var regexp = /size:\s*\d*,\d*/;
if (regexp.test(text)) {
var sizes = regexp.exec(text)[0].substr(5).split(',');

var width = parseInt(sizes[0]);
var height = parseInt(sizes[1]);

if (width > 0) {
cssStyle += 'max-width:' + width + 'px;';
}

if (height > 0) {
cssStyle += 'max-height:' + height + 'px;';
}
} else {
cssStyle += 'max-width:99%;';
}

if (cssStyle !== '') {
out += ' style="' + cssStyle + '" ';
}

out += this.options.xhtml ? "/>" : ">";

return out
};

markedRenderer.emoji = function (text) {

text = text.replace(editormd.regexs.emojiDatetime, function ($1) {
Expand Down Expand Up @@ -3968,7 +4001,7 @@
callback();
};

css.href = fileName + ".css";
css.href = fileName + ".css" + (editormd.defaults.resourcesVersion ? '?' + editormd.defaults.resourcesVersion : '');

if (into === "head") {
document.getElementsByTagName("head")[0].appendChild(css);
Expand Down Expand Up @@ -3999,7 +4032,7 @@
script = document.createElement("script");
script.id = fileName.replace(/[\./]+/g, "-");
script.type = "text/javascript";
script.src = fileName + ".js";
script.src = fileName + ".js" + (editormd.defaults.resourcesVersion ? '?' + editormd.defaults.resourcesVersion : '');

if (editormd.isIE8) {
script.onreadystatechange = function () {
Expand Down
31 changes: 26 additions & 5 deletions public/assets/vendor/editor-md/plugins/image-dialog/image-dialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
var editor = this.editor;
var settings = this.settings;
var cursor = cm.getCursor();
var selection = cm.getSelection() + " size:800,1000";
var selection = cm.getSelection();
var imageLang = lang.dialog.image;
var classPrefix = this.classPrefix;
var iframeName = classPrefix + "image-iframe";
Expand Down Expand Up @@ -59,6 +59,11 @@
"<label>" + imageLang.alt + "</label>" +
"<input type=\"text\" value=\"" + selection + "\" data-alt />" +
"<br/>" +
"<label title='最大展示尺寸，单位 px'>展示尺寸</label>" +
"<input type=\"number\" min='0' value=\"800\" data-width style='width: 120px; float: left' placeholder='宽度(px)'/>" +
"<input type=\"number\" min='0' value=\"1000\" data-height style='width: 120px; float: left; margin-left: 24px' placeholder='高度(px)'/>" +
"<div style='clear: both'></div><div style='width: 264px; margin-left: 75px; color: #cacaca'>图片最大展示尺寸，如果不限制，请留空</div>" +
"<br/>" +
"<label>" + imageLang.link + "</label>" +
"<input type=\"text\" value=\"http://\" data-link />" +
"<br/>" +
Expand All @@ -69,7 +74,7 @@
dialog = this.createDialog({
title : imageLang.title,
width : (settings.imageUpload) ? 465 : 380,
height : 254,
height : 320,
name : dialogName,
content : dialogContent,
mask : settings.dialogShowMask,
Expand All @@ -84,22 +89,36 @@
var url = this.find("[data-url]").val();
var alt = this.find("[data-alt]").val();
var link = this.find("[data-link]").val();
var maxWidth = this.find("[data-width]").val();
var maxHeight = this.find("[data-height]").val();

if (url === "")
{
alert(imageLang.imageURLEmpty);
return false;
}

var sizeControl = "";
if (maxWidth !== '' || maxHeight !== '') {
sizeControl += 'size:';
if (maxWidth !== '') {
sizeControl += maxWidth;
}

if (maxHeight !== '') {
sizeControl += ',' + maxHeight;
}
}

var altAttr = (alt !== "") ? " \"" + alt + "\"" : "";

if (link === "" || link === "http://")
{
cm.replaceSelection("![" + alt + "](" + url + altAttr + ")");
cm.replaceSelection("![" + (sizeControl !== '' ? sizeControl : alt) + "](" + url + altAttr + ")");
}
else
{
cm.replaceSelection("[![" + alt + "](" + url + altAttr + ")](" + link + altAttr + ")");
cm.replaceSelection("[![" + (sizeControl !== '' ? sizeControl : alt ) + "](" + url + altAttr + ")](" + link + altAttr + ")");
}

if (alt === "") {
Expand Down Expand Up @@ -184,7 +203,9 @@
dialog.find("[type=\"text\"]").val("");
dialog.find("[type=\"file\"]").val("");
dialog.find("[data-link]").val("http://");
dialog.find("[data-alt]").val("size:800,1000");
dialog.find("[data-alt]").val("");
dialog.find("[data-width]").val("800");
dialog.find("[data-height]").val("1000");

this.dialogShowMask(dialog);
this.dialogLockScreen();
Expand Down
2 changes: 1 addition & 1 deletion public/assets/vendor/editor-md/plugins/image-handle-paste/image-handle-paste.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
if(ret.success == 1){
var dialog = $("." + classPrefix + "image-dialog");
dialog.find("input[data-url]").val(ret.url);
dialog.find('input[data-alt]').val('size:800,1000');
// dialog.find('input[data-alt]').val(ret.url.split('/').pop());
//cm.replaceSelection("![](" + ret.url + ")");
}
console.log(ret.message);
Expand Down
3 changes: 2 additions & 1 deletion resources/views/components/markdown-show.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
// mermaid.initialize({startOnLoad:true});
mermaid.init(undefined, $(".markdown-body .mermaid"));
editormd.defaults.resourcesVersion = "{{ resourceVersion() }}";
// 内容区域解析markdown
editormd.katexURL = {
css : "{{ cdn_resource('/assets/vendor/katex-0.11.min') }}",
Expand Down Expand Up @@ -101,7 +102,7 @@
}
});
// 图片缩放支持
$.wz.imageResize('#markdown-body');
$.wz.imageClick('#markdown-body');
// sql-create 标签解析
$.wz.sqlCreateSyntaxParser('#markdown-body .wz-sql-create');
Expand Down
2 changes: 1 addition & 1 deletion resources/views/components/swagger-show.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
});
window.setTimeout(function () {
$.wz.imageResize('#markdown-body');
$.wz.imageClick('#markdown-body');
// $('.swagger-ui section.models h4').trigger('click');
}, 3000);
});
Expand Down
2 changes: 2 additions & 0 deletions resources/views/doc/markdown.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@
editormd.markedURL.js = '{{ cdn_resource('/assets/vendor/editor-md/lib/marked-0.3.3.min') }}';
@endif
editormd.defaults.resourcesVersion = "{{ resourceVersion() }}";
// 初始化 Editor.md
var editor = $.wz.mdEditor('editormd', {
template: function () {
Expand Down

0 comments on commit ce877e0

Please sign in to comment.