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

Posted 2023-05-09

【中文标题】如何让 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?

【发布时间】：2020-09-27 20:59:33

【问题描述】：

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

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

Validating TinyMCE using Parsley

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

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

【参考方案1】：

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

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

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

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

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

【讨论】：

对于任何面临这个问题的人。这项工作很好，但不要忘记从表单元素中删除 data-parsley-validate，这样您就不会在表单上两次实例化 parsley