zoukankan      html  css  js  c++  java
  • 在MVC3中使用富文本编辑器:KindEditor的配置及上传图片

    现在比较常用的富文本编辑挺多的,如ueditor、fckeditor、kingeditor等,本文主要介绍一下KindEditor的配置与使用。

    先去官网http://www.kindsoft.net/下载此编辑器的最新版本,比如现在的4.1.7版本,下载回来后,可以进行精简,将一些用不到的文件或文件夹删除。

    一、将解压出来的整个KindEditor4.1.7文件夹复制到项目的Content文件夹下,并重命名为kindeditor。

    可以将asp、jsp、php、examples这四个文件夹直接删除,没有用处,只留下asp.net、attached、lang、plungins、themes这五个文件夹和其它的JS文件就行了。

    注意:图片上传成功后,是放在attached这个文件夹中的。

    二、将asp.net文件夹下,bin文件夹中的LitJSON.dll这个文件,复制到整个项目的bin文件夹中。

    三、在需要放置编辑器的视图,引入如下的文件以及配置

       <script type="text/javascript" src="@Url.Content("~/Content/kindeditor/kindeditor-min.js")"></script>
        <script type="text/javascript" src="@Url.Content("~/Content/kindeditor/lang/zh_CN.js")"></script>
        <script type="text/javascript">
                var editor;
                KindEditor.ready(function (K) {
                    editor = K.create('textarea[name="content"]', {
                        resizeType: 1,
                        allowFileManager : true,
                        uploadJson: '@Url.Content("~/Content/kindeditor/asp.net/upload_json.ashx")',
                        fileManagerJson:'@Url.Content("~/Content/kindeditor/asp.net/file_manager_json.ashx")'
                   
                    });
                });
        </script>

    注意uploadJson: '@Url.Content("~/Content/kindeditor/asp.net/upload_json.ashx")',这一行是用来实现图片上传的。name="content",这里的content就是你用来存放文章正文的表格字段名称。

    在需要放置编辑器的地方,加上代码

    @Html.TextAreaFor(m => m.content, new { style = "750px;height:400px" })

    content替换成您自己的表格字段名,宽度和高度可变。

    至此,编辑器配置完成,也可以上传图片哦。但是图片的大小只能在1M以内。

  • 相关阅读:
    httpclient之基本类
    安卓开发遇到的各种问题
    C#获取字符串宽度像素
    Android开发参考资料
    Windows Phone开发参考资料
    Windows Phone锁屏背景相关代码
    Windows Phone Launcher class
    Windows Phone SplashScreen初始屏幕示例
    ASP如何实现注册后发送激活邮件?
    SkyDrive开发申请ClientID
  • 原文地址:https://www.cnblogs.com/denny402/p/3203261.html
Copyright © 2011-2022 走看看