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);"

Tinymce不保存或提交我的内容

3 个答案: