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

Question

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

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

Validating TinyMCE using Parsley

并注意到它链接到的 fiddle 不起作用（不再？）如果您在未填写任何字段的情况下点击提交然后返回并完成字段并提交，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 字段后）无济于事。

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

Answer 1

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

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

这似乎解决了我的问题。谢谢 F运行k!

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

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

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

How do I get Parsley JS validation to work on Tiny MCE rich text area? Specifically, how do notifiy Parsley.js of changes to the Tiny MCE?

validation

jquery

parsley.js

tinymce-4