Tinymce不保存或提交我的內容

Question

我不是一個專業的程序員，我沒有使用Javascript的經驗，所以這個Tinymce讓我很困惑。 基本上我的客戶想要在不觸及代碼的情況下自己更新內容，所以我必須設置這個Tinymce，以便他可以直接在瀏覽器上編輯內容。 我按照說明安裝了Tinymce，但是當我點擊提交時，沒有任何反應。 當我單擊“保存”時，它會將我的代碼鏈接到PHP頁面。 以下是我的所有代碼。 請告訴我我需要做什么。

在HTML頁面中：

<script type="text/javascript" src="tinymce/js/tinymce/tinymce.min.js"></script>

<script>
  tinymce.init({
        selector: "textarea#elm1",
        theme: "modern",
        width: 800,
        height: 600,
        plugins: [
             "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
             "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
             "save table contextmenu directionality emoticons template paste textcolor"
       ],
       content_css: "css/content.css",
       toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons", 
       style_formats: [
            {title: 'Bold text', inline: 'b'},
            {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
            {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
            {title: 'Example 1', inline: 'span', classes: 'example1'},
            {title: 'Example 2', inline: 'span', classes: 'example2'},
            {title: 'Table styles'},
            {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
        ],

         setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    }
    }); 

</script>

<script type="text/javascript">
$(function(){

  var url = "news.php";

  $("#SubmitBtn").click(function(){
    //"content" will PHP variable 
    $.post(url, { "page_content" : tinyMCE.activeEditor.getContent() }, function(respond){

       if ( respond == ){
          alert('Content saved to file');
          return;
       } else {
          //Error message assumed
          alert(respond);
        }
    });
  });

});

</script>

表格：

<form method="post" action="news.php">
 <textarea id="elm1" name="page_content">The content I wanna edit</textarea>
        <input type="button" id="SubmitBtn" value="Submit"/>
        </form>

在PHP頁面中：

<?php

if ( isset($_POST['page_content']) ){

   //This is what you want - HTML content from tinyMCE
   //just treat this a string

   if ( save_html_to_file($_POST['page_content'], 'news.html') ){
     //Print 1 and exit script
     die(1);
   } else {
      die('Couldnt write to stream');
   }
}

/**
 * 
 * @param string $content HTML content from TinyMCE editor
 * @param string $path File you want to write into
 * @return boolean TRUE on success
 */
function save_html_to_file($content, $path){
   return (bool) file_put_contents($path, $content);
}

Answer 1

使用： e.preventDefault(); 停止提交表單

  $("#SubmitBtn").click(function(e){
     e.preventDefault();
        //"content" will PHP variable 
        $.post(url, { "page_content" : tinyMCE.activeEditor.getContent() }, function(respond){

           if ( respond == ){
              alert('Content saved to file');
              return;
           } else {
              //Error message assumed
              alert(respond);
            }
        });
      });

Answer 2

嘗試這個它可以解決你的問題只需通過ed.getContent()獲取編輯器的內容

 $("#SubmitBtn").click(function(e){
     e.preventDefault();
     var ed = tinyMCE.get('page_content');
     var data = ed.getContent() // get data of editor
     $.post(url, { "page_content" : data }, function(respond){

           if ( respond == ){
              alert('Content saved to file');
              return;
           } else {
              //Error message assumed
              alert(respond);
            }
        });
      });

Answer 3

嘗試將此代碼添加到提交按鈕

onclick="tinyMCE.triggerSave(true,true);"