README

通过这个扩展，您可以直接在后台编辑您的网站。

Angular/JavaScript 源代码库

https://github.com/xprojects-de/alpdesk-frontendediting-client

Wiki

https://github.com/xprojects-de/alpdesk-frontendediting/wiki

概念

该扩展是一个正常的后台模块，因此直接在后台范围内运行。基于 Angular（编译后为原生 JavaScript）将编辑符号直接以视觉形式显示在视图中。由于同源策略，借助 JavaScript 可以使后台和前端协同工作。然后，后台使用 Contao 强大的后台编辑功能，只需简单地在一个叠加对话框中显示相应的 URL。因此，完整的后台编辑功能仍然可用，只是稍微以视觉形式呈现。

调用前端预览时，元素不可用，这也是预期的 :-)

使用方法

该扩展作为正常的后台模块集成到 Contao 后台，并且可以按用户激活或禁用。此外，还会考虑 Contao 的完整权限管理。例如，只能编辑与后台用户权限相对应的内容元素。此外，还可以在用户设置中选中要显示给用户的元素。因此，例如，也可以隐藏具有权限的内容元素。

可以编辑什么

• 所有内容元素
• 新闻模块（新闻列表和新闻阅读器）
• 活动模块（活动列表和活动阅读器）
• RocksolidSlider
• 表单
• ... 更多将根据需要添加 :-) 但您也可以自己动手...（见技术部分）

将后台模块映射到内容元素和前端模块

前端编辑的挑战不是支持内容元素和前端模块本身，而是将它们映射到可以编辑内容的相应后台模块。该扩展将不断更新，并支持 Contao 的标准模块（事件、表单等）。但是，也有可能将自定义扩展通过 Symfony 事件处理带到前端进行编辑。（更多技术信息）

其他

• 该扩展有意不使用 JavaScript 库，并使用原生 JavaScript。虽然一切都是基于 Angular 编程的，但编译后确实是原生 JavaScript。因此，应该没有在前端的问题。
• 测试使用 Firefox、Chrome 和 Safari 的最新版本以及 Contao::LTS 和 Contao::Latest 进行

该扩展应该完全功能正常，除了我找不到的错误 :-) 但它仍然很“新鲜”，我非常欢迎任何有助于扩展的反馈。

技术

• 该扩展提供了三个事件（alpdeskfrontendediting.element、alpdeskfrontendediting.module 和 alpdeskfrontendediting.form），您可以通过事件监听器进行注册。
• 事件在每次渲染前端模块和内容元素时触发，并提供每个模型和特定的前端编辑对象（挂钩 getContentElement 和 getFrontendModule）。通过这种方式，可以调整现有的前端栏项目，甚至添加新的、自定义的前端栏项目，并为其提供与后台模块相应的逻辑。

添加自定义内容元素图标的示例

# service.yml oder listener.yml

services:

  projects.listener.alpdeskfrontendediting.element:
    class: XProjects\Projects\Events\ProjectsAlpdeskFrontendViewListener
    tags:
      - { name: kernel.event_listener, event: alpdeskfrontendediting.element}

// Passende Eventklasse dazu
// Modul funktioniert analog

declare(strict_types=1);

namespace XProjects\Projects\Events;

use Alpdesk\AlpdeskFrontendediting\Events\AlpdeskFrontendeditingEventElement;
use Contao\Input;
use Contao\Database;

class ProjectsAlpdeskFrontendViewListener {

  private static $icon = '../../../system/themes/flexible/icons/tablewizard.svg';
  private static $iconclass = 'tl_projects_baritem';

  public function __invoke(AlpdeskFrontendeditingEventElement $event): void {

    if ($event->getElement()->type === 'xprojects_overview') {
      $event->getItem()->setValid(true);
      $event->getItem()->setIcon(self::$icon);
      $event->getItem()->setIconclass(self::$iconclass);
      $event->getItem()->setPath('do=xprojects');
      $event->getItem()->setLabel($GLOBALS['TL_LANG']['projects_label']);
    } else if ($event->getElement()->type === 'xprojects_detail') {
      $alias = Input::get('projekte');
      if ($alias !== null && $alias !== '') {
        // Better use Model but Extention does not have a model
        $projectObj = Database::getInstance()->prepare("SELECT id FROM tl_xprojects WHERE alias=?")->execute($alias);
        if ($projectObj->numRows > 0) {
          $event->getItem()->setValid(true);
          $event->getItem()->setIcon(self::$icon);
          $event->getItem()->setIconclass(self::$iconclass);
          $event->getItem()->setPath('do=xprojects&table=tl_content&id=' . $projectObj->id);
          $event->getItem()->setLabel($GLOBALS['TL_LANG']['projects_label']);
        }
      }
    }
  }

}

• 如果没有后端用户登录，则整个“额外”的代码将不会执行，钩子也会立即返回。因此，在正常操作中不存在性能问题。

还需要做什么？

• 优化模块（例如，使新闻列表的预告片也可以单独编辑）
• 支持更多模块
• 修复错误
• ...

对于这个扩展，我承担任何责任！

图片