文本编辑器用过很多,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. HTML5 文件API(二)

    1.FileSystem概述及浏览器检 2.申请磁盘配额 3.创建文件

  2. 让Windows蓝屏死机

    ssdt 随便一个函数入口改90就蓝了 ------------------------------------------------- program Project2; uses Windows ...

  3. Spring与Struts2整合VS Spring与Spring MVC整合

    Spring与Struts2整合,struts.xml在src目录下 1.在web.xml配置监听器 web.xml <!-- 配置Spring的用于初始化ApplicationContext的 ...

  4. Redis是什么?

    1. Redis是什么 这个问题的结果影响了我们怎么用Redis.如果你认为Redis是一个key value store, 那可能会用它来代替MySQL;如果认为它是一个可以持久化的cache, 可 ...

  5. Android Handler传值方式

    前面介绍handler的时候,也用到过几种传值方式,今天来总结一下,并且重点说一下bundle方式,代码如下: package com.handlerThread; import android.ap ...

  6. ios7新增基础类库以及OC新特性

    新特性: Modules:用XCode5新建工程默认支持modules编译,老项目需在Build Settings里查找modules,找到的Enable Modules选项设置为YES. 对应新增语 ...

  7. TUXEDO错误解决方案

    错误1: root@tfjus:/opt/tuxedo/simpapp# buildclient -f simpcl.c -o simpcl simpcl.c: In function 'main': ...

  8. 【转载】Morris遍历二叉树 & BST(二叉搜索树) Traverse & 空间O(1) 时间O(n)

    因为做一道Leetcode的题目(前面博客有:link),需要用Space O(1)空间复杂度来中序遍历树, 看了Discuss,也上网搜了一下,发现空间O(1)可以用 Morris遍历的方法.方法介 ...

  9. Jqgrid入门-使用模态对话框编辑表格数据(三)

            Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...

  10. hdu 4671 Backup Plan(签到题)

    错成那样,还以为是卡时间卡精度的变态题,结果就那么ac了= = 悔死我了 题意就不概述了,只要处理前两列即可.其中第一列顺序直接扫一遍,第二列要先处理较少的那几种.我是接着第一列用 head[] 继续 ...