CKEditor MVC 3 实现答案

【问题标题】：CKEditor MVC 3 implementationCKEditor MVC 3 实现
【发布时间】：2011-06-13 16:17:33
【问题描述】：

学习 mvc，我正在尝试实现一个包含 3 个字段的页面 Name-Surname-Description 所以在我的学习示例中，我正在加载员工，我应该能够创建和编辑他们。

描述应使用 CKEditor 。

我可以加载员工
我可以救他们

但是我似乎无法保存描述，例如用户在描述字段中键入的任何内容。我在网上看到的例子很少，但没有一个可以下载的解决方案，因为我似乎无法放在一起。我发现这个人有一个很酷的 html 助手，但似乎无法将一个例子放在一起 http://www.andrewbarber.com/post/CKEditor-Html-Helpers-ASPNET-MVC-Razor-Views.aspx

问题是：

如何获取在 ckEditor 中输入的值。
在我的 viewModel 中，描述始终为 null
ckEditor 大大减慢了页面的创建速度。我怎样才能使它更快？我不需要所有选项。
有没有使用 mvc3 的示例可以用作模板。

我已完成以下所有管道：

创建.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>

员工控制器

         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 助手编辑的示例

    @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>

【问题讨论】：

您没有使用该博客文章中发布的解决方案；你根本没有在任何地方打电话给帮助者。

标签： asp.net asp.net-mvc ckeditor

【解决方案1】：

您实际上并没有像那个博客页面（这是我自己的博客）上描述的那样使用 CKEditor 助手

该帮助程序的目的是，一旦您将代码正确地包含到您的项目中，您就可以简单地这样做：

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

但是，您似乎只是在创建一个普通的旧文本区域并在此之后“手动”使用它。没有任何东西可以将它绑定到您的属性，如果您使用了该帖子中描述的帮助器，就会存在。

另请注意，您没有使用在幕后更新文本区域的代码；因此，如果您的模型在Description 字段上设置了Required，那么当您第一次提交正确配置的CKEditorFor() 时，您将收到客户端验证错误，这不是我的助手所独有的；任何“必需”的绑定属性也需要该博客文章中提到的一点 Javascript。我将其作为提交按钮之外的onclick 执行，但您可以在任何地方运行相同的代码。您只需将它包含在您尚未完成的页面中即可。

【讨论】：

嗨，谢谢你的回复。我没有使用上面的代码，因为我不明白你如何保存 ckeditor 的内容，它看起来不错。我现在要试试。你有可以下载的解决方案吗？
你不需要做任何特别的事情来“保存”内容；它就像任何其他绑定属性一样工作。
是@HtmlCKEditorFor 完成所有工作并将其保存到描述字段吗？
它和其他助手一样，比如Html.TextareaFor() 或Html.EditorFor()。它只是使用 CKEditor 实例来完成。
请务必按照使用助手的步骤进行操作；那里有三个助手；一个用于“管道”，一个用于 CKEditor 本身，一个用于在客户端调用“更新”。做到这三个，它会自动绑定。

【解决方案2】：

您可能想尝试将文本区域的名称属性设置为“描述”

所以：

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

如果这不起作用，那么您可能必须使用 javascript 来获取编辑器中内容的值并将其设置在帖子之前的隐藏字段中。

【讨论】：