Question

这不是问题，而是我想与您分享的答案。我花了四个多小时把头发撕成了TinyMCE或Firefox上的一个小虫。

加载TinyMCE后，如果您在 required 上指定HTML5 textarea 属性，则该表单将无法在Firefox中提交。没有错误，Firebug中没有任何内容，只是顽固拒绝提交。

我不知道这是一个FF还是TinyMCE错误，并不在乎。我只是不希望其他程序员经历过我在过去几个小时里所经历的恶化。

提出问题：这个错误记录在哪里吗？有人知道吗？

如果这是Stack Overflow的不合适帖子，请告诉我，我会删除它。

Answer 1

问题远非成为Firefox问题。事实上，Chrome和Opera（＆＃34;＃34;以及＃34;大脑＆＃34;之前的歌剧是用Chrome浏览器移植的）以及其他所有现代浏览器都会给你带来同样的麻烦。

对于Opera和Chrome，有一个标志，坚持该字段是必需的，（尽管你有内容）。 Chrome非常适合在控制台中显示此错误消息：

An invalid form control with name='<name of textarea>' is not focusable.

如果您认为TinyMCE实际上创建了一个可编辑的div容器，隐藏原始textarea，那就不足为奇了。正是这个隐藏的textarea（带有required属性）浏览器希望您为其提供值。

在Github，在这里：https://github.com/tinymce/tinymce/issues/2584，有一个建议的解决方案，如下所示：

// fix tinymce bug
        if($this.is('[required]')){
            options.oninit = function(editor){
                $this.closest('form').bind('submit, invalid', function(){
                    editor.save();
                });
            }
        }

我还没有亲自测试过这个片段，但只要你能够将它放到正确的位置，研究它可能会让你前进。

Answer 2

我意识到这是2年前被问到的，但我遇到了同样的问题，所以回答你的问题：

我在这里找到了正式的错误报告：http://www.tinymce.com/develop/bugtracker_view.php?id=5671

Answer 3

我为此的解决方案（与WordPress TinyMCE设置有关）：

jQuery( function ( $ ) {

    $( '.smyles-add-required-attr' ).attr( 'required', 'required' );

    tinymce.on( 'AddEditor', function ( e ) {
        console.log( 'Added editor with id: ' + e.editor.id, e.editor );

        var $editor = tinymce.get( e.editor.id );

        $editor.on( "change", function (e){
            $editor.save();
        });

    });


} );

上面的jQuery添加了所需的标志（也可以通过许多其他方式完成），并确保更改后的文本区域得到更新

要处理元素“无法聚焦”的问题，只需设置不透明度和高度即可删除display: none;

此CSS假定您在使用smyles-add-required-attr（对于WordPress editor_class）输出时已将类wp_editor添加到编辑器中

textarea[style*="display: none"].smyles-add-required-attr:invalid {
    height: 0px !important;
    opacity: 0 !important;
    position: absolute !important;
    display: flex !important;
    margin-top: -75px;
}

假设它在表单中的fieldset内，这会在编辑器周围添加一个红色边框

.my-form fieldset:invalid .wp-editor-wrap {
    border: 1px solid red;
}

一个潜在的问题是，在页面加载时，fieldset周围显示红色边框，您可以使用fieldset:invalid:focus-within，但要注意，浏览器支持有限https://caniuse.com/#feat=css-focus-within

具有html5必需属性的tinyMCE textarea的表单无法提交

3 个答案: