所西威

所见即所得字段将 WordPress 的富文本编辑器放入您使用主插件构建的自定义小部件中 小部件生成器。编辑器获得粗体,斜体,链接,列表和添加媒体按钮,他们在写帖子时使用的工具栏相同。您的小部件接收格式化的HTML并用一个令牌打印它。这是任何文本区域的字段,其中一个普通的文本区域会将格式化压平。

WYSIWYG是免费版的小部件生成器中可以使用的字段之一,免费插件包含有限的小部件生成器,全套字段自带 硕士插件专业版.

所见即所得字段的作用 #

• Elementor中将富文本编辑器添加到小部件的面板中,带有可视化和代码选项卡以及添加媒体按钮。
• 将编辑器编写的内容保存为 HTML。
• 通过诸如此类的令牌打印它 {{ member_bio }},过滤了wordpress过滤发布内容的方式。
• 保留格式:段落、粗体、斜体、链接、列表和标题均呈现。
• 取默认值,其中可以包括标记,因此新建小部件会显示一个工作示例。

建筑商的新手?阅读 小部件生成器概述 首先,然后打开小部件返回。

在开始之前 #

• WordPress 已安装并处于活动状态。
• 已安装并激活的 Elementor 主插件。 安装指南 盖设置。
• Widget Builder 中打开的一个小部件,本指南中的示例是一个 “团队成员” 小部件:名称和角色的文本字段,以及一个名为所见即所得字段 member_bio 为传记。

如何添加所见即所得字段 #

1. 去 主插件 > 小部件生成器 并打开您的小部件。
2. 添加有关的部分 内容 tab,例如“。
3. 类型 wysi 在左侧的字段搜索框中。
4. 拖动 所西威 into the section。点击字段上的铅笔, 打开它的设置。

所见即所得字段选项解释 #

• 标签: elementor中编辑器上方的文本,例如“bio”。该字段开始标记为“内容”。
• 名称: field的唯一id及其令牌的名称。仅使用字母、数字和下划线,例如 member_bio.
• 描述: elementor中小编下面显示的提示。用它来设置期望,比如“两三句话。加粗,链接和列表都可以”
• 默认值: 的起始内容。这是一个纯文本框,所以自己键入 HTML,例如带有 a 的段落 strong 标签和链接。

标签块 默认打开这里,这就是你想要的:编辑器需要面板的整个宽度。离开 选择器 空,因为文本块不是 CSS 值。

其余的公共设置在其他字段上的行为,包括 条件 如果该区域仅应在设置另一个字段时出现。

在我们的测试中,构建器内部的字段卡在其小预览编辑器中显示为原始 HTML 的默认值。这只是构建器自己的预览。 Elementor 呈现与格式化文本相同的默认值。

在模板中打印内容 #

One token 放置整个区域。将其包裹在一个可以风格化的容器中, 并保护它, 这样一个空的字段就不会留下杂散的包装:

<article class="tm">
  <p class="tm-name">{{ member_name }}</p>
  <p class="tm-role">{{ member_role }}</p>
  {% if member_bio %}
  <div class="tm-bio">{{ member_bio }}</div>
  {% endif %}
</article>

CSS面板中通过瞄准编辑器写入的标签来样式该区域:

.tm-bio p { margin: 0 0 .75em; line-height: 1.6; }
.tm-bio p:last-child { margin-bottom: 0; }
.tm-bio a { color: #4338ca; }
.tm-bio ul { margin: 0 0 .75em 1.1em; }

不要添加 raw 到所见即所得的令牌。普通令牌已经渲染格式,并且 raw 仅拆下安全过滤器。

过滤器保留和丢弃的内容 #

WordPress对帖子内容的相同过滤器中,该值经过。在我们的测试中,标题,段落, strong, em的、列表、链接甚至内联 style 属性不变地传来。安 iframe 被删除,并且脚本标签被删除而无需运行。

将小部件交给客户端之前要了解的一个细节:当通过代码选项卡粘贴脚本标签时,标签被剥离,但其中的 JavaScript 保留在页面上作为纯文本,因此在 bio 中间显示了一行代码。没有什么警告您。如果页面上出现杂散字符,请告诉编辑器粘贴文本,而不是嵌入,并检查代码选项卡。

Elementor 中使用所见即所得控件 #

将小部件添加到页面,或者如果页面已经打开,则重新加载编辑器。该字段显示标签下的完整编辑器:添加媒体、视觉和代码选项卡、段落格式下拉、粗体、斜体、下划线、列表、链接按钮和全屏。

编辑在帖子中按照自己的方式编写。焦点一离开编辑器,预览就会更新。 代码 tab 显示底层 HTML,这对于清理粘贴格式很方便。

这是前端的成品卡片,粗体短语、链接和列表均来自字段:

常见用例 #

• 团队成员传记和作者专栏。
• 需要列表或粗体短语的功能或服务描述。
• 带有引文和归属的见证机构。
• 卡片、盒子或面板小部件中的任何长格式文本区域。

与所见即所得领域合作的技巧 #

• 给它一个带有真实标记的默认值。 然后编辑器会看到该区域期望的内容类型,您就知道格式渲染。
• 在说明中设置长度。 “两三句”以后节省了很多布局修复。
• 样式标签,而不是文本。 的规则 p, a 並 ul 无论编辑写什么,在包装课程中都保持区域一致。
• 守卫令牌 {% if %} 所以空字段不会在页面上留下空包装纸。
• 只有纯文本? 的 文本区域字段 是更轻的,对于粘贴的标记或嵌入的片段,使用 代码字段.

常见问题 #

包裹起来 #

将所见即所得字段放入内容部分,为其提供清晰的标签、有用的描述和带有真实标记的默认值,然后在 a 内打印令牌 {% if %} CSS面板的标签进行保护和样式化,编辑器获取他们已经知道的工具栏,您的小部件获取干净格式的HTML。对于纯文本使用 文本区域字段,对于粘贴的片段 代码字段,并检查 定价 对于每个计划包含的内容。