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以内。

  • 相关阅读:
    298. Binary Tree Longest Consecutive Sequence
    117. Populating Next Right Pointers in Each Node II
    116. Populating Next Right Pointers in Each Node
    163. Missing Ranges
    336. Palindrome Pairs
    727. Minimum Window Subsequence
    211. Add and Search Word
    年底购物狂欢,移动支付安全不容忽视
    成为程序员前需要做的10件事
    全球首推iOS应用防破解技术!
  • 原文地址:https://www.cnblogs.com/denny402/p/3203261.html
Copyright © 2011-2022 走看看