naiveboom/public/javascripts/view.js

var basePath = document.currentScript.src + '/../../';
var cleanURL = location.origin + location.pathname
var origText

function cacheDataURLFrom(text, toCache) {
	var urlMap = {};
	var attachmentCount = 0;
	var test = /\[(.*?)\]\((data:.*?)\)/g;
	var newText = text.replace(test, function (_, label, dataURL) {
		fileName = encodeURIComponent(label.split(/[\\/]/).pop());
		var fakeURL = cleanURL + '/' + ++attachmentCount +'/' + fileName;
		urlMap[fakeURL] = dataURL;
		return '[' + label + '](' + fakeURL + ')';
	});
	return Promise.all(
		Object.entries(urlMap).map(function([fakeURL, dataURL]) {
			return fetch(dataURL).then(function(res) {
				return toCache.put(fakeURL, new Response(res.body, res));
			});
		})
	).then(function() {
		return newText;
	});
}

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

// 查看消息需要用到的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() {
		navigator.serviceWorker.register(basePath + 'sw.js').then(function () {
			return navigator.serviceWorker.ready;
		}).then(function() {
			return axios.post(basePath + '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;
			$(window).on('navigate unload', function() {
				caches.delete(guid);
			});
			return caches.open(guid);
		}).then(function(toCache) {
			return toCache && cacheDataURLFrom(origText, toCache);
		}).then(function(text) {
			app.text = text;
		}).catch(function(error) {
			throw error;
		});
	},
	watch: {
		status: function(status) {
			if (status !== 1) return;
			// 获取成功，等待装载并设定编辑器状态

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