Tui-editor富文本编辑器的使用
tui.editor（TOAST UI Editor）是一款所见即所得的Markdown编辑器。TOAST UI Editor提供Markdown模式和WYSIWYG模式。它的功能非常强大，你可以编辑表格，UML图和图表等
tui.editor富文本编辑器 官网链接：传送门
抽空给叶开楗的弄个说明吧，这里只弄html版的，其他人如果需要vue版的说明，自己看官网的很具体，我就不说了
第一步引用 script 闭合自己补齐
- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css" />
- <link rel="stylesheet" href="https://uicdn.toast.com/editor/3.2.0/toastui-editor.min.css" />
- <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js">script>
- <script src="https://uicdn.toast.com/editor/3.2.0/toastui-editor-all.min.js">script>
第二步容器 div 闭合自己补齐
- <div id="editorSection">div>
第三步创建 script 闭合自己补齐
- <script>
- // window.onload 事件是在dom挂载结束后触发
- window.onload = function(){
- console.log("DOM加载完毕--划重点");
- var editor = new toastui.Editor({
- el: document.querySelector('#editorSection'),
- height: '600px',
- initialEditType: 'markdown',
- previewStyle: 'vertical',
- placeholder: '请输入正文...',
- events: {
- change: function() {
- console.log(editor.getMarkdown());
- },
- }
- });
- }
- script>
提交图片
你要自己研究下，我没时间,而且你用的应该是七牛云存储吧
