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

2024-05-13 20:38

本文主要是介绍两款富文本编辑器:NicEdit和Kindeditor,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

推荐两款富文本编辑器: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 貌似还没有禁用编辑器的编辑功能,也有可能是我没有找到设置的方法。

这篇关于两款富文本编辑器:NicEdit和Kindeditor的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/986773

相关文章

文本编辑器-Vim

http://www.vim.org/ 简单介绍 Vim是一种高度可配置的文本编辑器,用于创建和更改任何类型的文本非常高效。它与大多数UNIX系统和苹果OS X一起被列为 “vi”。 Vim是稳定的,并且不断被开发以变得更好。 其功能包括: 1. 持久的,多级的撤消树 2. 广泛的插件系统 3. 支持数百种编程语言和文件格式 4. 强大的搜索和替换 5. 与许多工具集成 下载

Vue3 使用 富文本编辑器 wangeditor/editor-for-vue 配置详解

Vue3 使用 富文本编辑器 wangeditor/editor-for-vue 配置详解 先上官网地址 wangEditor 5 点这里 wangeditor 主要API 配置功能栏 let toolbarConfig = {toolbarKeys: [ "bold", // 字体加粗 "underline", // 字体下划线 "italic", // 字体斜体 "through",

一款可以替代Notepad++的免费高级文本编辑器

Kate 文本编辑器是一款跨平台的免费高级文本编辑器,具有丰富的功能和特性。它支持标签页、代码高亮、多文件查找、垂直/水平视图、侧边栏、颜色主题等特性,类似于Notepad++。它以其多功能性和易用性广受好评。Kate 支持多文档界面(MDI)和标签页,允许用户同时编辑和查看多个文件,无论是单独在一个窗口中还是在分割视图中。 相较于其他文本编辑器,Kate 提供了更为全面的功能和更好的跨平台支持

最新版本typora下载安装(保姆级教程)、文本编辑器typora解除破解(包括新旧版本)

首先针对旧版本,原本只需要替换 app.asar 文件即可。具体的操作步骤可以见这篇文章:旧版本解除步骤 问题:评论反应,说方法不行,仍激活破除不了,而且还导致软件使用不了,于是这里介绍新的方法(针对新版本) 新旧版本区分:值得是破解的新旧方法,而不是绝对意义上的新旧版本 建议使用新版本:比如这里以 1.7.x 为例(其余高版本激活方法一样) 一、下载 1、Typora 官网下

java文本编辑软件代码

这是小编在csdn第一篇博文,闲话不多说,直接上代码:   该编辑器能够类似记事本,能实现文件的打开,保存,文本的复制,粘贴,查找,替换等功能,效果图如下:   源码如下: package A;import java.awt.BorderLayout;import java.awt.CheckboxMenuItem;import java.awt.Container;impor

【甲方安全建设】富文本编辑器XSS漏洞攻击及防御详析

原创文章,禁止转载。 文章目录 调研背景搭建TinyMCE富文本编辑器靶场富文本编辑器前端过滤富文本编辑器后端攻击后端弱过滤弱过滤1弱过滤2 后端有效过滤从甲方的视角看动态安全 调研背景 随着Web 2.0技术的普及,富文本编辑器在各种Web应用中得到了广泛应用,用户、网站管理员等可以通过富文本编辑器在网页中添加并展示格式化文本、图片、视频等丰富内容。然而,由于富文本内

两款在线作图软件

1.processOn https://www.processon.com/diagrams 这个不仅可以可以画流程图,还可以花思维导图。 2.diagrams https://app.diagrams.net/

Android富文本编辑器总结(五)

一: EditText文本转HTML Android中有Html.toHtml()的方法,可以将颜色、加粗等转化为html标签,简化了我们标签的插入算法,但是也存在一些问题。 1. @XXX 和 $123456 的问题 @XXX是作为一个整体,创建了一张Bitmap然后使用ImageSpan插入到文本中的,这样就可以实现光标只能定位在@XXX之前或之后,要删除就整体删除。但是通过Html.t

Android富文本编辑器总结(四)

段落缩进的实现 段落缩进,第一行文字距左边框保持一段距离,其他行距离左边框也有一段距离。 当需求只有一级缩进时,使用图片(ImageSpan)占位感觉比较好,自己画一个带有编号的ImageSpan插在段落在最前方,不过这样也存在一个问题,就是光标可以定位到编号之前,并且可以点击删除将图片移动到上一行的末尾,所以需要特殊处理。 当有多级缩进时,例如 1。 adsfasdfasdfasdfad

Android富文本编辑器总结(三)

前面已经完成了编号生成的框架,下面开始针对各个问题提出解决方案。 键盘的删除键和回车键监听。 键盘我分为三类,Android系统自带aosp键盘、定制手机自带键盘和第三方键盘。其中前两种差不多,要说监听删除键和回车键应该比较简单才对,但是经过测试,myEdittext.setOnKeyListener,onKeyDown和dispatchKeyEvent这三个方法设置了之后,前两种键盘点击