README

此模块提供了一种方法，可以在 TEXTAREA 编辑器中使任何 HTML 标签的内部内容可编辑。

ContentEditable 不提供数据保存的代码，只提供了一个非常简单的接口，以便将网站的可编辑内容和编辑后的数据发送到您的应用程序控制器。

您必须自行实现数据处理。

要求

PHP 5.3
Zend Framework 2
rwoverdijk/assetmanager @ https://github.com/RWOverdijk/AssetManager
jQuery
jQuery-UI

注意：jQuery 和 jQuery-UI 已包含在此模块中，并直接可用。您可以通过最小努力用自己的版本覆盖捆绑版本。

在推特上关注我：@GajewskiArtur

实时演示

您可以在 http://arturgajewski.com/cedemo 尝试 ContentEditable 模块的实时演示。

点击主页上的任何三列之一以编辑其内容。完成编辑后，请点击 div 外部以确认保存修改。第三列将返回错误状态，因为它有一个不可用的 data-url。

请注意：这是一个演示，实际上没有保存数据，页面刷新后将恢复到原始内容。

使用 Composer 安装

转到您的项目目录，并在 composer.json 文件中的 "require" 列表中添加以下行

"artur-gajewski/content-editable": "dev-master"

现在运行 Composer

php composer.phar install

然后，将 'ContentEditable' 和 'AssetManager' 模块添加到 APPLICATION_ROOT/config/application.config.php 文件中 Module 数组中

<?php
return array(
    'modules' => array(
        ...
        'AssetManager',
        'ContentEditable',
        ...
    ),
);

将 JS 和 CSS 文件添加到您的布局脚本中

ContentEditable 使用它自己的 JavaScript 和 CSS 文件在其视图脚本中生成动态编辑功能。

为了使 ContentEditable 正常工作，您需要将这些文件包含在包含所有 JavaScript 和 CSS 文件的同一位置。

echo $this->getContentEditableFiles('js');
echo $this->getContentEditableFiles('css');

如果您想包含捆绑的 jQuery 和 jQuery-UI，您需要添加一个布尔参数，如下所示

echo $this->getContentEditableFiles('js', true);
echo $this->getContentEditableFiles('css', true);

如果您想用较新版本的捆绑包覆盖捆绑包，您可以在 module.config.php 文件中覆盖 JavaScript 和 CSS 文件的路径

'params' => array(
    // ContentEditable related
    'js_source_path'           => '/js/ContentEditable.js',
    'css_source_path'          => '/css/ContentEditable.css',

    // jQuery related
    'jquery_js_source_path'    => '/js/jquery-1.8.0.min.js',
    'jquery-ui_js_source_path' => '/js/jquery-ui-1.8.23.custom.min.js',
    'jquery_ui_css_path'       => '/css/ui-lightness/jquery-ui-1.8.23.custom.css',
    ),

使您的网站可编辑

现在您只需将 CSS 样式类添加到所有希望成为可编辑的标签上。您还需要在 data-url 属性中包含一个路径，指定内容需要发送到的地方以便在数据库中保存。

<div class="editable" data-url="/article/update/1432">This is my content</div>

当您加载页面并在 "This is my content" 文本上悬停鼠标时，您会看到光标变为指针。现在，如果您点击此文本，它将变成一个包含原始 HTML 代码的 TEXTAREA。继续编辑内容，然后点击 TEXTAREA 外部的地方。您将需要确认数据更新。

一旦您接受所做的修改，将向指定的 data-url 发送一个带有参数 "editable_content" 的请求，当然，这个参数包含编辑数据的实际内容。

在控制器中处理可编辑数据

当 ContentEditable 将数据发送到服务器以保存时，它期望收到 JSON 响应，以通知模块数据保存成功。

您可以使用 JsonModel 启用 JSON 格式的响应。向您的控制器添加以下行

use Zend\View\Model\JsonModel;

在用于获取可编辑内容数据并发送响应的操作中，返回一个与成功、失败或处理过程相对应的JSON响应。

// Obtain edited content to be saved
$data = $this->getRequest()->getPost('editable_content');

// Do some processing of $data here...
        
// Return JSON response
$result = new JsonModel(
    array(
        'success' => true,
    )
); 

return $result;

如果响应是失败的，可编辑内容将在网页上通知您这种状态。

常见问题解答

###1. 如果我需要在URL中使用动态ID，应该如何操作？

您可以通过在应用中指定此类路由来创建动态的data-url。

'content-editable' => array(
    'type' => 'segment',
    'options' => array(
        'route' => '/article/update[/:content_id]',
        'constraints' => array(
            'contentid' => '[0-9]+',
        ),
        'defaults' => array(
            'controller' => __NAMESPACE__ . '\Controller\Article',
            'action' => 'update',
        ),
    ),
),

然后，您只需将动态URL放入标签的data-url属性中，例如

<div class="editable" data-url="/article/update/1432">This is my content</div>

您将能够获取contend_id和editable_content，以便在控制器中使用。

###2. 如果我需要更新文章的标题和内容呢？

如果您使用可编辑内容，例如在博客中，并且想通知控制器您正在尝试保存文章的哪一部分，请在data-url中添加额外的部分

<div class="editable article_title" data-url="/article/update/1432/title">This is my article title</div>
<div class="editable article_content" data-url="/article/update/1432/content">This is my article content</div>

当然，在这种情况下，您还必须在路由中添加额外的部分

'content-editable' => array(
    'type' => 'segment',
    'options' => array(
        'route' => '/article/update[/:content_id[/:type]]',
        'constraints' => array(
            'contentid' => '[0-9]+',
        ),
        'defaults' => array(
            'controller' => __NAMESPACE__ . '\Controller\Article',
            'action' => 'update',
        ),
    ),
),

###3. 为什么使用TEXTAREA而不是所见即所得编辑器？

TEXTAREA是核心HTML，提供了一种轻便、简单的方式来编辑HTML代码。可编辑内容也用于编辑基于少量文字的标签内容，因此使用所见即所得编辑器并不是最优的方法。

###4. 为什么没有提供将数据保存到数据库的内置功能？

我的计划是在未来的版本中添加这种功能。请保持关注！

有问题或评论吗？

请随时通过电子邮件与我联系，提出关于此模块的任何问题或评论。

info@arturgajewski.com

joacub / content-editable

维护者

详细信息