时间戳

首页 > 解决方案 > 如何让 Parsley JS 验证在 Tiny MCE 富文本区域上工作？具体来说，如何通知 Parsley.js 对 Tiny MCE 的更改？

jquery - 如何让 Parsley JS 验证在 Tiny MCE 富文本区域上工作？具体来说，如何通知 Parsley.js 对 Tiny MCE 的更改？

问题描述

我在表单上同时使用 TinyMCE（4.9.10 版）和 Parsley JS（2.9.1 版），并且我正在尝试在提交表单之前验证 TinyMCE 字段。由于 TinyMCE 基于 HTML textarea 字段构建其实例，并且我将我的 Parsley 属性（例如 data-parsley-required）添加到 textarea 字段中，因此 Parsley JS 似乎无法“看到”页面加载后 TinyMCE 发生的更新并且 TinyMCE 已初始化.

我还要指出，我发现了这个相关的 Stackoverflow 问题/答案

使用 Parsley 验证 TinyMCE

并注意到它链接的小提琴不起作用（不再起作用？）如果您在未完成任何字段的情况下点击提交，然后返回并完成字段并提交，TinyMCE 元素的错误不会被清除。

我还应该提到，这个特定的表单上有几个 TinyMCE 富文本元素的实例。（是的，它们都有不同的 id 并且有自己特定的 TinyMCE 初始化调用。）如果有不同的话。

以下是代码的精简版：

HTML

<form id="email_form" action="<portlet:actionURL/>" method="post" name="<portlet:namespace/>_itsformportlet" data-parsley-validate="">
<table class="vipTable table-responsive">
    <tr>
        <th class="strong">Email Body</th>
    </tr>
    <tr>
        <td>
            <p>Please upload the message that you would like to appear in the body of the email</p>
            <p>Include Message Text:</p>
            <textarea id="emailBody" name="emailBody" data-parsley-required data-parsley-maxlength="[300]" data-parsley-maxlength-message="Please enter 300 characters max."></textarea>
        </td>
     </tr>
</table>
<input type="submit" name="Submit" value="Submit">
</form>

JS

 // TinyMCE Start - emailBody
         tinymce.init({
                selector: '#emailBody',
                height: 250,
                menubar: false,
                elementpath: false,
                browser_spellcheck: true,
                plugins: [
                    'advlist autolink autosave code lists link charmap print preview',
                    'searchreplace visualblocks fullscreen',
                    'table paste textcolor wordcount'
                ],
                autosave_retention: "30m",
                autosave_ask_before_unload: false,
                autosave_interval: "15s",
                autosave_restore_when_empty: true,
                toolbar1: "restoredraft | undo redo | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code",
                setup: function(editor) {
                    editor.on('init', function() {
                        //Do what you need to do once TinyMCE is initialized
                        if (sessionStorage['emailBodySave']) {
                           //console.log("tinyText session variable is: " + sessionStorage.getItem("tinyText"));
                           tinymce.get('emailBody').setContent(sessionStorage.getItem("emailBodySave"));
                        }

                    });

                }
            });

$("#email_form").parsley();

我也使用了 $("#email_form").parsley().refresh() （在将输入输入到 TinyMCE 字段后）无济于事。

对可能的修复有任何想法吗？请告诉我。谢谢你。

标签： jqueryvalidationtinymce-4parsley.js

解决方案

我的团队负责人提出了这个问题，他提出了这个解决方案：

$("#email_form").parsley()
    .on('form:validate', function() {
        tinymce.triggerSave();
    });

它似乎解决了我的问题。谢谢弗兰克！

因此，澄清一下，当 Parsley 验证在表单上运行时（单击提交时），我们希望确保 TinyMCE 保存已放入这些 TinyMCE 字段的值/文本。这反过来将清除验证错误并允许提交表单。

支持文档： https ://www.tiny.cloud/docs-4x/api/tinymce/root_tinymce/#triggersave

推荐阅读