过Web开发的朋友相信都使用过富文本编辑器，比较出名的CuteEditor和CKEditor很多人应该已经使用过，在功能强大的同时需要加载的东西也变得很多。下面要推荐的两款富文本编辑器都是使用JS编写，使用简单，非常轻量级。

NicEditor

NicEdit是一个轻量级，跨平台的Inline Content Editor。NicEdit能够让任何 element/div变成可编辑或者能够把标准的TextArea转换成富文本编辑器。

主页:http://nicedit.com/

下载:http://nicedit.com/download.php

示例:http://nicedit.com/demos.php

NicEdit是我见过最轻量级的富文本编辑器，总共就一个JS文件和一张图片

使用也非常简单，只需在页面中添加简单的JS代码就可以将TextBox或是TextArea控件转换成富文本编辑器，代码如下

<head runat="server">

    <title>title>

head>

<body>

    <form id="form1" runat="server">

        <script src="../JS/Eidtor/nicEdit.js" type="text/javascript">script>

        <script type="text/javascript">

            bkLib.onDomLoaded(function() {

                new nicEditor({ fullPanel: true }).panelInstance('txtContent');

            });

        script>

        <asp:TextBox runat="server" ID="txtContent"

            TextMode="MultiLine" Height="200px" Width="600px" >asp:TextBox>

    form>

body>

html>

运行效果如下

官网中的版本为英文版，而且字体设置也只能设置英文字体，我对英文版本做了简单的汉化，并且增加了几种中文字体，如下图

KindEditor

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的与Java、.NET、PHP、ASP等程序接合。这个是官网上的介绍。

主页：http://www.kindsoft.net/index.php

下载：http://www.kindsoft.net/down.php

示例：http://www.kindsoft.net/demo.php

KindEditor相比较NicEditor涉及的文件要多很多，不过大小也才几百K而已，下图为文件结构

使用代码

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>title>

head>

<body>

    <form id="form1" runat="server">

    <script charset="utf-8" src="../JS/KindEditor/kindeditor-min.js"

type="text/javascript">script>

    <script type="text/javascript" charset="utf-8">

        KE.show({

            id: 'txtContent',

            resizeMode: 1,

            allowPreviewEmoticons: false,

            allowUpload: false,

        });

    script>

    <textarea cols="60" id="txtContent" style="width: 600px; height: 300px;" runat="server"

        readonly="readonly">textarea>

    form>

body>

html>

运行效果如下

asp.net中两款文本编辑器NicEdit和Kindeditor的更多相关文章

  1. python安装后推荐的安装两款文本编辑器

    Notepad++ 7.2.2和 Sublime Text --道心 Notepad++ 7.2.2 Notepad++ 是一款非常有特色的编辑器,是开源软件,可以免费使用.支持的语言: C, C++ ...

  2. Python必学：使用哪款文本编辑器更好？

    Python的交互式命令行写程序,好处是一下就能得到结果,坏处是没法保存,下次还想运行的时候,还得再敲一遍. 所以,实际开发的时候,我们总是使用一个文本编辑器来写代码,写完了,保存为一个文件,这样,程 ...

  3. ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork 制作一个添加新闻功能

    本文将交大伙怎么集成ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork来制作一个新闻系统 先上截图: 添加页面如下: 下面来看代码部分 列表页如下: @ ...

  4. Django中使用富文本编辑器Uedit

    Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...

  5. flask项目中使用富文本编辑器

    flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...

  6. drupal中安装CKEditor文本编辑器，并配置图片上传功能 之 方法二

    drupal中安装CKEditor文本编辑器,并配置图片上传功能 之 方法一 中介绍了ckeditor的安装和配置方法,其实还有另一种新方法,不用IMCE模块. 不过需要ckfinder的JS库,可以 ...

  7. Django实现的博客系统中使用富文本编辑器ckeditor

    操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...

  8. Django后台管理admin或者adminx中使用富文本编辑器

    在admin或者adminx后台中使用富文本编辑器 一.建立模型:(安装django-tinymce==2.6.0) from django.db import models from tinymce ...

  9. Django项目中添加富文本编辑器django-ckeditor

    django-ckeditor库的使用步骤: 1.在命令行下安装django-ckeditor这个库: 命令:pip install django-ckeditor 2.安装成功后,配置Django项 ...

随机推荐

  1. 对Javascript异步执行的理解

    简单的查看了下Javascript异步编程的代码.按照网上的说法,Javascript异步编程的核心就在于setTimeout.这个系统函数让我们将函数的执行放在了一个指定的新“线程”中.于是本来的顺 ...

  2. HDU 4770 Lights Against Dudely

    Lights Against Dudely Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  3. 解决eclipse中出现Resource is out of sync with the file system问题

    解决eclipse中出现Resource is out of sync with the file system问题 . 分类: 嵌入式开发平台和环境相关 2011-12-27 16:18 4872人 ...

  4. Start:at cnblogs firstDay

    C#旨在设计成为一种"简单.现代.通用",以及面向对象的程序设计语言,此种语言的实现,应提供对于以下软件工程要素的支持:强类型检查.数组维度检查.未初始化的变量引用检测.自动垃圾收 ...

  5. Filter Blue Light for Better Sleep（APP 推荐）

    Filter Blue Light for Better Sleep By Carolyn Mohr11 May, 2016 Many people like to use their phones ...

  6. GLib基础

    实用功能 GLib中包含了近二十种实用功能,从简单的字符处理到初学者很难理解的XML解析功能,这里介绍两种较简单的:随机数和计时. 下面代码演示如何产生1-100之间的随机整数和演示如何计算30000 ...

  7. nginx 编译模块说明

    --prefix= <path> - Nginx安装路径.如果没有指定,默认为 /usr/local/nginx. --sbin-path= <path> - Nginx可执行 ...

  8. 自定义PageControl样式

    #define iOS7 ([[UIDevice currentDevice].systemVersion doubleValue] >= 7.0) //调用方法 改变PageControl样式 ...

  9. 关于cookie

    CookieHelper.WriteCookie("DEPID", "theway", depid);   //先写入cookie //再读取cookie Us ...

  10. 查询数据库后台Block 的Sql存储过程

    查询数据库后台Block 的Sql存储过程 SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER OFF GO /*记录SQL Server的阻塞情况 wang 200 ...