在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代码如下: <!-- 组件代码如下 ...
随机推荐
- App测试基本流程详解(汇总整理)
前言 看过许多大神对APP测试的理解,博主总结了一下我们平时测试APP应该注意的一些测试点并结合大神的理解,总结出这篇文章. 一.测试周期 测试周期一般为两周,根据项目情况以及版本质量可适当缩短或延长 ...
- IntelliJ IDEA 2017版 spring-boot2.0.4的集成JSP
一.必须依赖四个包,其中三个是springboot自带包,可以不写版本号,有一个不在springboot中,需要设置版本号 <!--引入Spring Boot内嵌的Tomcat对Jsp的解析包- ...
- 变动事件_DOM2级的变动事件(mutation)
DOM2级定义了如下变动事件: DOMSubtreeModified:在DOM结构中发生任何变化时触发.这个事件在其他任何事件触发后都会触发. DOMNodeInserted:在一个节点作为子节点被插 ...
- 开源C++版本CGI库CGICC入门
原发布在ChinaUnix,但未自动搬迁过来:http://blog.chinaunix.net/uid-20682147-id-4895772.html PDF版本:https://files-cd ...
- FPGA之初认识
什么是FPGA FPGA(Field-Programmable Gate Array),即现场可编程门阵列 .看到编程两个字码农就笑了,不就是编程嘛,那可是我们的强项 .且慢,此编程非彼编程 .一定要 ...
- DML DDL
DDL 1.SQL分为5大类: DDL:数据定义语言 DCL:数据控制语言 DML:数据操纵语言 DTL:数据事务语言 DQL:数据查询语言 2.DDL(data definition languag ...
- Qt 中的消息对话框
1. QMessagebox 类的几个静态成员函数,可以直接调用创建对话框 StandardButton critical(QWidget * parent, const QString & ...
- 基于MATLAB的Sobel边缘检测算法实现
图像边缘就是图像灰度值突变的地方,也就是图像在该部分的像素值变化速度非常之快,就比如在坐标轴上一条曲线有刚开始的平滑突然来个大转弯,在变化出的导数非常大. Sobel算子主要用作边缘检测,它是一离散型 ...
- 2、GCC编译器的使用
GCC编译器是一个非常强大和流行的C编译器,适用于各种Linux发行版.本文解释了一些流行的GCC编译器选项. GCC编译器选项 1.指定输出可执行文件名称 在最基本的形式中,gcc编译器可以用作: ...
- 第三天:JavaScript的DOM对象和DOM操作HTML
1. DOM操作HTML 1)注意:绝对不要在文档加载完成之后使用docment.write().这样会覆盖原来的文档 <body> <p>hello</p> &l ...