README

模板内容编辑器（TCE）

Magento 2扩展

由Day4Code创建，Day4的分支机构

它是做什么的？

允许开发者在纯HTML中创建可编辑的模板，然后允许客户通过动态表单简单更新模板内的内容。内置3个部分，针对不同用户

代码编辑器 允许开发者在需要时编辑代码，但会从客户端隐藏，以免误编辑。

表单编辑器 允许编辑器通过编辑给定的字段来编辑开发者创建的模板内容

内容预览 允许任何人查看内容的粗略最终结果，包括图像、链接等。注意：预览没有应用任何样式。

在哪里可以使用它？

目前TCE附加到以下页面上的以下 textarea

#category_form_description 在编辑分类时。

#product_form_description 在编辑产品时。

#product_form_short_description 在编辑产品时。

#cms_block_form_content 在编辑CMS块时。

#cms_page_form_content 在编辑CMS页面时。

它是如何工作的？

TCE将所有转换为DOM树的 textarea 中的 根元素 查找一遍，寻找包含 x-template 类的元素。然后处理该元素及其子元素以创建可编辑的表单。例如

代码

<div class="x-template">
    <h1>You can edit me</h1>
</div>
<div class="container">
    <h1>You can't edit me</h1>
</div>

结果

默认情况下，TCE将自动为以下DOM元素创建可编辑字段

h1,h2,h3,h4,h5,h6 和 p 简单的文本输入框。

a 2 个输入框用于编辑链接的 href 和文本，除非链接元素内还有更多的DOM元素。

img 3 个输入框用于编辑 src、alt、title。

还有其他什么功能？

TCE使用类名和 x-* 属性的混合来构建更可定制的表单

类名X

富文本编辑器

<div class="x-content"></div> 创建一个富文本编辑器，可用于文本内容。此块允许基本列表、链接和样式化文本。

排列元素

<div class="x-arrange">...</div> 允许编辑器重新排列指定DOM元素中的所有子元素。

属性X

有用的标题

格式：x-name="{元素名称}"

<a href="/article1" x-name="文章链接">阅读文章1<a> 在输入元素上方创建一个标题，以帮助结构化并使用户知道这是为什么。

切换类

格式：x-class="{属性名}[-{索引}]: {要切换的类}; ..."

简单切换

x-class="hide_article: hidden; feature_article: is-featured;" 将为每个找到的属性创建复选框（例如，“隐藏文章”，“特色文章”），允许编辑器切换类（“hidden”，“is-featured”）开启或关闭。

高级切换

x-class="color_scheme-1: blue-freedom; color_scheme-2: yellow-sun;" 将创建一组单选按钮，允许编辑器只能选择一个可用的类作为活动类。例如

代码

<div class="x-template blue-freedom" x-class="color_scheme-1: blue-freedom; color_scheme-2: yellow-sun;">
    <div class="article" x-class="hide_article: hidden; feature_article: is-featured;">
        <h3>Article Title</h3>
    </div>
</div>

结果

重复

x-repeat="1:5" 允许编辑器动态地复制给定元素及其所有子元素和内容。属性值格式如下： {index}:{max-n}，其中 max-n 是元素可能被复制的最大次数，index 表示每个复制元素的 1 基数索引。例如：

代码

<div class="x-template articles">
    <a href="/article1" class="article" x-repeat="1:10">
        <h3>Article Title 1</h3>
        <img src="https://picsum.photos/601" alt="Random Image 1" />
    </a>
    <a href="/article2" class="article" x-repeat="2:10">
        <h3>Article Title 2</h3>
        <img src="https://picsum.photos/602" alt="Random Image 2" />
    </a>
</div>

结果

编辑任何属性属性（>2.2.6）

x-attr="{attribute-name}:{value type (text|image)} 允许编辑器更新指定元素的属性值。例如：

代码

<div class="x-template">
    <button x-attr="title:text; onclick:text" title="You can change me" onclick="alert('you can even change this');"><p>I need to be in a p element to be editable</p></button>
</div>

结果

编辑样式属性（>2.2.8）

x-style="{style-name}:{value type (text|image)} 允许编辑器更改指定元素的给定样式属性值。例如：

代码

<div class="x-template">
    <div x-style="background-image:image; color:text;" style="color:#ffff00;background-repeat:no-repeat;background-size:cover;background-image:url(https://picsum.photos/343);">
        <h3>Coffee</h3>
        <div class="x-content"><p>Have a cup a day</p></div>
    </div>
</div>

结果

动态插槽（>2.4）

x-slot="{slot_id}: {Slot Label}" 添加一个切换按钮，用于在指定的 HTML 中注入组件。

注意：不要在空槽内添加任何其他 HTML，因为一旦切换，它将被覆盖。

当前可用的插槽：

tce_gallery - 使用 chocalat js 作为相册的画廊，图像也可以分配链接 tce_banner - 使用 slick js 的响应式横幅 tce_slider - 使用 slick 和相册的图像滑动器

代码

<div class="x-template">
    <div x-slot="x_banner: Hero Banner"></div>
    <div x-slot="x_gallery: Gallery"></div>
</div>

TCE 完全可扩展，这意味着新功能正在不断添加，只需添加适当的属性/类即可使用。

更新

2.4.2 临界修复。修复了 Magento 2 中的插槽错误。

2.4.1 添加了移动预览，并将预览移动到 iframe 中。

2.4.0 添加了对加载插槽和默认模板的支持，以预先填充空的 tce。

2.3.6 临界修复。修复了行内 HTML 实体被转换为乱码 HTML。

2.3.5 临界更新。修复了空 HTML 实体被转换为乱码 HTML。

2.3.0 主要更新。允许编辑多个文本区域。样式更新。

其他

如果您从 ace 库的文件中遇到 404 问题，请将以下内容添加到 {magento_site}/pub/static/.htaccess

<IfModule mod_rewrite.c>
    RewriteRule ^(.+)\/ace\/(.+)(?<!\.min)\.(js|css)$ $1/ace/$2.min.$3 [L]
</IfModule>

我能帮忙吗？

当然可以！发现了错误或想扩展 TCE，请创建 pull request，我会把您的名字添加到贡献者名单中。