README

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

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

您需要自行实现数据处理。

需求

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

注意：jQuery和jQuery-UI与此模块捆绑在一起，并且可以直接使用。您可以通过最小的努力用自己的版本覆盖捆绑版本。

关注我的Twitter：@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使用它自己的JS和CSS文件在视图脚本中生成动态编辑功能。

为了使ContentEditable正常工作，您需要在包含所有JS和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;

在用于获取ContentEditable数据并返回响应的操作中，返回对应成功、失败或过程的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;

如果响应是失败的，ContentEditable将在网页上通知您这种状态。

常见问题解答

###1. 如果我在data-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. 如果我需要更新文章的标题和内容怎么办？

如果您在博客中使用ContentEditable，并希望通知控制器您正在尝试保存文章的哪个部分，请向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而不是WYSIWYG编辑器？

TEXTAREA是核心HTML，提供了轻便、简单的编辑HTML代码的方式。ContentEditable也用于编辑基于少数单词的标签内容，因此使用WYSIWYG编辑器不是最佳的方法。

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

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

有问题或评论吗？

请随时通过电子邮件向我提出有关此模块的任何问题或评论

info@arturgajewski.com

artur-gajewski / content-editable

维护者

详细信息