NicEdit和Kindeditor配置

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


Jetbrains全系列IDE稳定放心使用

推荐两款富文本编辑器:NicEdit和Kindeditor

做过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文件和一张图片

2010-09-05_102850

使用也非常简单,只需在页面中添加简单的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>

运行效果如下

2010-09-05_104825

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

2010-09-05_104528

中文本下载

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而已,下图为文件结构

2010-09-05_102941

使用代码

<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>

运行效果如下

2010-09-05_110505

 

总结

选择这两款富文本编辑器的原因有 1 都是使用JS编写,这样使用起来比较简单不用去引用DLL。

2 体积都很小。

3 都可以直接将现有的TextBox或是TextArea变成富文本编辑器。

NicEditor相比较KindEditor来说还显的不是很成熟。在我最近的一个需求中就有两点没有达到,最后选用了KindEdior。

1 TextBox的宽度只能设置成固定数值的宽度,如果设置成百分比,如100%,在有的浏览器中就会显示有问题。

2 貌似还没有禁用编辑器的编辑功能,也有可能是我没有找到设置的方法。

转载于:https://www.cnblogs.com/-Apple/archive/2013/01/08/2851963.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/182931.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • vim保存和退出_vim编辑器保存退出

    vim保存和退出_vim编辑器保存退出退出vim的快捷键,不需要进入命令编辑模式按住shiftzz保存退出zq不保存退出,q表示放弃之所以按住shift,其实是切换大小写在命令编辑模式下::q不保存退出:q!不保存强制退出:wq保存退出,w表示写入,不论是否修改,都会更改时间戳:x保存退出,如果内容未改,不会更改时间戳“:x”和“:wq”的区别如下:(1…

    2022年8月24日
  • 深入了解 B-Tree 和 B+Tree 的区别

    深入了解 B-Tree 和 B+Tree 的区别

    2022年2月17日
  • C++中的空类默认包含哪些类成员函数

    C++中的空类默认包含哪些类成员函数

    2021年3月12日
  • 查看android证书签名

    查看android证书签名虽然以前搞过,一直忘了怎么查看android证书签名。最近因为需要查看android证书签名,在网上找了很多都不是印象中的方法,最后看到一篇搜索才想起,看来以后要多提高搜索技巧,好记性不如好笔记。正题—-其实查看android签名很简单,对于签过名的apk文件中,用winrar打开后在在META-INF文件下的cert.rsa属于pkcs7证书文件,所以加改后缀为.p7b打开,在

    2022年6月8日
  • samba服务共享目录时 什么参数表示该共享目录可以浏览_电脑samba共享

    samba服务共享目录时 什么参数表示该共享目录可以浏览_电脑samba共享会不会有那么一天,生活可以简单到每天清早踏上一辆载着鲜花的脚踏车,微笑着穿过窄窄的街巷,为爱花的人送去芬芳,为需要知识的你送去帮助。上期为大家说了如何搭建dhcp服务(详情点击使用DHCP动态分配IP)本期为大家带来搭建samba服务先来说说samba服务的作用:跨平台支持文件共享服务samba的特点:支持匿名和身份验证共享数据,它的安全性也比较高samba支持的协议有:nmb(监听137,138号端口,提供域名访问,属于UDP协议)smb(监听139号端口,服务消息块,提供Linux平台共享

    2022年9月24日
  • Java反射机制详解

    Java反射机制详解首先,我们在开始前提出一个问题:1.在运行时,对于一个java类,能否知道属性和方法;能否去调用它的任意方法?答案是肯定的。本节所有目录如下:什么是JAVA的反射机制JDK中提供的ReflectionAPIJAVA反射机制提供了什么功能获取类的Class对象获取类的Fields获取类的Method获取类的Constructor新建

    2022年8月24日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号