kendoui-在线文本编辑器
文本编辑器用过很多,fckeditor是我之前用的最多的,但是问题也有很多,诸如安全问题,浏览器兼容问题。。所以最近也一直在找替代产品,正好在研究kendo,所以就尝试了下kendo提供的edit控件了。
首先上图,看过效果你就能喜欢上了。
下面这张图是点击上传图片后弹窗出来的,这里还能创建文件夹。要上传图片直接点击upload即可,比起fckedit,真的是很简洁。。
代码实现起来也很方便
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">新闻管理</h1>
</div>
<!-- /.col-lg- -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
发布新闻
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
@using (Html.BeginForm("NewsAddOrUpdate", "Admin", FormMethod.Post))
{
@Html.HiddenFor(m=>m.Id)
<div class="form-group">
@Html.LabelFor(m => m.Title)
@Html.TextBoxFor(m => m.Title, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Title, "", new { @style = "color:red" })
</div>
<div class="form-group">
@Html.LabelFor(m => m.NewsTypeId) <br />
@(Html.Kendo().DropDownList()
.Name("NewsTypeId")
.DataTextField("Text")
.DataValueField("Value")
.BindTo((List<SelectListItem>)ViewBag.NewsTypeList)
.Value(Model.NewsTypeId<=?"":Model.NewsTypeId.ToString())
)
</div>
<div class="form-group">
@Html.LabelFor(m => m.NewsContent)
@(Html.Kendo().Editor()
.Name("NewsContent")
.HtmlAttributes(new { style = "width: 940px;height:440px" })
.Tools(tools => tools
.Clear()
.Bold().Italic().Underline().Strikethrough()
.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
.InsertUnorderedList().InsertOrderedList()
.Outdent().Indent()
.CreateLink().Unlink()
.InsertImage()
.SubScript()
.SuperScript()
.TableEditing()
.ViewHtml()
.Formatting()
.FontName()
.FontSize()
.FontColor().BackColor()
)
.Value(Model.NewsContent)
.ImageBrowser(imageBrowser => imageBrowser
.Image("~/Images/UserFiles/{0}")
.Read("Read", "ImageBrowser")
.Create("Create", "ImageBrowser")
.Destroy("Destroy", "ImageBrowser")
.Upload("Upload", "ImageBrowser")
.Thumbnail("Thumbnail", "ImageBrowser"))
)
@Html.ValidationMessageFor(m => m.NewsContent, "", new { @style = "color:red" })
</div>
<button type="submit" class="btn btn-default">提 交</button>
<button type="reset" class="btn btn-default">重 置</button>
}
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg- -->
</div>
<!-- /.row -->
</div>
前端无非是绑定字段,依葫芦画瓢就行,具体的可是google kendo 查看demo
要实现后端上传图片,显示图片那就更简单了,我新建了一个控制器继承了EditorImageBrowserController
public class ImageBrowserController : EditorImageBrowserController
{
private const string contentFolderRoot = "~/Images/";
//private const string prettyName = "Images/";
private static readonly string[] foldersToCopy = new[] { "~/Content/shared/" }; /// <summary>
/// Gets the base paths from which content will be served.
/// </summary>
public override string ContentPath
{
get
{
return CreateUserFolder();
}
} private string CreateUserFolder()
{
var virtualPath = Path.Combine(contentFolderRoot, "UserFiles"); var path = Server.MapPath(virtualPath);
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
foreach (var sourceFolder in foldersToCopy)
{
CopyFolder(Server.MapPath(sourceFolder), path);
}
}
return virtualPath;
} private void CopyFolder(string source, string destination)
{
if (!Directory.Exists(destination))
{
Directory.CreateDirectory(destination);
} foreach (var file in Directory.EnumerateFiles(source))
{
var dest = Path.Combine(destination, Path.GetFileName(file));
System.IO.File.Copy(file, dest);
} foreach (var folder in Directory.EnumerateDirectories(source))
{
var dest = Path.Combine(destination, Path.GetFileName(folder));
CopyFolder(folder, dest);
}
}
}
就这样完成了。。。
kendoui-在线文本编辑器的更多相关文章
- 基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- Jquery的bootstrap在线文本编辑器插件Summernote
http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...
- javascript 在线文本编辑器
javascript 在线文本编辑器实现代码. 效果例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGhwZmVuZ2h1bw==/font/5 ...
- $Django 在线文本编辑器skindeditor
简介 KindEditor是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富 ...
- 关于在线文本编辑器防XSS注入攻击问题
跨站脚本攻击,又称XSS代码攻击,也是一种常见的脚本注入攻击.例如在下面的界面上,很多输入框是可以随意输入内容的,特别是一些文本编辑框里面,可以输入例如<script>alert('这是一 ...
- kindeditor在线文本编辑器过滤HTML的方法
在使用kindeditor文本编辑器时遇到的问题,客户直接从Excel里粘贴文本内容到文本编辑器中(能不能再懒一些),然后不调整粘贴内容直接就保存(你敢不敢再懒一些)!对于这种很无语的行径,我只能对他 ...
- ckeditor(在线文本编辑器)使用教程
ckeditor是一款由javascript编写的富文本网页编辑器,它可以填写文字.插入图片.视频.Excel等富媒体信息,也可以在源码方式下填写内容,在各个网站中应用非常广泛. 下面就来说说cked ...
- Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- 在线文本编辑器cheditor应用实例
CKEditor 即 FCKEDITOR . FCKeditor是眼下最棒的可见就可以得网页编辑器之中的一个,它採用JavaScript编写.具备功能强大.配置easy.跨浏览器.支持多种编程语言.开 ...
- 基于jquery的bootstrap在线文本编辑器插件Summernote (转)
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
随机推荐
- React-Flux 介绍及实例演示
一.Flux架构 二.例子 1.TodoApp.react.js /** * Copyright (c) 2014-2015, Facebook, Inc. * All rights reserved ...
- 一个简单的将GUI程序的log信息输出到关联的Console窗口中(AllocConsole SetConsoleTitle WriteConsole 最后用ShowWindow(GetConsoleWindow)进行显示)
// .h 文件 #pragma once class CConsoleDump { public: explicit CConsoleDump(LPCTSTR lpszWindowTitle = N ...
- C++:基类与派生类对象之间的赋值兼容关系
4.5 基类与派生类对象之间的赋值兼容关系 在一定条件下,不同类型的数据之间可以进行类型转换,例如可以将整型数据赋给双精度型变量. 在赋值之前,先把整型数据转换为双精度型数据,然后再把它双精度型变量. ...
- NOT EXISTS优化的一个案例 .
原始语句: SELECT * FROM dcf_account.t_posting_transaction t1 WHERE NOT EXISTS ( SELECT * FROM dcf_loan.t ...
- Windows 7更改SVN账户密码
首先说明下我的系统是Windows7 今天更改了SVN账号和密码,然后想要更改一下Eclipse的SVN登录用户名和密码 但是网上找了一大推说什么客户端的,靠净扯淡. 本人亲测最有效的方法是删除C盘下 ...
- cololection
package cn.bjsxt.col; /** * 简化迭代器原理 * hasNext * next * @author Administrator * */ public class MyArr ...
- HDU 4565 So Easy!(矩阵)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4565 题意: 题意: #include <iostream>#include <cs ...
- python学习中,list/tuple/dict格式化遇到的问题
昨天上了python培训的第一课,学习了基础知识.包括类型和赋值,函数type(),dir(),id(),help()的使用,list/tuple/dict的定义以及内置函数的操作,函数的定义,控制语 ...
- html之marquee详解[转]
该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果该标签是个容器标签语法: <marquee ...
- BZOJ2229: [Zjoi2011]最小割
题解: 真是一道神题!!! 大家还是围观JZP的题解吧(网址找不到了...) 代码: #include<cstdio> #include<cstdlib> #include&l ...