javascript - Tinymce提交后不发送内容

Question

我不是专业程序员，我几乎没有使用 Javascript 的经验，所以这个 Tinymce 让我感到困惑。基本上我的客户想要自己更新内容而不接触代码，所以我必须设置这个Tinymce，以便他可以直接在浏览器上编辑内容。我已按照说明安装 Tinymce，但是当我单击“保存”或“提交”时，编辑框会自行刷新并显示相同的内容，没有任何更改。下面是我要编辑的 HTML 页面中的代码。 除了这个 HTML 页面，我没有任何其他 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: "save | 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>

这是我在同一 HTML 页面中的表单代码:

 <form method="post" action="news.html">
     <textarea id="elm1">The content I wanna edit</textarea>
<input type="submit" name="submitform" value="Sendform"></form> 

非常感谢大家!!

更新1:从第一个答案和我从互联网上收集的其他答案中，我已经设法得到这样的代码，但它仍然不起作用，“提交”按钮似乎当我现在点击它时什么都不做。

在 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

<form method="post" action="news.html"> - 在 action属性，您需要将其更改为 PHP 文件(或您想要的任何语言)，您可以在其中编写脚本来处理发送的数据。发生的情况是，来自 TinyMCE 的数据将以变量形式发送到服务器，您需要将其保存到某种数据库中。我假设news.html是一个静态页面 - 它必须运行数据库才能让客户端更新它。

对使用 PHP 保存和读取 MySQL 数据库以及从表单保存数据进行一些研究。

你需要给你的文本区域一个 name -- <textarea id="elm1" name="page-content">

然后您可以像这样访问在 PHP 中提交的内容:

$content = $_POST['page-content'];

然后您可以将其保存到数据库或任何您想要的地方。