将 TinyMCE 文本区域的内容保存到文件

Question

将 TinyMCE 文本区域的内容保存到文件

5

我一直在尝试将tinymce编辑器的文本区域内容保存到.txt文件中，但一直没有成功。

这是我的HTML文件代码：

<!Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TinyMCE example</title>
  <meta name="description" content="HTML5 Basic template">
  <meta name="author" content="R Dickinson">
  <link rel="stylesheet" href="css/styles.css?v=1.0">
  <script src="js/scripts.js"></script>
  <script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
  <script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",

});
</script>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
    <header>
<h1>test tinymce save</h1>
    </header>
    <nav>
    </nav>
    <section>

<form method="post" action="test.php">
    <p> 
        <textarea name="content" style="width:50%"></textarea>
        <input type="submit" value="Save" />
    </p>     
</form>
    </section>
    <aside>
    </aside>
    <footer>
        </footer>
</body>
</html>

现在是test.php文件。

<?php
/*
 * test.php
  */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>test tiny mce</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 0.21" />
</head>

<body>
<?php

echo(stripslashes($_POST['content']));
?>
<?php
$file = "data.txt";
$fp = fopen($file, 'w');
$data =(stripslashes($_POST['content']));
fwrite($fp, $data);
fclose($fp);
?>

</body>

</html>

我感激有用的回复来解决这个问题，非常感谢 :-) 更新根据下面第一个答案，我已经添加了triggerSave：

 <script language="Javascript">
function submitForm() {
tinyMCE.triggerSave();
document.forms[0].submit();
}
</script>

并且

<form method="post" action="test.php">
<p> 
    <textarea name="content" style="width:50%"></textarea>
    <!--<input type="submit" value="Save" />-->
    <a href="javascript:submitForm();">Submit Form</a>
</p>

但仍然没有成功......非常感谢您的帮助。

更新2 这是我的jQuery TinyMCE版本：

 <!Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample WebPage</title>
  <meta name="description" content="HTML5 Basic template">
  <meta name="author" content="R Dickinson-see sitepoint etc">
  <link rel="stylesheet" href="css/styles.css?v=1.0">
  <script src="js/scripts.js"></script>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
        google.load("jquery", "1.3");
</script>
<!-- Load jQuery build -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
        mode : "textareas"
});
</script>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
    <header>
        <h1>Enter the main heading, usually the same as the title.</h1>
    </header>
    <nav>
    </nav>
    <section>


<!-- OF COURSE YOU NEED TO ADAPT ACTION TO WHAT PAGE YOU WANT TO LOAD WHEN HITTING "SAVE" -->
<form method="post" action="show.php">
        <p>     
                <textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
                <input type="submit" value="Save" />
        </p>
</form>

    </section>
    <aside>
    </aside>
    <footer>

  </footer>
</body>
</html>

- rpd

2

什么是问题？文件是否已创建？它是空的吗？服务器返回了一些错误吗？$_POST是否已填充？ - jcjr

你对该文件有写入权限吗？ - Dirk McQuickly

问题在于我输入到文本区域的文本没有保存到文本文件中！我已经在目录中有名为data.txt的文件，并且它具有可写权限。我正在使用IIS服务器进行测试，位于inetpub>wwwroot>。非常感谢更多的帮助。 - rpd

2个回答

0

在提交表单之前，您应该更新TinyMCE实例。使用以下JavaScript代码：

tinyMCE.triggerSave();

我通常将这个放在一个函数中，并在表单的onsubmit事件中调用它。

在Stackoverflow上已经有不同的关于这个主题的问题了。

- MahanGM

嗨，感谢您的回复。我不太确定您的意思，特别是因为我正在使用TinyMCE编辑器（而不是CKEditor）。您能否用TinyMCE代码再解释一下呢？谢谢。 - rpd

哦！不好意思，我看错了你的标题！已经编辑答案了。 - MahanGM

感谢您从原始的CKEditor实例中编辑TinyMCE--我已尝试在编辑我的问题时实现triggerSave，但目前还没有成功。 - rpd

我在你的实现中没有发现任何错误。在这些情况下，我会尝试对我的代码进行不同的尝试。为你的表单命名并进行其他操作。尝试使用var_dump()输出$_POST['content']。我认为逐步跟踪将有所帮助。 - MahanGM

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yang · Accepted Answer

这个问题可以归结为：

如何将TinyMCE的HTML内容保存到文件中。

首先，你需要：

1）获取编辑器的内容
2）将此内容发送到PHP脚本
3）实现一些函数来将该内容保存到文件中

获取内容
确保你按照正确的方式进行获取。

例如，

<script type="text/javascript">

window.onload = function(){

  var btn = document.getElementById('SubmitBtn');

  btn.onclick = function(){

     //This MUST alert HTML content of editor.
     alert( tinyMCE.activeEditor.getContent() );
  }
}

</script>

<input type="button" id="SubmitBtn" value="Get HTML content"/>

将内容发送到PHP脚本

您只需要将方法tinyMCE.activeEditor.getContent()的值发送到PHP脚本。

好的，您应该使用Jquery-AJAX来完成此操作。

假设您已经在head部分的script标签中包含了jquery.js，下一步就是将JavaScript变量发送到PHP脚本。

这个过程会类似于这个：

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

  var url = "path_to_your_php_script.php";

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

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

});

</script>

PHP脚本

由于我们发送了"content"，因此这个内容将被填充到$_POST超全局变量中。

<?php

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

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

   if ( save_html_to_file($_POST['content'], '/some_file.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);
}

执行完毕后，您应该收到带有成功消息的alert。