Question

目的

使用Content Tools

使我的网站可编辑

背景

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

问题

它给了我一个标记，它保存了，不像之前我会得到一个＆＃34; X＆＃34;意思是错误。正如您在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>

Answer 1

我认为这里的问题是var_dump($_POST);调用你的JavaScript。我不是PHP编码器，但我假设这是一个PHP调用，它应该在PHP标签内。

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

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

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

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

目的

背景

问题

代码

回购

HTML（对于index.php）

1 个答案: