Question

我使用嵌入的TinyMCE构建了一个简单的网页。

HTML部分：

<form method="post" action="dump.php">
<div id="main">
<div id="container_left">
        <textarea id="mytextarea"></textarea>
        <input id="submit" type="submit" value="submit">            
</div>
<div id="show_right"></div>
</div>
</form>

JavaScript部分。

<script src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    height: 250,
    plugins: [
        "code advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "code insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    setup: function (editor) {
        editor.on('init keydown change', function (e) {
           document.getElementById('show_right').innerText = editor.getContent();
        });
    }
});
</script>

现在，我想在单击submit按钮之后，在TinyMCE的编辑器中打印内容。

dump.php

<?php
    print_r($_POST);
?>

为什么dump.php无法打印任何内容？
我可以通过AJAX方法将信息发送到dump.php。
1.删除html部分中的<form method="post" action="dump.php"></form>。
2.在JavaScript部分中添加以下js代码。

<script>
function send(){
    var data = tinyMCE.get('mytextarea').getContent();
    var ajax = new XMLHttpRequest();
    ajax.open('POST','dump.php',false);
    ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    ajax.send('data='+data);    
} 
ob = document.getElementById("submit");
ob.addEventListener("click",send);
</script>

我尝试过将textarea为id的{{1}}中键入的内容传递给mytextarea，dump.php可以正确打印数组

我的问题是如何将TinyMCE dump.php中的内容直接传递到PHP文件，而不是通过AJAX发送？在没有AJAX的情况下进行工作。

Answer 1

是的，您可以在没有AJAX的情况下发送带有隐藏的iframe的AJAX，该属性具有target的{{1}}值作为name属性。原始页面将不会重新加载。来自服务器的答案将被加载到隐藏的iframe中。在这种情况下，您必须将iframe iframe设置为display。

none

对于您的<iframe name="server_answer" style="display:none"></iframe> <form method="post" action="dump.php" target="server_answer"> <div id="main"> <div id="container_left"> <textarea id="mytextarea" name="mytext"></textarea> <input id="submit" type="submit" value="submit"> </div> <div id="show_right"></div> </div> </form>，您还必须编写一些textarea作为属性，例如name，因为在服务器端，您需要获取要发送的文本。而且因为您没有写这个name="mytext"，所以您无法获取它。在您的AJAX解决方案中，您可以使用name来完成。在这种情况下，ajax.send('data='+data);就像您的data的名称。

对于您的PHP脚本：

textarea

替代解决方案

您还可以在iframe中将提交表单显示为单独的页面，提交后，外部页面将不会重新加载。此解决方案也不使用AJAX。

Answer 2

您不需要iframe，只需将其添加到tinymce配置中即可保持原始文本区域与编辑器同步

tinymce.init({
selector: '#mytextarea',
setup: function (editor) {
    editor.on('change', function () {
        editor.save();
    });
}
});

快速又肮脏的poc

<!DOCTYPE html>
<html>
<head>
  <script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
  <script>
  tinymce.init({
    selector: '#mytextarea',
    setup: function (editor) {
        editor.on('change', function () {
            editor.save();
        });
    }
  });
  </script>
</head>

<body>
<?php if ('POST' === $_SERVER['REQUEST_METHOD']): ?>
  <pre><?php print_r($_POST) ?></pre>
<?php else: ?>
    <form method="post">
      <label for="mytitle">Title</label>
      <input type="text" id="mytitle" name="title" value="">
      <textarea id="mytextarea" name="content"></textarea>
      <button type="submit" name="submit">Submit</button>
    </form>
<?php endif; ?>
</body>
</html>

Answer 3

首先，您必须为文本区域命名。和“ dump.php”：

<？php

print_r（$ _POST [“ name_of_textarea ”]）;

？>

如何将TinyMCE文本区域中的内容直接传递到PHP文件，而不是通过AJAX发送？

3 个答案: