编程人 cdmana.com

HtmlBox富文本编辑器的使用

我们下面需要做的是在项目里面提供给用户一个富文本编辑区域。

一、什么是富文本编辑

富文本编辑器,Multi-function Text Editor, 简称 MTE, 它提供类似于 Microsoft Word 的编辑功能,提供给不会编写 HTML 的用户设置各种文本格式,比如设置字体的大小写或者插入图片、插入链接等。以下就是普通文本编辑器和富文本编辑器的区别:

上图我们可以看出来,简单的文本编辑器也就是<input type='text'/>标签,这个标签让我们只能输出简单的无格式文件。

但是富文本编辑器可以让我们输入各种字体或图案的文件。

二、有哪些富文本编辑器

1、TinyMCE

TinyMCE是一个开源的所见即所得的HTML编辑器,界面相当清新,界面模拟本地软件的风格,顶部有菜单栏。支持图片在线处理,插件多,功能非常强大,易于集成,并且拥有可定制的主题。支持目前流行的各种浏览器,它可以达到微软Word类似的编辑体验。 更多介绍及下载:https://www.tiny.cloud/docs/demo/full-featured/

2、CKEditor

Ckeditor也是一款非常经典的富文本编辑器,官方下载量过千万。它是在非常著名的FCkEditor基础上开发的新版本,FckEditor的用户现在基本都转移到Ckeditor了。

Ckeditor有高性能的实时预览,它特有行内编辑功能,使得编辑内容更加直观,仿佛是在编辑网页一样,有很强的可扩展性,被各大网站广泛运用。

 更多介绍及下载:https://ckeditor.com/

等等还有很多,功能也挺丰富的,有些甚至根据不同的语言提供非常丰富的接口。但此次项目我只需要一个非常简单的,最好是直接导入js及css就可以很快使用的插件。

3、HtmlBox

HtmlBox是一个基于jQuery开发的HTML/XHTML编辑器。易于使用。支持多种浏览器Mozilla Firefox、Internet
Explorer6.0、Opera、Safari和Netscape。非常小只有15kb。HtmlBox默认返回HTML,但也可以输出XHTML。
集成Ajax支持。

资源下载:http://down.chinaz.com/soft/29914.htm

三、HTMLBox的使用

首先是下载,解压如下:

 

我们打开其中的一个html文件,修改如下:

效果如下:

做一般的回复框是没有多大的问题。

但是如果需要更加丰富的样式的话,可以采用demo_full.html来修改。

代码修改如下:

效果如下:

Scroll to Top