MVC中使用CKEditor01-基础

谁借莪１个温暖的怀抱￠ 2022-03-29 07:28 277阅读 0赞

本篇体验在MVC中使用CKEditor，仅仅算思路、基础，暂没有把验证等与CKEditor结合在一起考虑。

□ 1 使用NUGET引入CKEditor  
PM> Install-Package CKEditor

引入后在Scripts中有了CKEditor的相关文件：  
[![03][]][03 1]

□ 2 View Model

using System.ComponentModel.DataAnnotations;

namespace MvcCKEditor.Models

{

public class Article

{

public int ID { get; set; }

[Required]

[Display(Name = "主题")]

public string Subject { get; set; }

[Required]

[Display(Name = "内容")]

public string Content { get; set; }

}

}

□ 3 不管在哪里引用，必须引用以下有关CKEditor的js文件  
<script src="@Url.Content("~/Scripts/ckeditor/ckeditor.js")" type="text/javascript"></script>

□ 4 HomeController

有关显示添加视图和接收添加内容：  
接收添加内容时，是通过把Dictionary<string,string>，把所有错误以键值对的形式放到这个字典集合里，再使用Newtonsoft.Json把这个集合转换成json字符串，最后让前台jquery判断。但在实际做项目中，可能用ModelState在后台验证，并把需要验证的部分放在部分视图里，可能更方便一些，暂不深究。

就像在ASP.NET WebForm开发的时，如果页面没有设置ValidateInput=false，就会出现警告。在MVC中如果不设置，也会报如下错：  
[![01][]][01 1]

设置允许CKEditor有2种方式：  
1、在控制器方法

[ValidateInput(false)]

public ActionResult Create(string subject, string content)

2、Scripts/ckeditor/config.js中做全局设置

CKEDITOR.editorConfig = function( config )

{

// Define changes to default configuration here. For example:

// config.language = 'fr';

// config.uiColor = '#AADC6E';

//也可以在这里做全局设置

//config.htmlEncodeOutput = true;

};

控制器与方法：

展开using System.Web.Mvc;
    using MvcCKEditor.Models;
    using Newtonsoft.Json;
    
    namespace MvcCKEditor.Controllers
    {
        public class HomeController : Controller
        {
            private List<Article> articles = null;
    
            public HomeController()
            {
                articles = new List<Article>
                {
                    new Article(){ID =1,Subject = "主题1",Content = "内容1"},
                    new Article(){ID = 2,Subject = "主题2",Content = "内容2"}
                };
            }
    
            public ActionResult Index()
            {
                
                return View(articles);
            }
    
            public ActionResult Create()
            {
                return View();
            }
    
            [HttpPost]
            //[ValidateAntiForgeryToken]
            [ValidateInput(false)]
            public ActionResult Create(string subject, string content)
            {
                Dictionary<string,string> jo = new Dictionary<string, string>();
                if (string.IsNullOrEmpty(subject))
                {
                    jo.Add("Msg","没有输入标题 ");
                    return Content(JsonConvert.SerializeObject(jo), "application/json");
                }
                if (string.IsNullOrEmpty(content))
                {
                    jo.Add("Msg", "没有输入内容 ");
                    return Content(JsonConvert.SerializeObject(jo), "application/json");
                }
                try
                {
                    Article article = new Article();
                    article.Subject = subject;
                    article.Content = content;
                    articles.Add(article);
                    jo.Add("Result","Success");
                }
                catch (Exception ex)
                {
                    jo.Add("Result","Failure");
                    jo.Add("ResultMessage", ex.Message);
                }
                return Content(JsonConvert.SerializeObject(jo), "application/json");
            }
        }
    }

□ 5 Create.cshtml视图

获取CKEditor内容：

不能用var content = $('\#content').val();获取CKEditor的内容。  
因为TextArea的内容已经被CKEdtor替换掉了：var editor = CKEDITOR.editor.replace('content', \{ skin: 'kama', width: '800px' \});  
应该使用如下方式来获取CKEditor的内容：var content = editor.getData();

展开@model MvcCKEditor.Models.Article
    
    @{
        ViewBag.Title = "Create";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    <h2>Create</h2>
    
    @using (Html.BeginForm("Create","Home",FormMethod.Post,new {id = "FormCreate"}))
    {
        @Html.ValidationSummary(true)
        @Html.AntiForgeryToken()
    
        <fieldset>
            <legend>Article</legend>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.Subject)
            </div>
            <div class="editor-field">
                @Html.TextBox("subject",null,new {id="subject",style="width:400px",MaxLength="100"})
                @Html.ValidationMessageFor(model => model.Subject)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.Content)
            </div>
            <div class="editor-field">
                @Html.TextArea("content",new {id="content", @name="content"})
                @Html.ValidationMessageFor(model => model.Content)
            </div>
    
            <p>
                <input type="button" value="创建" id="ButtonCreate" />
                @*<input type="submit" value="创建"/>*@
            </p>
        </fieldset>
    }
    
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>
    
    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
        <script type="text/javascript">
            
            var editor = CKEDITOR.editor.replace('content', {
                skin: 'kama',
                width: '800px'
            });
    
    
            $(function () {
            
                $('#ButtonCreate').click(function () {
                    createArticle();
                });
            });
    
            function createArticle() {
                var subject = $.trim($('#subject').val());
                var content = editor.getData();
    
                if (subject.length == 0) {
                    alert('请输入标题');
                    return false;
                }
                if (content.length == 0) {
                    alert('请输入内容');
                    return false;
                }
    
                $.ajax({
                    url: '@Url.Action("Create", "Home")',
                    type: 'post',
                    data: { subject: subject, content: content },
                    cache: false,
                    async: false,
                    dataType: 'json',
                    success: function(data) {
                        if (data.Msg) {
                            alert(data.Msg);
                            return false;
                        } else {
                            if (data.Result == 'Success') {
                                alert('Success');
                                location.href = '@Url.Action("Index", "Home")';
                            } else {
                                alert(data.ResultMessage);
                                return false;
                            }                           
                        }
                    }
                });
            }
        </script>
    }

结果：  
[![02][]][02 1]

参考资料：  
※ [ASP.NET MVC 3 使用CKEditor][ASP.NET MVC 3 _CKEditor]

[03]: /images/20220329/57c65bcf967a48449bf7c4b936b5dfa3.png
[03 1]: https://images0.cnblogs.com/blog/417212/201403/160306341053212.png
[01]: /images/20220329/da7e916ab6b746bda8516b351366a6e3.png
[01 1]: https://images0.cnblogs.com/blog/417212/201403/160306345901897.png
[02]: /images/20220329/3968dd520fac4c23b9d652a40ce4bb92.png
[02 1]: https://images0.cnblogs.com/blog/417212/201403/160306350433527.png
[ASP.NET MVC 3 _CKEditor]: http://kevintsengtw.blogspot.com/2011/12/aspnet-mvc-3-ckeditor.html#.UyR8jvmSy-8

发表评论取消回复

表情：

评论列表（有 0 条评论，277人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack基础使用-01

webpack基础使用-01 想要了解更全面可以去官网https://www.webpackjs.com/concepts/对应api来了解 1. 初始化项目首

秒速五厘米/ 2023年07月20日 13:46/ 0 赞/ 89 阅读

相关 MVC学习01

Web Application Architecture ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

太过爱你忘了你带给我的痛/ 2023年07月13日 12:22/ 0 赞/ 80 阅读

相关使用ckeditor中存在的问题

先配置 1.引入js <script src="../ckeditor/ckeditor.js"></script> 2.定义textarea <d

系统管理员/ 2023年07月13日 04:09/ 0 赞/ 105 阅读

相关 Spring MVC - 01 - Spring MVC 简介

Spring MVC - 01 - Spring MVC 简介本系列比较可能比较啰嗦，但是相对来说，面试的时候也必要了解很多，仅仅开发一下小项目是远不够的，要熟悉其相对

偏执的太偏执、/ 2022年04月10日 06:43/ 0 赞/ 354 阅读

相关 vue中使用ckeditor

使用lodop实现打印功能，首先使用ckeditor在线编辑word生成html ，lodop得到html进行打印 [https://www.cnblogs.com/ldlx

Bertha 。/ 2022年04月08日 15:56/ 0 赞/ 347 阅读

相关 Vue在diolog中使用ckeditor

大多数能够找到的都是在mounted页面加载后让富文本替换文本框 <textarea id="editor" rows="10" cols="80"></textar

￡神魔★判官ぃ/ 2022年04月03日 10:00/ 0 赞/ 365 阅读

相关 MVC中使用CKEditor01-基础

本篇体验在MVC中使用CKEditor，仅仅算思路、基础，暂没有把验证等与CKEditor结合在一起考虑。 □ 1 使用NUGET引入CKEditor PM> In

谁借莪１个温暖的怀抱￠/ 2022年03月29日 07:28/ 0 赞/ 278 阅读

相关 CKEditor使用方法以及在CKEditor中使用Markdown编辑器

缘起日前本人在搭建私人博客的时候一直觉得csdn自带的markdown编辑器挺好用的，经过多方查找找到一个与这个差不多的，就是今天的主角CKEditor。什么是C

深碍√TFBOYSˉ_/ 2022年03月11日 12:00/ 0 赞/ 666 阅读

相关 MVC中使用CKEditor01-基础

本篇体验在MVC中使用CKEditor，仅仅算思路、基础，暂没有把验证等与CKEditor结合在一起考虑。 □ 1 使用NUGET引入CKEditor PM> Insta

朱雀/ 2021年11月02日 12:38/ 0 赞/ 344 阅读

相关 CKEditor

开场白：最近用到了ckeditor网上看了好多大同小异，但是版本都比较老旧了，也许使用过程中有瑕疵，本人自己总结了下，已经经过实测，方便大家参考，也可以提宝贵意见，互相

- 日理万妓/ 2021年09月11日 06:40/ 0 赞/ 403 阅读