11

这不是一个问题，而是一个我想与你分享的答案。我刚刚花了四个多小时在一些东西上撕扯头发，结果证明这是 TinyMCE 或 Firefox 中的一个错误。

加载 TinyMCE 后，如果您在表单上指定 HTML5required属性，textarea则不会在 Firefox 中提交。没有错误，Firebug 中什么也没有，只是顽固地拒绝提交。

我不知道这是 FF 还是 TinyMCE 错误，我并不在意。我只是不希望其他编码人员经历我过去几个小时所经历的恶化。

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

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

4

3 回答 3

4

这个问题远非 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();
                });
            }
        }

我没有亲自测试过这个片段，但研究它可能会让你继续前进，只要你能够把它放到正确的地方。

于 2016-07-26T19:22:09.063 回答
0

我的解决方案（与 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 添加了 required 标志（也可以通过许多其他方式完成），并确保文本区域在更改后更新

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

此 CSS 假定您在使用(for WordPress )输出时已将类添加smyles-add-required-attr到编辑器editor_classwp_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

于 2019-02-06T15:54:36.587 回答
0

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

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

于 2015-09-02T13:22:08.523 回答