在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 = "width:750px;height:400px" })
content替换成您自己的表格字段名,宽度和高度可变。
至此,编辑器配置完成,也可以上传图片哦。但是图片的大小只能在1M以内。
在MVC3中使用富文本编辑器:KindEditor的配置及上传图片的更多相关文章
- flask项目中使用富文本编辑器
flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...
- Django中使用富文本编辑器Uedit
Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...
- Django后台管理admin或者adminx中使用富文本编辑器
在admin或者adminx后台中使用富文本编辑器 一.建立模型:(安装django-tinymce==2.6.0) from django.db import models from tinymce ...
- django-应用中和amdin使用富文本编辑器kindeditor
文章描述.新闻详情和产品介绍等,都需要大量的文字描述信息或图片.视频.文字的编辑等,这个时候我们就需要介绍第三方富文本编辑器. 今天介绍的是django中绑定和应用kindeditor编辑器: 效果如 ...
- Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...
- 使用富文本编辑器Kindeditor
今天在做需求的时候,遇到有一个字段,需要保存带有格式的内容,决定使用富文本框编辑器Kindeditor来实现,解决方法如下: 登录官网下载控件包: http://kindeditor.net/down ...
- ASP.NET MVC 5 中 使用富文本编辑器 Ueditor
一.Ueditor插件下载自:http://ueditor.baidu.com/website/ 二.将解压文件目录ueditor复制到项目根目录后, 修改以下几个文件配置: 1.访问路径配置:ued ...
- Django使用富文本编辑器
1.下载kindeditor 网址:http://kindeditor.net/demo.php2.解压到项目中 地址:\static\js\kindeditor-4.1.103.删除没用的文件 例如 ...
- vue+element-ui 使用富文本编辑器
npm安装编辑器组件npm install vue-quill-editor –save 在components文件夹创建ue.vue组件,如下 ue.vue代码如下: <!-- 组件代码如下 ...
随机推荐
- lambda表达式(c++11)
1.概念 1)lambda表达式是一个可调用的代码单元,它由一个捕获列表.一个参数列表.一个箭头.一个返回类型.一个函数体组成: 2)可以忽略参数列表和返回类型,但必须包含捕获列表和函数体: 3)忽略 ...
- yml的mybatis的sql查看;Mybatis+Springboot 控制台查看日志,Mybatis结合springboot打印日志
1.配置如图 文件为yml mybatis: mapper-locations: classpath:com/springboot/transaction/mapper/*.xml configura ...
- 微信 公众号平台 与 开放平台 获取用户信息 scope snsapi_login
微信公众号(公众平台) 和 微信开放平台 是两码事.公众号(公众平台)获取的scope只包括两种:snsapi_base 和snsapi_userinfo,前者是静默获取,用户无感知:后者是需要用户确 ...
- php7注意事项
1. 不要使用 mysql_ 函数 这一天终于来了,从此你不仅仅“不应该”使用mysql_函数.PHP 7 已经把它们从核心中全部移除了,也就是说你需要迁移到好得多的mysqli_函数,或者更灵活的 ...
- 乌龙之Ignoring query to other database问题
问题现象: [root@zxdb05 ~]# mysql -root -pEnter password: Welcome to the MySQL monitor. Commands end wit ...
- 反射List<M> To DataTable|反射IList To DataTable|反射 DataTable To List<M>
将DataTable集合反射获取 List<M> /// <summary> /// 根据DataTable集合反射获取 List<M> /// </summ ...
- issubclass ,isinstance,反射
issubclass() 函数 issubclass() 方法用于判断参数 class 是否是类型参数 classinfo 的子类. 语法 以下是 issubclass() 方法的语法: issubc ...
- TinyMCE Editor
TinyMCE Editor(https://www.tinymce.com/features/) is an online text editor, it is used to write post ...
- JVM、JRE,JDK
JVM解释class Java虚拟机,解释编译后的class文件给系统..java代码编译成 .class机器指令,就能在JVM运行了,直接到硬件执行,实现了跨平台,只要操作系统安装了JVM, ...
- BUG 图片元素img下 高度超出 出现多余空白
BUG 图片元素img下 高度超出 出现多余空白 1.将图片转换为块级对象 即,设置img为“display:block;”. 2.设置图片的垂直对齐方式 即设置图片的vertical-align ...