a.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. modal = new Vue({
  2. el: '#modal',
  3. data: {
  4. msg: '么有',
  5. title: '提示'
  6. },
  7. methods: {
  8. show: function(msg, title) {
  9. if (title) {
  10. this.title = title;
  11. }
  12. this.msg = msg;
  13. $('#mmodal').modal();
  14. }
  15. }
  16. })
  17. Vue.component('vue-easymde', VueEasyMDE.VueEasyMDE)
  18. var blobMap = {}
  19. app = new Vue({
  20. el: '#app',
  21. data: {
  22. text: null,
  23. enurl: null,
  24. copyicon: 'fa-clone',
  25. easyMDEOpts: {
  26. maxHeight: '47vh',
  27. onToggleFullScreen: function() { $('.navbar').toggle(); },
  28. sideBySideFullscreen: false,
  29. spellChecker: false,
  30. toolbar: [
  31. 'undo', 'redo', '|',
  32. 'bold', 'italic', 'strikethrough', 'heading', '|',
  33. 'quote', 'unordered-list', 'ordered-list', 'check-list', '|',
  34. 'link', 'image',
  35. {
  36. name: 'upload-image',
  37. action: EasyMDE.drawUploadedImage,
  38. className: 'fa fa-upload',
  39. title: 'Upload File',
  40. },
  41. {
  42. name: 'add-table',
  43. action: EasyMDE.drawTable,
  44. className: 'fa fa-table',
  45. title: 'Insert Table',
  46. },
  47. 'horizontal-rule', '|',
  48. 'preview', 'side-by-side', 'fullscreen', '|', 'guide'
  49. ],
  50. renderingConfig: { codeSyntaxHighlighting: true },
  51. uploadImage: true,
  52. imageAccept: '*',
  53. imageMaxSize: 268435456,
  54. imageUploadFunction: function(file, onSuccess, onError) {
  55. var url = URL.createObjectURL(file);
  56. var reader = new FileReader();
  57. reader.onerror = onError;
  58. reader.onload = function() {
  59. blobMap[url] = reader.result;
  60. var prefix = '[' + file.name + ']';
  61. if (file.type.startsWith('image')) {
  62. prefix = '!' + prefix;
  63. }
  64. var test = new RegExp('\\[(.+)(' + file.name + ')?\\]\\(blob:.*?\\1\\)');
  65. app.text = app.text.replace(test, prefix + '(' + url + ')');
  66. };
  67. onSuccess(url);
  68. reader.readAsDataURL(file);
  69. },
  70. },
  71. },
  72. methods: {
  73. copyTempURL: function() {
  74. navigator.clipboard.writeText(app.enurl).then(function() {
  75. app.copyicon = 'fa-check';
  76. setTimeout(function() {
  77. app.copyicon = 'fa-clone';
  78. }, 3000);
  79. })
  80. },
  81. getTempURL: function() {
  82. $('#enurl').loading({
  83. message: '加载中...',
  84. onStop: function(loading) {
  85. loading.overlay.fadeOut(650);
  86. }
  87. });
  88. axios.post('/api/get-temp', {
  89. text: app.text.replace(/\]\((blob:[^)]*)\)/g, function(_, blobURL) {
  90. return '](' + blobMap[blobURL] + ')';
  91. })
  92. }).then(function(response) {
  93. $('#enurl').loading('stop');
  94. var data = response.data;
  95. if (data.status == 1) {
  96. var newURL = location.protocol + '//' + location.host + location.pathname;
  97. app.enurl = newURL + data.guid;
  98. } else {
  99. throw 'failure to get the tmp url!';
  100. modal.show('操作失败!<br>', '错误')
  101. }
  102. console.log(response);
  103. }).catch(function(error) {
  104. console.warn(error.response);
  105. $('#enurl').loading('stop');
  106. modal.show('操作失败!<br>' + error.response.data.message, '错误')
  107. })
  108. }
  109. }
  110. })