现在比较常用的富文本编辑挺多的,如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 = "width:750px;height:400px" })

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

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

在MVC3中使用富文本编辑器:KindEditor的配置及上传图片的更多相关文章

  1. flask项目中使用富文本编辑器

    flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...

  2. Django中使用富文本编辑器Uedit

    Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...

  3. Django后台管理admin或者adminx中使用富文本编辑器

    在admin或者adminx后台中使用富文本编辑器 一.建立模型:(安装django-tinymce==2.6.0) from django.db import models from tinymce ...

  4. django-应用中和amdin使用富文本编辑器kindeditor

    文章描述.新闻详情和产品介绍等,都需要大量的文字描述信息或图片.视频.文字的编辑等,这个时候我们就需要介绍第三方富文本编辑器. 今天介绍的是django中绑定和应用kindeditor编辑器: 效果如 ...

  5. Django实现的博客系统中使用富文本编辑器ckeditor

    操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...

  6. 使用富文本编辑器Kindeditor

    今天在做需求的时候,遇到有一个字段,需要保存带有格式的内容,决定使用富文本框编辑器Kindeditor来实现,解决方法如下: 登录官网下载控件包: http://kindeditor.net/down ...

  7. ASP.NET MVC 5 中 使用富文本编辑器 Ueditor

    一.Ueditor插件下载自:http://ueditor.baidu.com/website/ 二.将解压文件目录ueditor复制到项目根目录后, 修改以下几个文件配置: 1.访问路径配置:ued ...

  8. Django使用富文本编辑器

    1.下载kindeditor 网址:http://kindeditor.net/demo.php2.解压到项目中 地址:\static\js\kindeditor-4.1.103.删除没用的文件 例如 ...

  9. vue+element-ui 使用富文本编辑器

    npm安装编辑器组件npm install vue-quill-editor –save 在components文件夹创建ue.vue组件,如下 ue.vue代码如下: <!-- 组件代码如下 ...

随机推荐

  1. maven打包到私服,打的是war包,好郁闷

    jenkins打完包上传到私服以后,发现只有war包,然而并木有别人想要的jar包,郁闷之极啊! 然后把公司的项目做了对比,发现这个正常的能上传jar包的项目的与我的另一个项目有点出入: 正常:  异 ...

  2. maven的传递性依赖

    一.概念: 假如有maven项目A,项目A依赖项目B,项目B依赖项目C,我们说A对B是第一直接依赖,B对C是第二直接依赖,那么他们的依赖关系:A---->B----->C,那么我们执行项目 ...

  3. 第16章:MongoDB-聚合操作--聚合管道--$project

    ①$project $project作用:修改文档的结构,可以用来重命名.增加或删除文档中的字段. 执行的规则如下: |- 普通列({成员 : 1 | true}):表示要显示的内容: |- “_id ...

  4. 1、JavaScript 基础一 (从零学习JavaScript)

    1:定义:javascript是一种弱类型.动态类型.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类 ...

  5. 文档/视图(01):第一个Demo

    学习文档视图编程的第一个demo,程序比较简单,主要对文档模板,文档,视图等相互关系的一个了解. 功能:菜单添加一个[操作]项,然后新建四份空白文档,点击[操作]之后,在四份空白文档上面各绘制一个Bu ...

  6. (转)自己来控制EntityFramework4.1 Code-First,逐步消除EF之怪异现象

    转自:http://www.cnblogs.com/richwong/archive/2011/07/06/2098759.html 最近的项目开始使用EF4.1,拜读各路大侠文章数遍,满以为可以轻车 ...

  7. Android开发——利用Cursor+CursorAdapter实现界面实时更新

    好久没有更新博客了.不是没时间写,而是太懒.而且感觉有些东西没有时间总结,之之后再想写,就想不起来了.晚上新发现一点东西,所以就及时写下来. 最近利用业余时间在看Android的Download模块, ...

  8. marven与Eclipse集成配置

    maven作为一个项目构建工具,在开发的过程中很受欢迎,可以帮助管理项目中的bao依赖问题,另外它的很多功能都极大的减少了开发的难度,下面来介绍maven的安装及与eclipse的集成. maven的 ...

  9. nodes 验证码

    一个常见的需求. 知乎上得讨论:http://www.zhihu.com/question/32156977 node-canvas 在mac上安装有问题,可能是我没有sudo 使用了ccap:挺不错 ...

  10. unigui在阿里云服务器上部署

    unigui在阿里云服务器上部署 客户租用了阿里云WINDOWS2008服务器,部署UNIGUI发现死活不行,WINDOWS2008自带的IE9浏览器打开URL,卡死在loading...... 我远 ...