形成有TinyMCE的textarea的HTML5所需的属性不能提交

Question

这不是一个问题，但我想答案与大家分享。我刚刚花了四个多小时的撕裂我的头发上的东西果然在任TinyMCE的或Firefox的错误。

随着TinyMCE的加载，如果你在一个required指定HTML5 textarea属性窗体将只是没有在Firefox提交。没有错误，没有在Firebug的，只是一个顽固拒绝提交。

我不知道这是否是一个FF或TinyMCE的错误，并不在意。我只是不想让其他程序员要经过的加重，我通过这最后几个小时了。

要问一个问题：这个错误记录任何地方？有人知道吗？

如果这是不恰当的职位堆栈溢出，告诉我，我会删除它。

Answer 1

问题远不是一个Firefox的问题。事实上，Chrome和Opera（“老”剧前的“大脑”与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年前，但我遇到了同样的问题，所以回答你的问题：

我在这里找到了官方的bug报告：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到编辑器时，使用editor_class输出（WordPress的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