当我应用 TinyMCE 时，如何使 textarea 强制提交

Question

我想在应用 TinyMCE 时强制提交文本区域。

如果我给 加上required属性<textarea>，会导致即使填了也无法提交！

我怎么解决这个问题？

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 -required上的属性<textarea>

当您调用 TinyMCE 时，页面上的原始内容<textarea>将被隐藏，TinyMCE 会将一块 HTML 放置到页面上。编辑矩形是<iframe>，菜单/工具栏是围绕该 的 HTML <iframe>。

因为原始元素<textarea>现在已隐藏，所以它required是一个问题，浏览器会抱怨您有一个标记为 的隐藏表单元素required。

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

2 - TinyMCE 和<textarea>

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

如果您使用标准 HTML 表单发布，则当您发布表单时，TinyMCE 将在<textarea>发布表单之前更新 。不幸的是，大多数现代框架不使用标准 HTML 表单发布，而是使用 JavaScript/AJAX 执行某些操作。您可以使用以下 API 调用来强制 TinyMCE 更新<textarea>：

tinymce.triggerSave();

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

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

• 在 TinyMCE init 中执行此操作：

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