Question

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

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

和El Presto！您可以根据自己的需要开始自由编辑网站。

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

在做了一些快速研究之后，我发现最有可能的，保存这个的最好方法是使用方法suggested here，它以某种方式将页面变成一个巨大的形式并将其发布到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 -->

Answer 1

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

Answer 2

......没有回答你的问题但可能有助于解决方案......：

即使我听起来很容易（在一个元素上放置contentEditable =“yes”而且你去了） - 它不是......

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

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

http://aloha-editor.org/

Answer 3

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

contenteditable change events

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

Answer 4

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

例如：

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

如何将其取回并将其放入原始文件中，但更复杂。在节点i中，我将编辑保存到db函数，以便打开文件X并将其附加到某个地方，或者只是将其附加到req变量或其他内容并提供它。

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

Answer 5

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

首先，就像一个用户所说的那样，不要重新发明轮子。

在项目的根目录下载并安装Aloha-Editor。
使用 OOP 方法来设计页面。免责声明，如果您更喜欢 procedural PHP ，则不需要使用 OOP 。可以在保持某种 OOP 逻辑的同时，编写过程样式的代码。
通过ajax将整个HTML页面保存到数据库，然后使用ajax获取页面内容。

示例：

index.php

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

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

index.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一起使用。因此，代替index.html，插入例如home.php，然后在home.php中，您可以通过请求数据库保存内容来检索内容。

示例

index.php

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

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

home.php

select webpage_content from aloha where page_name='index'

echo $webpage_content

当然，有数千种方法可以解决此问题。不管你们俩是什么：-）

用Javascript编辑后保存页面？

5 个答案: