如何从Toast UI Editor（JavaScript版）中获取内容？

别担心，这个问题真的很常见，很多刚开始用tui.editor的朋友都会因为它不像普通富文本编辑器那样自动把内容塞进<textarea>里而困惑😅

其实tui.editor本身提供了专门的API来获取编辑内容，主要有两种格式可选：

获取内容的核心方法 #

假设你已经完成了编辑器的初始化（像下面这样）：

const editor = new toastui.Editor({
  el: document.querySelector('#editor'),
  height: '500px',
  initialEditType: 'markdown', // 或者 'wysiwyg'
  // 其他配置项
});

你可以通过以下两个方法拿到内容：

• 获取Markdown格式的内容：const markdownContent = editor.getMarkdown();
• 获取HTML格式的内容：const htmlContent = editor.getHTML();

用于表单提交的实现思路 #

因为编辑器本身不会关联到表单元素，所以我们可以用一个隐藏的<input>来中转内容，在表单提交前把编辑器的内容赋值给这个隐藏输入框，再一起提交：

1. 表单结构示例 #

<form id="submitForm" action="/your-submit-url" method="POST">
  <!-- 编辑器容器 -->
  <div id="editor"></div>
  <!-- 隐藏的输入框，用来存放编辑器内容 -->
  <input type="hidden" name="editorContent" id="hiddenContent">
  <button type="submit">提交内容</button>
</form>

2. 提交事件监听 #

给表单添加提交事件，在提交前把编辑器内容注入到隐藏输入框：

document.getElementById('submitForm').addEventListener('submit', function(e) {
  // 这里可以选择获取Markdown或HTML格式，根据你的后端需求来
  const content = editor.getMarkdown();
  // 把内容赋值给隐藏输入框
  document.getElementById('hiddenContent').value = content;
  
  // 不需要阻止默认提交，表单会正常把隐藏输入框的内容发出去
});

这样就能顺利把编辑器的内容和表单一起提交啦～其实这些API在官方文档里是有说明的，可能之前看的时候没注意到，下次可以重点看看Editor类的实例方法部分哦！

内容的提问来源于stack exchange，提问作者xil3