CKEditor и ASP.Net MVC 3 Обязательный атрибут

Question

Я интегрировал CKEditor 3 (ранее FCKEditor) в мое приложение asp.net MVC (v3, если быть точным). У меня есть RequiredAttribute в моей модели для поля, в котором требуется редактор, но проверка на стороне клиента не работает правильно с CKEditor. Когда я пытаюсь отправить и ввожу данные в CKEditor, необходимая проверка не видит данные. Если я попытаюсь повторить отправку снова, то это работает. Я посмотрел в Интернете и не могу найти решение. Я также использую Jquery и адаптер Jquery

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/jQuery_Adapter

Answer 1

Если кто-то ищет более общий способ сделать это, вы можете добавить этот javascript:

    $(document).ready(function () {
    if ($('.text-editor')) {
        $('.text-editor').ckeditor();
        $('input[type=submit]').bind('click', function() {
            $('.text-editor').ckeditorGet().updateElement();
        });
    }
    });

И использовать класс .text-editor css для текстовой области, и он работает просто отлично.

@Html.TextAreaFor(model => model.Description, new { @class = "text-editor" })

Я считаю это решение более простым, чем другое, надеюсь, оно поможет!

Answer 2

Еще проще, если вы не используете адаптер jQuery:

$(function () {
    $('input[type="submit"]').click(function () {
        CKEDITOR.instances.Body.updateElement();
    });
});

Где Body - это идентификатор текстовой области.

Answer 3

Для меня этот код помогает, возможно, его можно немного оптимизировать, но он работает:

$('#newsForm').submit(function (event) {
     var editor = $('#Body').ckeditorGet();
     editor.updateElement();
     $(this).validate().form();
});

Поскольку я не знаю, в каком порядке запускаются обработчики событий для отправки, я проверяю обаобновите значение и обновите результат проверки.

РЕДАКТИРОВАТЬ: Обновленное решение

<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function () {
        $('#Body').ckeditor();
        $('#newsForm').bind('submit', onFirstSubmit);
    });

    function onFirstSubmit(event) {
        var editor = $('#Body').ckeditorGet();
        editor.updateElement();
        $(this).validate().form();
        $(this).unbind('submit', onFirstSubmit).submit();
    }

    //]]>
</script>

Answer 4

Я не мог исправить это с помощью вышеуказанных решений, но это сработало для меня;

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/ckeditor/ckeditor.js")" type="text/javascript"></script>

<script type="text/javascript">

    $(function () {

        CKEDITOR.replace("activiteit_details", { toolbar: 'Basic' });
        CKEDITOR.replace("activiteit_verslag", { toolbar: 'Full' });


        // Bind CKeditor fields on submit (To avoid problems with the RequiredAttribute)
        $('input[type=submit]').bind('click', function () {

            var CKactiviteit_details = CKEDITOR.instances.activiteit_details.getData();
            $("#activiteit_details").val(CKactiviteit_details);

            var CKactiviteit_verslag = CKEDITOR.instances.activiteit_verslag.getData();
            $("#activiteit_verslag").val(CKactiviteit_verslag);
        });

    });


</script>


@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>

...

    <div class="editor-label">
        @Html.LabelFor(model => model.activiteit_details)
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.activiteit_details)
        @Html.ValidationMessageFor(model => model.activiteit_details)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.activiteit_verslag)
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.activiteit_verslag)

        @Html.ValidationMessageFor(model => model.activiteit_verslag)
    </div>

...
        <p>
            <input type="submit" value="Opslaan" />
        </p>
    </fieldset>

Answer 5

Спасибо за ответы. Благодаря этой записи я нашел собственное решение, которое идеально подходит для моего случая.

Если вы не хотите использовать событие click / mousedown, а вместо этого хотите запустить проверку правильности события отправки формы, вы можете использовать следующий подход.

Он не использует ни плагин jQuery-Adapter CKEditor, ни событие click. И это можно применить ко всем формам с помощью ckeditor.

$('form').on('submit.ckeditorValidation', function () {
    var $this = $(this);
    var $ckeditor = $this.find('textarea.ckeditor');

    // if no ckeditor for this form then do nothing
    if (!$ckeditor || !$ckeditor.length) {
        return true;
    }

    // update content from CKEditor to TextArea
    var textAreaId = $ckeditor.attr('id');
    CKEDITOR.instances[textAreaId].updateElement();

    // trigger validation and check if the form is valid
    if (!$this.valid()) {
        return false;
    }

    // if form is valid then
    // unsubscribe current event handler to avoid endless recursion
    // and re-trigger form submit
    $(this).off('submit.ckeditorValidation').submit();
    return true;
});

Answer 6

Я также пытался использовать CKEditor, но безуспешно.Вместо этого я использую CLEditor (вместе с обязательным атрибутом), и он прекрасно работает для меня.

Вы когда-нибудь думали попробовать это вместо этого?

Answer 7

У меня была такая же проблема, и я не смог ее решить из-за еще одной проблемы, связанной с ней.

Когда ckeditor заменяет текстовую область, она скрывается, и я обнаружил, чтоНастройки по умолчанию для валидатора jquery заключались в том, чтобы игнорировать скрытые элементы с помощью селектора «: hidden».

Чтобы решить эту проблему, мне нужно обновить скрытый селектор и обновить значение элемента.вот мой код, который делает это в документе готового события и теперь работает

$('#frmid').validate().settings.ignore = "input:hidden";
            $('input[type="submit"]').click(function () {
                $("#txtarea").val(CKEDITOR.instances["txtarea"].getData());
            });