当我申请TinyMCE时，如何使textarea成为强制性文件 [英] How to make textarea filed mandatory when I've applied TinyMCE

问题描述

应用TinyMCE后，我想使textarea成为必填字段.

I want to make textarea filed mandatory when I've applied TinyMCE.

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

If I add required attribute to <textarea>, it causes that I cannot submit the form even if I fill in the form!

我该如何解决这个问题?

How can I solve this problem?

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文件中:

in cshtml file:

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

推荐答案

您必须在此处解决两个问题...

There are two issues you will have to address here...

1-< textarea>

1 - The required attribute on the <textarea>

当您调用TinyMCE时，页面上的原始< textarea> 会被隐藏，而TinyMCE会在页面上放置大量HTML.编辑矩形是< iframe> ，菜单/工具栏是HTML，包围了< iframe> .

When you invoke TinyMCE the original <textarea> you have on the page is hidden and TinyMCE places a chunk of HTML onto the page. The editing rectangle is an <iframe> and the menus/toolbars are HTML that surrounds that <iframe>.

因为原来的< textarea> 现在已隐藏，使其成为 required 是个问题，浏览器会抱怨您有一个标记为必填.

Because the original <textarea> is now hidden, making it required is an issue and the browser will complain that you have a hidden form element marked as required.

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

Bottom line for this first issue is you can't mark a hidden <textarea> as required.

2-TinyMCE和< textarea>

2 - TinyMCE and the <textarea>

TinyMCE不会始终保持底层的< textarea> 同步-在大多数情况下，这会在有人创建内容时在页面上增加不必要的开销.

TinyMCE does not keep the underlying <textarea> in sync at all times - for most use cases this would add unneeded overhead to the page while someone is creating content.

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

If you are using a standard HTML form post, when you post the form, TinyMCE will update the <textarea> before the form is posted. Unfortunately, most modern frameworks don't use a standard HTML form post but instead do something using JavaScript/AJAX. You can use the following API call to force TinyMCE to update the <textarea>:

tinymce.triggerSave();

这将强制TinyMCE在调用< textarea> 时对其进行更新.您可以:

This will force TinyMCE to update the <textarea> when it is called. You can either:

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

• 在TinyMCE初始化中执行以下操作:

• Do this in the onsubmit event of the form

• Do this in the TinyMCE init:

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

这篇关于当我申请TinyMCE时，如何使textarea成为强制性文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！