tui.editor（TOAST UI Editor）是一款所见即所得的Markdown编辑器。TOAST UI Editor提供Markdown模式和WYSIWYG模式。它的功能非常强大，你可以编辑表格，UML图和图表等

tui.editor富文本编辑器  官网链接：传送门

抽空给叶开楗的弄个说明吧，这里只弄html版的，其他人如果需要vue版的说明，自己看官网的很具体，我就不说了

第一步引用 script 闭合自己补齐

  1. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css" />  
  2. <link rel="stylesheet" href="https://uicdn.toast.com/editor/3.2.0/toastui-editor.min.css" />      
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js">script>  
  4. <script src="https://uicdn.toast.com/editor/3.2.0/toastui-editor-all.min.js">script>  

第二步容器 div 闭合自己补齐

  1. <div id="editorSection">div>  

第三步创建 script 闭合自己补齐

  1. <script>    
  2. // window.onload 事件是在dom挂载结束后触发    
  3. window.onload = function(){    
  4.   console.log("DOM加载完毕--划重点");    
  5.   var editor = new toastui.Editor({    
  6.     el: document.querySelector('#editorSection'),    
  7.     height: '600px',    
  8.     initialEditType: 'markdown',    
  9.     previewStyle: 'vertical',    
  10.     placeholder: '请输入正文...',     
  11.     events: {    
  12.     change: function() {    
  13.        console.log(editor.getMarkdown());    
  14.     },    
  15.     }    
  16.   });    
  17. }    
  18. script>    

提交图片

你要自己研究下，我没时间,而且你用的应该是七牛云存储吧