所西威

的 所见即所得领域 tinymce 编辑器,同样的富文本编辑器 WordPress 多年来出货, 掉入自定义小部件的面板中, 编辑器获得粗体、斜体、列表、链接、标题, 以及他们已经知道的可视化/文本选项卡开关, 您的小部件收到格式化的 HTML, 准备打印在主插件内 小部件生成器,这是内容区域的字段,其中有一个平原 文本区域 会将文本中的格式化变平。

所见即所得字段支持 条件 与所有其他控件一样,其内容也通过渲染 Twig-语法模板引擎。所见即所得值会自动保持其安全的 HTML,因此您很少需要 |raw filter。两个指南都解释了细节和限制。

连接是一个令牌。打印 {{ your_field_name }} 在 HTML 面板和存储的标记渲染中,经过过滤 wp_kses_post样,所以格式化在不安全的标签被剥离的情况下得以保留。没有额外的过滤器,没有逃脱的体操。

所见即所得字段的作用 #

• 在小部件的 Elementor 面板中渲染 TinyMCE 富文本编辑器,并带有 Visual 和 Text 选项卡。
• HTML 字符串的方式存储编辑器的输出。
• 通过 HTML 打印 {{ your_field_name }}的,穿过 wp_kses_post 论输出。
• 保持格式完整:段落、粗体、斜体、列表、链接和标题均呈现。
• 支持动态值,因此内容可以来自设置提供的动态标签。

第一个小部件? 小部件生成器概述 涵盖本页面构建的编辑器基础知识。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• Widget Builder 编辑器中打开的自定义小部件,我们的示例是一个团队成员卡小部件,其所见即所得字段名为 member_bio 保存每个人的格式传记。

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

拖动 所西威 从字段面板到下面的部分 内容 tab,长篇内容的天然家园,一旦落地,它的选项就会在左侧打开。

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

Option 列表保持很小, 因为编辑器本身带有复杂性:

• 标签: elementor 中编辑器上方的文本,例如 “Member Bio”。
• 名称: your模板所指的唯一标识符。字母、数字、下划线仅,例如 member_bio.
• 默认: starting的内容,而且它可以包括markup。一个简短格式化的段落向编辑显示该区域是做什么的,并证明格式化工作。
• 动态: 该字段接受动态值,因此内容可以连接到动态标签,而不是手动输入。

用其令牌连接所见即所得字段 #

WYSIWYG字段是一个令牌字段, HTML面板中有一个令牌放置了整个内容区域:

<article class="tm-card">
  <h3 class="tm-name">{{ member_name }}</h3>
  <div class="tm-bio">
    {{ member_bio }}
  </div>
</article>

在输出时,值会通过 wp_kses_post中, 过滤器WordPress适用于帖子内容TinyMCE产生的标签,段落,强和em,列表,链接,标题,图像,都在允许的列表中,所以什么编辑器格式是什么渲染了任何不安全的东西,通过文本选项卡潜入,就像一个 <script>,被剥离。

小心: 不添加 |raw to a WYSIWYG 令牌出于习惯。普通令牌已经渲染格式,因为 wp_kses_post 允许标记 TinyMCE 写入; |raw zhi要在不改变正常生物长什么样的情况下去掉安全滤镜,如果输出看起来是逃逸的,而不是渲染的,原因在别处,而不是缺少滤镜。

CSS 面板中的区域样式, 将令牌用类包裹在容器中, 如示例中所示:

.tm-bio p { margin: 0 0 0.75em; }
.tm-bio a { color: inherit; text-decoration: underline; }

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

Elementor 中将自定义小部件添加到页面,或者如果页面已经打开,则重新加载编辑器。该字段在面板中呈现为完整的 TinyMCE 编辑器:顶部的工具栏,角落中的可视化和文本选项卡,设置允许的地方添加媒体。

Editors 完全按照他们在帖子中的方式编写和格式:选择文本,加粗,添加链接,启动列表,预览更新按他们键入的方式,显示由小部件的 CSS 样式化的内容。

Bio渲染奇怪时,在责怪小部件之前先检查文本选项卡,从Word或Google Docs粘贴的内容经常带有杂散跨度和内联样式,它们都在那里可见,清理文本选项卡中的标记通常会当场修复布局。

常见用例 #

• 生物和简介 在团队、作者和演讲者小部件中。
• 长描述 在服务、产品和功能卡中,标题或列表属于文本。
• 证词机构 这需要强调并保留换行符。
• 脚注和免责声明 具有政策内联链接。
• 任何客户端编辑的文本区域 格式化很重要,客户端永远不应该看到 HTML。

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

• 打印普通令牌。 {{ member_bio }} 按原样呈现格式; |raw 在这里添加风险而不添加功能。
• 通过包装工课程进行风格。 目标 .tm-bio p, .tm-bio ulCSS面板中的朋友,而不是希望编辑器输出预先设计好。
• 设置格式化的默认值。 具有粗体名称和一个链接的简历兼作该字段支持的实时示例。
• 每个内容区域一个所见即所得。 将介绍和细则打印分开字段,而不是要求编辑在一个编辑器内管理这两个字段。
• 尽可能选择较轻的场地。 单行未格式化行属于文本字段;当段落、列表或链接真正成为内容的一部分时,可以访问所见即所得。
• 输出上期望 kses。 后内容允许列表之外的自定义标签将无法保存,根据设计。可粘贴的原始片段是 代码字段'的工作。

常见问题 #

包裹起来 #

Widget Builder 所见即所得字段为编辑者提供了他们已经知道的写作体验,并给了你一个单一的经过清理的令牌,可以放置在标记中内容人以视觉方式格式化bios和描述;widget安全地渲染它们,并通过自己的CSS对可粘贴的原始片段使用 代码字段对于重复格式化的块,将所见即所得与 中继器场。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。