前端编辑

发布日期： 2022-04-26

当网站所有者注意到网站上某些内容需要修改时，Couch 的现有工作流程（与大多数其他 CMS 一样）要求她离开当前正在查看的页面，进入管理面板。进入管理面板后，她需要找到相关页面，找到相关的可编辑区域，进行所需的更改，最后保存页面，以便更改显示在前端。

除了需要修改的地方和需要修改的地方之间明显的脱节之外，这种方法还有一个问题——通常情况下，管理面板中编辑的文本的显示方式与前端完全不同（字体、颜色等很少匹配）。这就需要在管理面板和前端之间来回切换，以确保修改后的文本能够按预期显示。

除了上述专用管理面板模式之外，还有一种替代方案，用户只需点击需要更改的位置（或附近的链接），即可在页面上编辑内容并保存。这就是“页面内”编辑。这其实算不上什么新概念，而且鉴于目前讨论的诸多明显优势，你可能会问，为什么大多数 CMS（包括 Couch）不使用它呢？

原因在于，实现页面编辑功能会带来一些非常棘手的技术问题，这些问题几乎总是会抵消预期的优势。这个问题之前在我们的论坛上讨论过，其他论坛也讨论过。

总体而言，挑战有两方面：

  1. 页面编辑自然只适用于“文本”字段。非文本可编辑区域（例如图像、可重复区域等）或通常不会在前端输出的区域（例如文件夹、页面名称等）需要相当多的向后弯曲——这就引出了第二点。
  2. 无论采用何种方法实现页面编辑，都必须尽可能地不引人注目。由于该解决方案需要适用于任何可能的前端设计，因此它不能假设存在任何特定的 JS 库。它也不能肆意地将自己的库注入前端，因为这可能会破坏网站的设计。

Couch 对这个问题的看法：‘内联’插件

作为对这两个看似互相排斥的需求的可能解决方案，请允许我介绍 Couch 的“内联”插件。

该插件认识到在页面编辑中需要以两种不同的方式处理可编辑区域，因此提供了两种不同的方式 -

  • 内联编辑：经典的“就地”编辑。只需点击内容本身即可立即编辑。但是，它仅适用于文本内容（具体来说，包括“text”、“textarea”、“richtext”和“nicedit”类型的可编辑区域）。
  • 弹出编辑：对于非文本区域或隐藏文本区域，此插件会输出一个可放置在内容附近的链接。点击该链接会弹出一个仅包含相关区域可供编辑的弹出窗口。此方法适用于所有可编辑区域，甚至包括文本区域（如果您愿意）。

让我们深入了解一下这两种页面编辑功能的工作原理。但在此之前，我们需要先启用该插件。这需要按照常规步骤，在“ couch/addons/kfunctions.php ”文件中创建一个条目。

如果“addons”文件夹中没有“ kfunctions.php ”，请将“ kfunctions.example.php ”文件重命名为“ kfunctions.php ”。

在文本编辑器中打开kfunctions.php并添加以下行

require_once( K_COUCH_DIR.'addons/inline/inline.php' );

启用插件后，我们现在可以使用它提供的标签在任何模板上实现页面编辑。

 

这里我想强调的一点是，实现页面编辑功能不需要对您通常使用 Couch 构建网站的方式进行任何更改。也就是说，您可以像平常一样创建模板、定义可编辑区域等。网站准备就绪后，我们就可以把页面编辑组件添加到正常运行的网站上。

以我们正在处理的部分为例，如果您查看附加的源文件，您会发现它需要定义 4 个可编辑区域 - intro_image（类型图像）、intro_title（类型 nicedit）、intro_text（类型 richtext）和intro_button（类型文本）。

添加了 Couch 可编辑区域的修改后的 HTML 标记现在如下所示 -

到目前为止，我们的操作与任何普通的 Couch 托管模板完全一样。事实上，如果没有需要添加页面编辑功能，那么这部分的工作就完成了，无需再做任何事了。然而，要实现页面编辑功能，我们需要先从完成的 Couch 模板开始。那就开始吧。

向模板添加页面编辑功能分为两个步骤 -

1.第一步始终是在模板的 HEAD 部分添加以下标签

<cms:load_edit />

此步骤负责加载我们将在下面的第二步中添加的标签所需的所有 JS/CSS 库。

2.第二步才是最有趣的。在这里，我们将添加一些标签，用于将页面编辑功能“注入”到现有的可编辑区域。

再次查看我们正在处理的部分中现有的四个可编辑区域 -

如果您还记得我们之前的讨论，页面编辑可以采用两种形式 - a.文本元素的内联编辑 b.非文本（或隐藏文本）元素的弹出编辑

从上图可以看出，红色高亮区域是文本。绿色区域中的图像当然是非文本的。按钮文本虽然看起来像文本，但实际上是链接元素，因此必须被视为非文本。

好的，让我们先处理非文本元素。

以下是目前图像的标记方式

<div class="4u"> <span class="me image image-full"><img src="<cms:show intro_image />" alt="" /></span> </div>

我们将在其附近添加一个popup_edit标签，指定通过弹出窗口处理的可编辑区域的名称（在本例中为图像区域）

<div class="4u">
    <span class="me image image-full"><img src="<cms:show intro_image />" alt="" /></span>
    <cms:popup_edit 'intro_image' />
</div>

保存模板并以管理员身份访问它将显示以下更改

请注意我们放置popup_edit标签的“编辑”链接。

您可以使用popup_edit标签的“ link_text ”参数将链接显示的文本从默认的“编辑”更改为您选择的任何内容。您还可以随意设置此链接的样式——它是一个常规锚元素，其类设置为“k_inline”。您可以使用“ class ”参数添加您自己的类。例如，这可以用来显示铅笔图标而不是文本。

您会发现，显示的可编辑区域与后端管理面板中显示的相同。您可以像在管理面板中一样选择新图像——点击“浏览服务器”按钮将打开图像浏览器及其所有相关工具。

第二个非文本区域，即按钮文本，可以以相同的方式处理。

现有标记

<a href="#work" class="button button-big"><cms:show intro_button /></a>

可以附加popup_edit标签

<a href="#work" class="button button-big"><cms:show intro_button /></a>
<cms:popup_edit 'intro_button' link_text='Edit button' />

在上述两种情况下，我们都只指定了一个可编辑区域作为popup_edit标签的参数。如果用例需要，我们也可以指定多个可编辑区域，只需用“|”（竖线）字符分隔名称即可。例如，以下定义 -

<cms:popup_edit 'intro_image|intro_title|intro_text' />

将在弹出窗口中显示所有三个指定的区域

如果你没注意到，弹出窗口在显示文本区域时没有任何问题。事实上，它可以处理所有类型的 Couch 可编辑区域——只是文本类型可以使用内联（而不是弹出）编辑以更优雅的方式处理。我们接下来会看到这一点。

内联编辑：

内联编辑的标签是inline_edit。让我们看看它是如何工作的。

<header>
    <h1 <cms:inline_edit 'intro_title' /> ><cms:show intro_title /></h1>
</header>

也可以是：

<div <cms:inline_edit 'intro_title' /> ><cms:show intro_title /></div>

inline_edit标签放在块级元素内，如果没有，就加一个div

默认会有黄色边框，如果要清理掉，加一个参数

<cms:load_edit no_border='1' />

 

 

Couchcms文档