Как сделать текстовые поля обязательными, когда я подал заявку на TinyMCE - PullRequest
Новая
       20

Как сделать текстовые поля обязательными, когда я подал заявку на TinyMCE

0 голосов
/ 24 марта 2020

Я хочу сделать обязательным заполнение поля textarea при применении 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);
        }
    }
});

в файле cs html: 

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

1 Ответ

1 голос
/ 24 марта 2020

Здесь необходимо решить две проблемы ...

1 - атрибут required в <textarea>

при вызове TinyMCE исходный <textarea>, который у вас есть на странице, скрыт, и TinyMCE помещает на страницу кусок HTML. Прямоугольник редактирования - <iframe>, а меню / панели инструментов - HTML, которые окружают это <iframe>.

Поскольку исходный <textarea> теперь скрыт, создание его required является проблемой, и браузер будет жаловаться, что у вас есть скрытый элемент формы, помеченный как required.

Итогом этой первой проблемы является то, что вы не можете пометить скрытый <textarea> как required.

2 - TinyMCE и <textarea>

TinyMCE не всегда поддерживает базовый <textarea> в syn c - для большинства случаев использования это добавило бы ненужные накладные расходы на страницу, когда кто-то создает контент.

Если вы используете стандартную HTML форму для публикации, при публикации формы TinyMCE обновит <textarea> до публикации формы. К сожалению, большинство современных фреймворков не используют стандартную HTML форму сообщения, а вместо этого делают что-то, используя JavaScript / AJAX. Вы можете использовать следующий вызов API, чтобы заставить TinyMCE обновить <textarea>:

tinymce.triggerSave();

Это заставит TinyMCE обновить <textarea> при его вызове. Вы можете:

  • Сделать это в событии onsubmit в форме

  • Сделать это в init TinyMCE: 

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