ASP.NET MVC5+EF6+EasyUI 后台管理系统(36)-文章发布系统③-kindeditor使用

简介:

系列目录

我相信目前国内富文本编辑器中KindEditor 属于前列,详细的中文帮助文档,简单的加载方式,可以定制的轻量级。都是系统的首选

很多文章教程有kindeditor的使用,但本文比较特别可能带有,上传文件的缩略图和水印的源码!这块也是比较复杂和备受关注的功能

一、下载编辑器

KindEditor 4.1.10 (2013-11-23) [1143KB] 官方最新版 或者http://www.kindsoft.net/down.php

二、添加到项目

解压 kindeditor-x.x.x.zip 文件,将所有文件上传到您的网站程序目录里

我放在Scripts下

 

里面有很多例子,你都可以删掉,比如说asp ,asp.net ,jsp ,php,examples

themes是主题,共4个

三、了解常用方法

我们不需要很深入和学习这个富文本编辑器,用到什么到官方查什么就可以,或者google一下,下面是最受关注的几个方法了

  1. 加载编辑器
  2. 设置编辑器的值
  3. 获取编辑器的值
  4. 上传图片和文件
  5. 上传图片加水印、缩略图

现在我们一个一个来了解

1.加载编辑器

引入JS(前要引入jquery)

<script src="@Url.Content("~/Scripts/kindeditor/kindeditor-min.js")" type="text/javascript"></script>

编辑器需要textarea标签的支持,所以

<textarea id="BodyConetent" name="BodyContent" style="width:700px;height:300px;">HTML内容</textarea>  

或者在MVC

 @Html.TextAreaFor(model => model.BodyContent, new { style = "width:675px; height:225px;" })

style的宽高是编辑器的宽高

最后代码是

复制代码
<script src="@Url.Content("~/Scripts/kindeditor/kindeditor-min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        //加载编辑器
        var editor = KindEditor.create('textarea[name="BodyContent"]', {
            resizeType: 1,
            uploadJson: '/Core/upload_ajax.ashx?action=EditorFile&IsWater=1',
            fileManagerJson: '/Core/upload_ajax.ashx?action=ManagerFile',
            allowFileManager: false,
            items: ['source', 'undo', 'redo', 'wordpaste', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'formatblock', 'fontname', 'fontsize', 'forecolor', 'bold', 'italic', 'table', 'link', 'unlink', 'image', 'fullscreen']
        });
    });
</script>
<textarea id="BodyConetent" name="BodyContent" style="width:700px;height:300px;">HTML内容</textarea>
复制代码

有必要解释一下上面的方法

uploadJson:上传文件地址 

fileManagerJson:文件管理

allowFileManager:是否启用管理器 false不启动(管理器可以看到以前上传的文件)

(之前分享过一个上传例子)转到 swfupload多文件上传[附源码] 下载这里的源码。并提取upload_ajax.ashx这个文件所相关的类

替换upload_ajax.ashx这个文件,里面添加了几个kindeditor上传和文件管理的方法

  upload_ajax

(由于上传图片涉及到水印,缩略图之类)导致类比较多所以从swf这个实例中提取并合并

下载LitJson并引入 http://pan.baidu.com/share/link?shareid=2964341274&uk=3624026355   里面需要用到序列化json这个类可以帮助,这个类是开源的,大家可以百度源码

items:代表自定义工具栏

http://kindeditor.net/ke4/examples/custom-plugin.html 可以参考官方例子,将不需要的去掉,比如缩进功能

无设置items的完整模式

设置后的模式

水印可以是文字和图片

请大家到swfupload例子源码中获取到UpLoad.cs这个类,这个类写了生成缩略图、打水印等信息,是本次上传的核心类之一

2.设置编辑器的值和初始化编辑器的值

初始化值值需要一开始赋值给textarea就可以了

设置值editor.html('<h3>Hello KindEditor</h3>');

3.获取编辑器的值

editor.html()

看到官方的http://kindeditor.net/ke4/examples/default.html例子

 很简单的一次使用编辑器,比以前的很流行的CKEditor好用


本文转自ymnets博客园博客,原文链接:http://www.cnblogs.com/ymnets/p/3736582.html,如需转载请自行联系原作者

相关文章
|
1月前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
35 0
|
1月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
150 5
|
1月前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
40 0
|
1月前
mvc.net分页查询案例——mvc-paper.css
mvc.net分页查询案例——mvc-paper.css
9 0
|
1月前
|
XML 前端开发 定位技术
C#(NET Core3.1 MVC)生成站点地图(sitemap.xml)
C#(NET Core3.1 MVC)生成站点地图(sitemap.xml)
47 0
|
1月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
91 0
|
10月前
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
135 0
|
1月前
|
前端开发
.net core mvc获取IP地址和IP所在地(其实是百度的)
.net core mvc获取IP地址和IP所在地(其实是百度的)
134 0
|
1月前
|
前端开发
net core mvc获取IP地址和IP所在地(其实是百度的)
net core mvc获取IP地址和IP所在地(其实是百度的)
32 0
|
11月前
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(一)
[回馈]ASP.NET Core MVC开发实战之商城系统(一)
132 0