Реализация CKEditor MVC 3

Question

Изучение mvc, и я пытаюсь реализовать страницу с 3 полями Имя-Фамилия-Описание Итак, в моем примере обучения я загружаю сотрудников, и я должен иметь возможность создавать и редактировать их.

Описание должноиспользуйте CKEditor.

• Я могу загрузить сотрудников
• Я могу сохранить их

Однако я не могу сохранить описание, например, независимо от того, что пользователь вводитв поле описания.Я видел несколько примеров в сети, но ни одного из них не было решения для загрузки, так как я не могу собрать их вместе.Я нашел этого парня с отличным помощником по html, но я не могу составить пример http://www.andrewbarber.com/post/CKEditor-Html-Helpers-ASPNET-MVC-Razor-Views.aspx

Проблемы:

1. Как вы получаетезначение, которое вводится внутри ckEditor.
2. В моем viewModel описание все время равно нулю
3. ckEditor довольно сильно замедляет создание страницы. Как я могусделать это быстрее?Мне не нужны все параметры.
4. Есть ли пример использования mvc3, который я могу использовать в качестве шаблона.

Я выполнил все работы по сантехнике следующим образом:

Create.chtml

            @model MvcApplicationCKEditorIntegration.Models.EmployeeViewModel
        @{
            ViewBag.Title = "Create";
        }
        <h2>
            Create</h2>
        <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>
        @using (Html.BeginForm())
        {
            @Html.ValidationSummary(true)
            <fieldset>
                <legend>EmployeeViewModel</legend>
                <div class="editor-label">
                    @Html.LabelFor(model => model.FirstName)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.FirstName)
                    @Html.ValidationMessageFor(model => model.FirstName)
                </div>
                <div class="editor-label">
                    @Html.LabelFor(model => model.LastName)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.LastName)
                    @Html.ValidationMessageFor(model => model.LastName)
                </div>
                <div class="editor-label">
                    @Html.LabelFor(model => model.Email)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Email)
                    @Html.ValidationMessageFor(model => model.Email)
                </div>
                <div class="editor-label">
                    @Html.LabelFor(model => model.PhotoPath)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.PhotoPath)
                    @Html.ValidationMessageFor(model => model.PhotoPath)
                </div>
                <div class="editor-label">
                    @Html.LabelFor(model => model.Description)
                </div>
                <div class="editor-field">            
                    <textarea class="ckeditor" id="ckeditor" rows="10"></textarea>            
                </div>
                <p>
                    <input type="submit" value="Create" />
                </p>
            </fieldset>
        }
        <div>
            @Html.ActionLink("Back to List", "Index")
        </div>
         <script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>

EmployeeController

         public class EmployeeController : Controller
            {
                public ActionResult Index()
                {
                    var employeeRepository=new EmployeeRepository();
                    var employees = employeeRepository.GetAll();
                    var employeeList = employees.Select(employee => new EmployeeViewModel
                                                                        {
                                                                            EmployeeId = employee.EmployeeId,
                                                                            FirstName = employee.FirstName,
                                                                            LastName = employee.LastName,
                                                                            PhotoPath = employee.PhotoPath,
                                                                            Email = employee.Email,
                                                                            Description = employee.Description
                                                                        }).ToList();

                    return View(employeeList);
                }

                public ActionResult Create()
                {

                    return View(new EmployeeViewModel());
                } 

                [HttpPost]
                public ActionResult Create(EmployeeViewModel vm)
                {
                   if(ModelState.IsValid)
                   {
                       var employeeRepository=new EmployeeRepository();
                       var emp=new Employee
                                        {
                                            FirstName = vm.FirstName,
                                            LastName = vm.LastName,
                                            Description = vm.Description,
                                            Email = vm.Email,
                                            PhotoPath = vm.PhotoPath
                                        };
                       employeeRepository.Insert(emp);
                       return RedirectToAction("Index");

                   }
                    return View(vm);
                }




            }
        }

Спасибо за любые предложения !!!

РЕДАКТИРОВАННЫЙ ПРИМЕР С ИСПОЛЬЗОВАНИЕМ CKEditor helper

    @using MvcApplicationCKEditorIntegration.Helpers
    @model MvcApplicationCKEditorIntegration.Models.EmployeeViewModel
    @{
        ViewBag.Title = "Create";
    }
    <h2>
        Create</h2>
    <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>
    @Html.CKEditorHeaderScripts()
    @using (Html.BeginForm())
    {
        @Html.ValidationSummary(true)
        <fieldset>
            <legend>EmployeeViewModel</legend>
            <div class="editor-label">
                @Html.LabelFor(model => model.FirstName)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.FirstName)
                @Html.ValidationMessageFor(model => model.FirstName)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.LastName)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.LastName)
                @Html.ValidationMessageFor(model => model.LastName)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Email)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Email)
                @Html.ValidationMessageFor(model => model.Email)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.PhotoPath)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.PhotoPath)
                @Html.ValidationMessageFor(model => model.PhotoPath)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Description)
            </div>
                @Html.CKEditorFor(model=>model.Description)
            <p>
              <input type="submit" value="Create" onclick="@Html.CKEditorSubmitButtonUpdateFunction()" />
            </p>
        </fieldset>
    }
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>
     <script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>

Answer 1

На самом деле вы вообще не используете помощника CKEditor, как описано на этой странице блога (это мой собственный блог)

Цель этого помощника состоит в том, чтобы, как только вы правильно включили код в свойпроект, вы можете просто сделать это:

@Html.CKEditorFor(model=>model.Description)

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

Также обратите внимание, что вы не используете код, который обновляет текстовую область за кулисами;поэтому, если для вашей модели установлено значение Required в поле Description, вы получите ошибку проверки на стороне клиента при первой отправке правильно настроенного CKEditorFor(). Это не уникально для моего помощника;Любое связанное свойство, которое является «обязательным», нуждается в кусочке Javascript, который также упоминается в этом посте.Я делаю это как onclick с кнопки отправки, но этот код можно запустить где угодно.Вам просто нужно включить его в страницу, чего вы еще не сделали.

Answer 2

Возможно, вы захотите установить для атрибута имени текстовой области значение «Описание»

так:

<div class="editor-field">            
    <textarea class="ckeditor" id="ckeditor" rows="10" name="Description"></textarea>
</div>

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