logo标签列表

使用JavaScript编辑页面后如何保存页面？

phpjavascriptmysqlwysiwyg
3

现在，大家都知道一种有趣的小技巧，即将这段Javascript代码输入到浏览器的URL栏中：

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

咦，你就可以自由地编辑网页了。

唯一的问题是——你不能保存它！

经过一番快速调查，我发现最好的保存方法可能是通过这里建议的方法，将页面变成一个巨大的表单，并将其发布到MySQL数据库中。

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

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

这段内容涉及IT技术，需要翻译的是：“它不会输出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 -->
我完全明白你的要求。 你可以做的一件事是，将php文件保存为html文件，对其进行更改，保存后再转换回php。另一件事是，使用类似Dreamweaver这样具有设计师预览功能的工具如何？ - Prasanth
嗨，感谢您的回复！非常好的观点，但使用Dreamweaver会失去意义 - 因为我需要让客户在线进行编辑。 - Adam McArthur
5个回答
7

不要在整个文档体上设置contentEditable属性，而是只在需要编辑的元素上设置。之后将该元素的内容发送到服务器。当你需要再次获取数据时，只需将该部分放置在适当的位置即可。

2

虽然这不是回答你的问题，但也许有助于解决问题：

尽管听起来很简单（在元素上放置contentEditable="yes"，然后开始编辑）- 但事实并非如此...

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

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

http://aloha-editor.org/

问题是，你有什么样的系统来保存Aloha编辑的更改吗？因为显然它只是一个编辑器 - 不是保存内容的工具。 - Adam McArthur
@AdamMcArthur 是的 - 你需要编写一个保存内容的小部分。我使用了Mysql和PHP。 - madflow
有没有可能我能从你那里买下来哈哈？ - Adam McArthur
这些都是黑暗的日子。 - Adam McArthur
1

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

例如：

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

如何将其取回并放回原始文件，这更加复杂。在节点中，我会编辑保存到数据库函数，以便打开文件X并将其附加到某个位置，或者仅将其附加到req变量或其他内容并提供服务。

但是，如果这是一个公共页面，请不要出于安全原因执行整个想法。

我知道你的意思，前面的部分很容易理解，但是保存到实际文件中就开始变得有点疯狂了 :/ - Adam McArthur
顺便说一句，感谢您的帮助 :) - Adam McArthur
1
谢谢您提供的这些页面，真的帮了我很多 :) - Adam McArthur
0

一个不太优雅但可行的方法是同时使用PHP和HTML。

首先，像某位用户所说，不要重复造轮子。

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

  2. 使用面向对象编程(OOP)方式设计页面。注意，如果你喜欢过程式编程(procedural PHP)，你其实不需要使用OOP，如果你不想的话。可以保持一定的OOP逻辑而以过程式编码风格进行编码。

  3. 通过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来完成。所以，不是使用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

当然有成千上万种解决这个问题的方法。任何方法都可以！:-)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接