3

现在，每个人都知道将这段 Javascript 代码插入浏览器 URL 栏中的可爱小技巧：

document.body.contentEditable = 'true'; document.designMode = 'on'; void 0

还有埃尔普雷斯托！您可以按照自己的意愿开始自由编辑网站。

唯一的问题是 - 你无法保存它！

在做了一些快速的研究之后，我发现最有可能保存它的最好方法是通过这里建议的方法，它包括以某种方式将页面变成一个巨大的表单并将其发布到 MySQL 数据库。

当然，虽然这样做很好，但最终会保存我的整个页面——而不仅仅是我想要编辑的部分或容器——这是一个主要问题，因为我们的开发人员需要保留代码行，例如......

<?php include('header.php'); ?>

...未在 HTML 中输出。换句话说：它将保存我的页面，因为它出现在输出的 HTML 中，覆盖了我原始 PHP 文件中的内容。

我要问的是如何保存这样编辑的网站，而只是保存或更新网站上的一两个可编辑容器（不是全部，所以我的 PHP 代码不会被覆盖)?

例如：

<p>This Won't get updated when the page is "saved"</p>
<div id="update-this-contianer">
   This area will be passed on to the MySql database, and then updated into the same section of the original file.
</div><!-- End Area To Update -->
4

5 回答 5

7

无需设置contentEditable在整个主体上，只需将其放在要编辑的元素上即可。然后，将该元素的内容发送到服务器。当您想再次取回数据时，只需将该部分包含在适当的位置即可。

于 2012-08-05T12:20:18.827 回答
2

...不回答您的问题，但可能有助于解决...：

尽管我听起来很容易（将 contentEditable="yes" 放在一个元素上然后你就走了） - 它不是......

您将不得不使用 javascript 来捕获页面的已编辑元素并将现有/新/更改的内容保存到数据库中。

我决定不重新发明轮子，并在过去的一个项目中开始使用 Aloha：

http://aloha-editor.org/

于 2012-08-05T12:26:48.217 回答
1

我找到了以下描述。它可能会有所帮助。

contenteditable 更改事件

http://css-tricks.com/snippets/javascript/saving-contenteditable-content-changes-as-json-with-ajax/

于 2012-08-05T12:17:32.213 回答
1

只需创建一个对象，在按下按钮时获取所有数据并使用 jQuery post 发送。

例如：

var val = $('#update-this-contianer').html()
$.post('/post-address', {value: val}, function(returnMsg){
console.log(returnMsg)
}

但是，如何将其取回并将其放入原始文件中则更为复杂。在节点中，我将编辑 save to db 函数，以便它打开文件 X 并将其附加到某处，或者只是将其附加到 req 变量或其他东西并提​​供它。

但是，如果这是一个面向公众的页面，出于安全原因，请不要这样做。

于 2012-08-05T12:25:22.810 回答
0

一种肮脏或干净的方法是同时使用 PHP 和 HTML。

首先，正如一位用户所说，不要重新发明轮子。

  1. 在项目的根目录下载并安装 Aloha-Editor。

  2. 使用OOP方法来设计您的页面。免责声明，如果您更喜欢过程 PHP ，如果您不想使用，您实际上不必使用OOP 。可以在保持一定的OOP逻辑的同时编写程序风格的代码。

  3. 通过 ajax 将整个 HTML 页面保存到数据库中，然后使用 ajax 获取页面的内容。

例子 ：

索引.php

<?php 
//include your db parameters
include_once 'config.php';

//include your html page
include_once 'view/index.html';?>

索引.html

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Getting Started with Aloha Editor</title>
    <link rel="stylesheet" href="index.css" type="text/css">
    <!-- Load Aloha Editor css and js -->
    <link rel="stylesheet" href="/javascripts/aloha/css/aloha.css" type="text/css">
    <script src="/javascripts/aloha/lib/require.js"></script>
    <script src="/javascripts/aloha/lib/aloha.js"
      data-aloha-plugins="common/ui,common/format,common/highlighteditables,common/link"></script>
</head>
<body>
    <div id="main">
        <div id="content"><p>Getting started with Aloha Editor!</p></div>
    </div>
    <script type="text/javascript">
        Aloha.ready( function() {
            Aloha.jQuery('#content').aloha();
        });
    </script>
</body>

或者您可以简单地将 PHP 与 PHP 一起使用。因此，插入 home.php 而不是 index.html，在 home.php 中，您可以通过请求保存内容的数据库来检索内容。

例子

索引.php

<?php 
//include your db parameters
include_once 'config.php';

//include your html page
include_once 'view/home.php';?>

主页.php

select webpage_content from aloha where page_name='index'

echo $webpage_content

当然有成千上万种方法可以解决这个问题。无论什么都震撼你俩:-)

于 2019-06-02T15:53:11.837 回答