网站搜索

javascript - TinyMCE 必须阻止表单提交


我在使用 TinyMCE 时遇到了问题。在我的基于 CakePHP v3 的应用程序中,我有一个用于添加忠诚度任务的表单。表单中有一个使用 TinyMCE 来描述任务的字段。

所以问题是,当我填写表格并点击提交按钮时,没有任何反应。更重要的是,还有用于编辑任务的表格也完全正常(完全相同)。问题表格没有添加任何自定义的 JavaScript。

我知道在 textarea 上使用 required 的 TinyMCE 会导致问题,因为当我禁用 required 时,它可以正常工作。

一些代码:
TinyMCE 初始化:

tinymce.init({
    selector: 'textarea.tinymce',
    height: 500,
    plugins: [
        "advlist autolink link image lists charmap preview hr anchor image",
        "wordcount visualblocks visualchars fullscreen insertdatetime nonbreaking",
        "table paste"
    ],
    toolbar1: "undo redo cut copy paste | bold italic underline strikethrough subscript superscript | alignleft aligncenter alignright alignjustify | table",
    toolbar2: "formatselect | outdent indent | bullist numlist | blockquote link unlink charmap hr image | preview",
    menubar: false,
    content_css: [
        '//www.tinymce.com/css/codepen.min.css'
    ]
});

表格(删除了几个元素):

<?= $this->Form->create(null, ['enctype'=>'multipart/form-data']); ?>
<div class="col-xs-12">
    <div class="form-group">
        <label>Tytuł</label>
        <input type="text" name="title" class="form-control" required="required"/>
    </div>
</div>
//additional elements
<div class="col-xs-12">
    <div class="form-group">
        <label>Treść zadania</label>
        <textarea name="task" class="form-control tinymce" required="required"></textarea>
    </div>
    <input type="submit" class="" value="Dodaj"/>
</div>
<?= $this->Form->end(); ?>

使用的 TinyMCE 版本:4.6.4(最新)

答案#1

感谢你的快速回复,但我已经在 TinyMCE 支持论坛上自己找到了答案。

对于其他将遇到此问题的人:只需在你的 tinyMCE 初始化中添加以下代码。

setup: function (editor) {
    editor.on('change', function (e) {
        editor.save();
    });
}

答案#2

您的编辑表单可能与添加表单相同,但在编辑的情况下,必填字段中会有一些数据,因此 required 选项不会引起任何问题。在添加表单中情况相反——字段是空的,验证会失败。为了解决这个问题,您可以从 tinymce 输入中移除 required="required",并进行额外的验证——可以在客户端使用 JS,或者在服务器端的 CakePHP 表类中进行。