当我应用 TinyMCE 时如何使 textarea 强制归档

Question

我想在我应用 TinyMCE 时强制使用 textarea filed。

如果我在<textarea>中添加required属性，会导致我即使填写了表单也无法提交表单！

我该如何解决这个问题？

tinymce.init({
    selector: '#summaryId',
    max_chars: 255, // max. allowed chars
    plugins: "paste",
    setup: function (ed) {
        var allowedKeys = [8, 37, 38, 39, 40, 46]; // backspace, delete and cursor keys
        ed.on('keydown', function (e) {
            if (allowedKeys.indexOf(e.keyCode) != -1) return true;
            if (tinymce_getContentLength() + 1 > this.settings.max_chars) {
                e.preventDefault();
                e.stopPropagation();
                return false;
            }
            return true;
        });
        ed.on('keyup', function (e) {
            tinymce_updateCharCounter(this, tinymce_getContentLength());
        });
    },
    init_instance_callback: function () { // initialize counter div
        $('#' + this.id).prev().append('<div class="char_count" style="text-align:left; color:grey;"></div>');
        tinymce_updateCharCounter(this, tinymce_getContentLength());
    },
    paste_preprocess: function (plugin, args) {
        var editor = tinymce.get(tinymce.activeEditor.id);
        var len = editor.contentDocument.body.innerHTML.length;
        var textLen = args.content.length;// $(args.content).text();
        if (len + textLen > editor.settings.max_chars) {
            alert('Pasting this exceeds the maximum allowed number of ' + editor.settings.max_chars + ' characters.');
            args.content = '';
        } else {
            //tinymce_updateCharCounter(editor, len + text.length);
        }
    }
});

在 cshtml 文件中：

<textarea asp-for="Article.Summary" class="form-control" id="summaryId" maxlength="255"></textarea>

Answer 1

这里有两个问题需要解决...

1 - <textarea>

上的 required 属性

当您调用 TinyMCE 时，您在页面上的原始 <textarea> 被隐藏，TinyMCE 将一块 HTML 放到页面上。编辑矩形是一个 <iframe>，menus/toolbars 是围绕 <iframe> 的 HTML。

因为原来的 <textarea> 现在被隐藏了，使它成为 required 是一个问题，浏览器会抱怨你有一个标记为 required 的隐藏表单元素。

第一期的底线是您不能将隐藏的 <textarea> 标记为 required。

2 - TinyMCE 和 <textarea>

TinyMCE 不会始终保持底层 <textarea> 同步 - 对于大多数用例，这会在有人创建内容时给页面增加不必要的开销。

如果您使用的是标准 HTML 表单 post，当您 post 表单时，TinyMCE 将在表单 [=66= 之前更新 <textarea> ]编辑。不幸的是，大多数现代框架不使用标准的 HTML 形式 post 而是使用 JavaScript/AJAX 来做一些事情。您可以使用以下 API 调用强制 TinyMCE 更新 <textarea>:

tinymce.triggerSave();

这将强制 TinyMCE 在调用时更新 <textarea>。您可以：

在表单的 onsubmit 事件中执行此操作

在 TinyMCE init 中执行此操作：

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    }
});

Answer 2

还有一个技巧 - 如果用户将其留空，则通知用户该字段是必填项。我们必须取消隐藏我们的文本区域。所以在 Fromin 代码之后我们添加：

init_instance_callback : function(editor) {
        let editorH = editor.editorContainer.offsetHeight;
        $('#formTranslation_trad')
            .css({
                'position':'absolute',
                'height':editorH
            })
            .show();
    },

所以：我们采用编辑器的高度并将其设置为我们的文本区域（可能我们必须在更改文本区域大小时做同样的事情？）。

我们必须设置绝对位置以避免设计问题，然后在编辑器后添加宽度和边距以隐藏 textearea。

当我们发送空白字段时，将出现带有警告和红色边框（或其他颜色取决于系统设置）的工具提示。

当我应用 TinyMCE 时如何使 textarea 强制归档

How to make textarea filed mandatory when I've applied TinyMCE

html

javascript

tinymce

form-submit