TinyMCE编辑器提交后控制台无文本输出问题求助

这是个很常见的TinyMCE使用误区——当你初始化TinyMCE后，原生的<textarea>元素会被编辑器隐藏，你直接通过reply.value获取的是原始textarea的初始空值，而非编辑器里的实时内容。因为TinyMCE默认不会自动同步编辑器内容到原生textarea，除非表单触发默认提交行为，但你用event.preventDefault()阻止了这个动作，所以同步没发生。

解决步骤： #

• 改用TinyMCE官方提供的API来获取编辑器内容：
  • 获取富文本内容：tinymce.get('forumreply').getContent()
  • 获取纯文本内容：tinymce.get('forumreply').getContent({format: 'text'})

修改后的完整代码： #

<form>
  <textarea id="forumreply" style="width:100%;margin-top:1rem;height:10rem;"></textarea>
  <div id="replyerrbox" class="errboxtxt"></div>
  <button id="forumreplysubbut" class="btn btn--orange">Send</button>
</form>

<script>
document.getElementById('forumreplysubbut').addEventListener('click',function(event){
  event.preventDefault();
  var err = new Array();
  // 关键：获取TinyMCE编辑器实例，而不是原生textarea
  var editor = tinymce.get('forumreply');
  var replyContent = editor.getContent(); // 获取富文本内容
  // 如果需要纯文本，用下面这行：
  // var replyContent = editor.getContent({format: 'text'});
  var rpid = <?php echo $postId; ?>;
  var errbox = document.getElementById('replyerrbox');
  
  console.log(replyContent); // 现在能正确输出编辑器内容了

  /* 后续验证和AJAX逻辑修改对应的变量即可
  if(replyContent.trim().length < 100){
    err.push(1);
  }
  if(err.length != 0){
    errbox.innerHTML = "Replies must be 100 characters in length.";
  }else{
    var dta = new FormData();
    dta.append('reply',replyContent);
    dta.append('rpid',rpid);
    var req = new XMLHttpRequest();
    req.onreadystatechange = function(){
      editor.setContent(''); // 清空编辑器内容
      getReplies();
    }
    req.open('POST','includes/processforumreply.php',true);
    req.send(dta);
  }
  */
});
</script>

<script>
tinymce.init({
  selector:'textarea',
  branding:false,
  menubar:false,
  mobile:{theme:'mobile'},
  plugins: 'emoticons',
  toolbar: 'undo redo | bold italic | link emoticons'
});
</script>

额外提示： #

如果需要在某些场景下手动同步编辑器内容到原生textarea，可以调用editor.save()方法，这样reply.value就能拿到内容了，但直接用getContent()是更推荐的方式。

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