naiveboom/public/javascripts/view.js

function replaceDataURLFrom(text) {
	var blobMap = {};
	var promises = [];
	var test = /\]\((data:.*?)\)/g
	for (var match = test.exec(text); match; match = test.exec(text)) {
		promises.push(
			fetch(match[1]).then(function(res) {
				return Promise.all([res.url, res.blob()]);
			}).then(function([dataURL, blob]) {
				blobMap[dataURL] = URL.createObjectURL(blob);
			})
		);
	};
	return Promise.all(promises).then(function() {
		return text.replace(test, function(_, dataURL) {
			return '](' + blobMap[dataURL] + ')';
		});
	});
}

Vue.component('vue-easymde', VueEasyMDE.VueEasyMDE)

var origText;

// 查看消息需要用到的JS
app = new Vue({
	el: '#app',
	data: {
		status: -1,
		text: null,
		easyMDEOpts: {
			maxHeight: '70vh',
			onToggleFullScreen: function() { $('.navbar').toggle(); },
			spellChecker: false,
			toolbar: [
				{
					name: 'copy no-disable',
					action: function() {
						if (!origText) return;
						navigator.clipboard.writeText(origText);
					},
					className: 'fa fa-clipboard',
					title: 'Copy to clipboard',
				},
				'preview',
				'fullscreen',
			],
			renderingConfig: { codeSyntaxHighlighting: true },
		},
	},
	mounted: function() {
		// 从URL获取GUID，然后透过POST获取消息
		var guid = reg_guid.exec(location.href)[0];
		axios.post('/api/get-msg', {
			guid: guid
		}).then(function(response) {
			var data = response.data;
			app.status = data.status;
			if (app.status !== 1) return null;
			origText = data.text;
			return replaceDataURLFrom(data.text);
		}).then(function(text) {
			app.text = text;
		}).catch(function(error) {
			throw error;
		});
	},
	watch: {
		status: function(status) {
			if (status !== 1) return;
			// 获取成功，等待装载并设定编辑器状态

			this.$nextTick(() => {
				var easyMDE = this.$refs.preview.getMDEInstance();
				easyMDE.togglePreview();
				easyMDE.codemirror.setOption('readOnly', true);
			});
		}
	}
})