做博客，论坛等一些用户发表文章之类的网站的时候肯定会用到HTML编辑器，我最近那个小论坛找了几款可视化编辑器都不错，就是觉得文件还是有点大了基本都是300kb左右。

以下只说对于PHP环境的编辑器操作！

1.百度UEditor编辑器

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

百度UEditor编辑器使用很简单，首先在https://ueditor.baidu.com官网下载自己需要的版本百度UEditor编辑器有UBuilder版和开发版。

UBuilder版本可以试大家选择自己需要的功能，不会添加无用的功能达到精简代码(但是现在貌似根本下载不了)

开发版分PHP、JSP、.NET、ASP版本和完整源码，选择自己需要的下载就行了。

把下载后得到的压缩包打开里面有一个index.html的DEMO演示。

自定义配置编辑器：

创建一个新的html文件，拿到 ueditor.all.min.js和ueditor.config.js 文件，引入这两个，然后实例化编辑器

<script type="text/javascript" src="ueditor.config.js"></script>
<script type="text/javascript" src="ueditor.all.min.js"> </script>
<script type="text/javascript"> 
      var ue = UE.getEditor('editor');
</script>

然后再需要编辑器的地方添加一段script

<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
```注意，这里的type必须是text/plain 否则无效 id必须和实例化的id相同

  

添加完成后，你会发现编辑器界面有很多按钮，如果自己只想用自己需要的话，打开ueditor.config.js 文件进行修改配置

ctrl+f找到 toolbars 后面有很多按钮名称，保留需要的删除不用的即可。

百度编辑器提供了很多的方法，官网上面有很多二次开发的，demo里面有一些获取的方法。

  

  

  

2.kindeditor编辑器

![](https://upload-static.acgxt.com/upload/image/20151220/20151220020403_88837.jpg)  

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

进入KindEditor下载编辑器http://kindeditor.net 这款编辑器打开之后有多个版本，这里选择PHP版本，删除JSP、ASP.NET、ASP即可。

kindeditor的demo文件在php文件夹中的demo.php 打开后已经是一个处于表单提交的文件了。

default.css 是默认样式文件

prettify.css 是代码高亮样式文件

prettify.js 是代码高亮核心js

kindeditor.js 是编辑器核心js

配置自定义编辑器：

其实demo.php已经提供了一个完整的编辑器提交文件，我这里就无需详细讲解移植了。

选择自己需要的按钮删除不需要的按钮同样的找到 kindeditor.js，ctrl+f搜索 items 在后面的地方删除不需要的按钮名称，保留需要的按钮名称即可 

items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about' ],

```

这两款编辑器我觉得都不错，功能都很强大，唯一我就觉得文件有点大了，所以我又找到一款特别小的编辑器 。

tinyeditor编辑器

tinyeditor编辑器不依赖其他js框架，而且js文件只有8kb，很好的让用户快速加载，但是听这8kb就一定知道功能很少咯..

下载地址在最下面，打开压缩包里面的index.html文件即可看到此编辑器……

样式第一眼看到是不好看，功能但是能实现。8kb的js文件你还想要啥好的编辑器？基本的功能都能实现，图片是用js的prompt对话框进行输入图片地址。

下载地址：【七空幻音】tinyeditor编辑器