文本编辑器用过很多,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-在线文本编辑器的更多相关文章

  1. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  2. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  3. javascript 在线文本编辑器

    javascript 在线文本编辑器实现代码. 效果例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGhwZmVuZ2h1bw==/font/5 ...

  4. $Django 在线文本编辑器skindeditor

    简介 KindEditor是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富 ...

  5. 关于在线文本编辑器防XSS注入攻击问题

    跨站脚本攻击,又称XSS代码攻击,也是一种常见的脚本注入攻击.例如在下面的界面上,很多输入框是可以随意输入内容的,特别是一些文本编辑框里面,可以输入例如<script>alert('这是一 ...

  6. kindeditor在线文本编辑器过滤HTML的方法

    在使用kindeditor文本编辑器时遇到的问题,客户直接从Excel里粘贴文本内容到文本编辑器中(能不能再懒一些),然后不调整粘贴内容直接就保存(你敢不敢再懒一些)!对于这种很无语的行径,我只能对他 ...

  7. ckeditor(在线文本编辑器)使用教程

    ckeditor是一款由javascript编写的富文本网页编辑器,它可以填写文字.插入图片.视频.Excel等富媒体信息,也可以在源码方式下填写内容,在各个网站中应用非常广泛. 下面就来说说cked ...

  8. Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  9. 在线文本编辑器cheditor应用实例

    CKEditor 即 FCKEDITOR . FCKeditor是眼下最棒的可见就可以得网页编辑器之中的一个,它採用JavaScript编写.具备功能强大.配置easy.跨浏览器.支持多种编程语言.开 ...

  10. 基于jquery的bootstrap在线文本编辑器插件Summernote (转)

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

随机推荐

  1. iOS开发--网络下载

    这里使用的是NSURLConnection的代理请求下载,并且是具有进度,UI能实时刷新,至于NSURLConnection如何请求.并且有几种请求方法请看NSURLConnection请求简介,在这 ...

  2. 创业草堂之六:CEO的财务自修课

    创业团队中一个最普遍的缺陷,是团队--尤其是团队的核心人物CEO,缺乏基本的财务知识和技能.一个不懂财务知识的CEO,即使业务能力再强,在投资人的眼里,他/她依然是一个笨拙的CEO.粗糙的CEO.鲁莽 ...

  3. 61. Rotate List

    题目: Given a list, rotate the list to the right by k places, where k is non-negative. For example:Giv ...

  4. 高性能Web框架Zend Framework

    Zend Framework (ZF)是用 PHP 5.3及更高版本来开发 Web 程序和服务的开源框架.ZF用100% 面向对象编码实现. ZF的组件结构独一无二,每个组件几乎不依靠其他组件.这样的 ...

  5. 在Linux中创建静态库和动态库

    我们通常把一些公用函数制作成函数库,供其它程序使用. 函数库分为静态库和动态库两种. 静态库在程序编译时会被连接到目标代码中,程序运行时将不再需要该静态库. 动态库在程序编译时并不会被连接到目标代码中 ...

  6. java.lang.NoSuchMethodError: No static method setLayoutDirection(Landroid/graphics/drawable/Drawable;I)V in class Landroid/support/v4/graphics/drawable/DrawableCompat

    Bug: java.lang.NoSuchMethodError: No static method setLayoutDirection(Landroid/graphics/drawable/Dra ...

  7. vpn局域网共享

    vpn局域网共享 更改网关为vpn共享主机地址 在“命令运行符”处,挨个键入下列命令,并回车生效: regsvr32 Softpub.dll regsvr32 Wintrust.dll regsvr3 ...

  8. 1320. Graph Decomposition

    1320 简单并查集 #include <iostream> #include<cstdio> #include<cstring> #include<algo ...

  9. 1205. By the Underground or by Foot?(spfa)

    1205 简单题 有一些小细节 两个站可能不相连 但是可以走过去 #include <iostream> #include<cstdio> #include<cstrin ...

  10. 安卓自动化测试工具MonkeyRunner之使用ID进行参数化,以及List选择某项和弹出框点击确定的写法

    一.List选择某项的操作步骤: 1.通过父结点得出列表各子项 2.将选择项的文本与列表中的子项进行比较 3.计算出选择项的坐标位置 截取实例: from com.android.monkeyrunn ...