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

Question

我正在使用TinyMCE（4.9.10版本）和Parsley JS（2.9.1版本）在一个表单上，我试图在表单提交前验证TinyMCE字段。 由于TinyMCE是基于HTML的textarea字段建立它的实例，而我在textarea字段中添加了我的Parsley属性，如data-parsley-requirements，所以在页面加载和TinyMCE初始化后，Parsley JS似乎不能 "看到 "发生在TinyMCE上的更新。

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

使用Parsley验证TinyMCE。

并注意到它所链接的fiddle不工作了(不再是了？)如果你在没有完成任何字段的情况下点击提交，然后返回并完成字段并提交，TinyMCE元素的错误就会出现。不 得到清除。

我还应该提到的是，这个特殊的表单上有几个TinyMCE富文本元素的实例，（是的，它们都有不同的ID，并且有自己特定的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();
    });

它似乎解决了我的问题。 谢谢 Frank!

所以要澄清的是，当Parsley验证在表单上运行时（当点击提交时），我们要确保TinyMCE保存已经放置到这些TinyMCE字段中的值文本。 这反过来会清除验证错误，并允许表单提交。

支持文档。https:/www.tiny.clouddocs-4xapitinymceroot_tinymce#triggersave