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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 从网页抓取数据的一般方法

    首先要了解对方网页的运行机制 ,这可以用httpwacth或者httplook来看一下http发送和接收的数据。这两个工具应该说是比较简单易懂的。这里就不再介绍了。主要关注的内容是heade

    2021年12月27日
  • msfconsole模块_msfconsole下载

    msfconsole模块_msfconsole下载Msfconsole提供了一个一体化的集中控制台。通过msfconsole,你可以访问和使用所有的metasploit的插件,payload,利用模块,post模块等等。Msfconsole还有第三方程序的接口,比如nmap,sqlmap等,可以直接在msfconsole里面使用。在启动MSF终端之后,可以首先输入help命令列出MSF终端所支持的命令列表,包括核心命令集和后端数据库命令集。对于其中的大部分命令,你可以输入help[COMMAND],进一步查看该命令的使用帮助信息。一、Msfconso

    2022年9月6日
  • 方格子服务器系统,方格子无盘服务器配置推荐方案[通俗易懂]

    方格子服务器系统,方格子无盘服务器配置推荐方案[通俗易懂]方格子无盘服务器配置推荐方案内容精选换一换虚拟私有云使用限制如表1所示。以上配额说明针对单租户情况。一个网络ACL单方向拥有的规则数量最好不超过20条,否则可能引起网络ACL性能下降。二层网关连接在公测期间默认只能创建1个二层连接网关。默认情况下,一个用户可以创建100个安全组。默认情况下,一个安全组最多只允许拥有50条安全组规则。默认情况下,一个云服务器或扩展网卡建议选择安全组华为云最佳实践,…

    2022年10月4日
  • List转Set[通俗易懂]

    List转Set[通俗易懂]List转SetList<String>myList=newArrayList()<String>;myList.add(“1”);myList.add(“1”);Setresult=newHashSet(myList);Set转ListString[]str=newString[]{“Tom”,”Bob”,”Jane”};…

    2022年6月21日
  • Oracle创建数据库语句_oracle创建表的sql语句

    Oracle创建数据库语句_oracle创建表的sql语句Oracle创建表空间,用户及授权

    2022年9月22日
  • pycharm不显示结果_pycharm界面

    pycharm不显示结果_pycharm界面网上说是什么包问题的就说了。我遇到一个非常奇葩的问题因为你的设置可能是这样每次都在窗口右侧的工具栏那边显示。可能突然心情不佳就不显示了。然后你再把勾去掉即可。你要喜欢再点上也行。转载于:https://www.cnblogs.com/theWinter/p/8320343.html…

    2022年8月25日

发表回复

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

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