内容工具提供保存确认，但不保存在 php 项目中答案

【问题标题】：Content tools gives save confirmation but does not save on php project内容工具提供保存确认，但不保存在 php 项目中
【发布时间】：2015-11-12 17:28:15
【问题描述】：

目标

使用Content Tools使我的网站可编辑

背景

我将内容工具添加到我的网站Package Mules。我有可供公众编辑的部分。目前安全性不是问题，它是一个非常小的站点。

问题

它给了我一个它保存的复选标记，不像以前我会得到一个“X”意思错误。正如您在this screencast 中看到的那样。但是当我刷新页面时，它似乎并没有真正保存。

代码

回购

https://github.com/JGallardo/package-mules

HTML（用于 index.php）

<!DOCTYPE hmtl>
<html lang="en">
<?php include 'includes/head.html';?>

<body>
    <?php include 'includes/nav.html';?>
    <section class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Package Mules</h1>
                <p>Welcome to the future home of package mules. Our mission is to help bring movers together with low cost options for moving.</p>
                <p>We set up an editable page so we can get public feedback. Please be considerate and only post appropriate content.</p>
            </div>
        </div>
    </section>

    <section class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>The thing you hate most about moving is?</h2>
            </div>
            <div class="col-md-12">
                <div data-editable data-name="moving-1">
                    <blockquote>
                        [Enter content here]
                    </blockquote>
                    <p>[your name]</p>
                </div>
                <div data-editable data-name="moving-2">
                    <blockquote>
                        [Enter content here]
                    </blockquote>
                    <p>[your name]</p>
                </div>
                <div data-editable data-name="moving-3">
                    <blockquote>
                        [Enter content here]
                    </blockquote>
                    <p>[your name]</p>
                </div>
                <div data-editable data-name="moving-4">
                    <blockquote>
                        [Enter content here]
                    </blockquote>
                    <p>[your name]</p>
                </div>
                <div data-editable data-name="moving-5">
                    <blockquote>
                        [Enter content here]
                    </blockquote>
                    <p>[your name]</p>
                </div>
                <div data-editable data-name="moving-6">
                    <blockquote>
                        [Enter content here]
                    </blockquote>
                    <p>[your name]</p>
                </div>
            </div>
        </div>

    </seciton>

    <?php include 'includes/footer.html';?>
    <?php include 'includes/scripts.html';?>
    <script>
        window.addEventListener('load', function() {
            var editor;

            ContentTools.StylePalette.add([
                new ContentTools.Style('Author', 'author', ['p'])
            ]);

            editor = ContentTools.EditorApp.get();
            editor.init('*[data-editable]', 'data-name');

            editor.bind('save', function (regions) {
                var name, payload, xhr;

                // Set the editor as busy while we save our changes
                this.busy(true);

                // Collect the contents of each region into a FormData instance
                payload = new FormData();
                for (name in regions) {
                    if (regions.hasOwnProperty(name)) {
                        payload.append(name, regions[name]);
                    }
            }

            // Send the update content to the server to be saved
            function onStateChange(ev) {
                // Check if the request is finished
                if (ev.target.readyState == 4) {
                    editor.busy(false);
                    if (ev.target.status == '200') {
                        // Save was successful, notify the user with a flash
                        new ContentTools.FlashUI('ok');
                    } else {
                        // Save failed, notify the user with a flash
                        new ContentTools.FlashUI('no');
                    }
                }
            };

            xhr = new XMLHttpRequest();
            xhr.addEventListener('readystatechange', onStateChange);
            xhr.open('POST', '/index.php');
            xhr.send(payload);

            var_dump($_POST); 
        });
    });

    </script>

</html>

【问题讨论】：

如果您可以共享 PHP 以在您的 git hub 频道上保存文件，那就太好了。我知道你取消了 repo，但希望不必编写代码:)

标签： javascript php content-management-system

【解决方案1】：

我相信这里的问题是你的 JavaScript 中的 var_dump($_POST); 调用。我不是 PHP 编码员，但我假设这是一个 PHP 调用，它应该在 PHP 标记中。

这似乎起作用的原因是在此错误之后调用了 onStateChange 回调。所以事件的过程看起来有点像这样：

你点击了保存按钮。
编辑器触发save 事件调用您的保存代码。
编辑器被保存代码置于忙碌状态。
保存代码将回调函数绑定到您的index.php 请求，然后将其发送到服务器。
由于var_dump($_POST); 语句而引发错误。此错误会导致代码停止执行，因此永远不会返回到编辑器，这意味着编辑器实际上并没有离开编辑模式。
发送的请求成功，并在来自服务器的响应中调用之前注册的回调 (onStateChange)。
onStateChange 回调将编辑器设置为非忙碌状态并触发 OK 消息，因为您收到了来自 index.php 的 200 响应。

这给人一种错觉，当您的 JavaScript 中实际发生错误时，一切都正常了。检查控制台你应该会看到错误。

【讨论】：