免费javascript富文本编辑器 总有一款会适合你!
作者：极客小俊 一个把逻辑思维转变为代码的技术博主
搜索公众号:[极客小俊]原创文章
什么是富文本编辑器?
概述:
javascript Text Editor
? 我们平常在页面上写文章 或者 后台发布文章内容、或内容描述等、一直都是用的是富文本编辑器,包括很多论坛发帖的文字窗口也是典型的富文本编辑器, 它跟office中的word界面非常类似!
富文本编辑器的使用是与word非常类似的,所见即所得的排版方式,操作也与word类似，点击鼠标使用相应功能就行,对用户而言使用上相对比较简单，也比较容易进入状态!
如图
总的来说富文本编辑器就是一种基于JS并且可内嵌于web浏览器中所见即所得的文本编辑器!
富文本编辑器不同于普通的文本编辑器，开发者可到网上下载免费的富文本编辑器内嵌于网站应用程序里面, 那么作为一个开发者，熟悉几款富文本编辑器是很有必要的，说不一定某个项目就要集成进去,到时候现就不会去花太多时间研究它!
介绍几款主流常用的JS富文本编辑器
下面列举几款常用的富文本编辑器,供大家参考!
1.TinyMCE
概述
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等, 并且界面相当清新，界面模拟本地软件的风格，顶部有菜单栏。支持图片在线处理，插件多，功能非常强大，易于集成，并且拥有可定制的主题。
支持目前流行的各种浏览器，它可以达到微软Word类似的编辑体验。
而且这么好的东西还是开源免费的，而且一直有人维护，这款编辑器使用的人非常多 , TinyMCE自带的大部分插件均提供社区开源版，可免费使用且可商用!
可视化编辑器，让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor非常适合在CMS、商城、论坛、博客、电子邮件等互联网应用上使用。
下载地址：
以上文件除了jQuery.min.js需要单独下载外，simditor.css、module.js、hotkeys.js、simditor.js 到你下载的Simditor中的site/assets文件夹中去找。还要注意js文件的引入顺序，Simditor是基于jQuery和module.js，所以要引入到simditor.js之前。
步骤2: 初始化Simditor
要使用 Simditor，首先你需要一个textarea这样的元素，并且给textarea设置一个id选择器。
举个栗子
//js
//html
demo5
效果如下
6.Summernote
概述
Summernote是一款轻量级的富文本编辑器，比较容易上手，使用体验流畅，支持各种主流浏览器。它是基于jquery和bootstrap，使用前先引入这两项。
下载地址：https://summernote.org/
使用地址：
步骤2: 初始化Summernote
在你希望页面中呈现 Summernote 编辑器的位置设置一个文本容器，并且给文本元素设置一个id选择器。
举个栗子
//js
//html
demo6
Hello Summernote
效果如下
7.Quill
概述
Quill是轻型的编辑器，样式一般（黑白风），功能中等，它的代码高亮功能比较强，同样支持行内编辑模式，工具条可自定义。
下载地址：https://quilljs.com/docs/download/
使用地址：https://quilljs.com/docs/quickstart/
注意：Quill的使用文档是英文的，英语不好的可以借助翻译软件！！！！
下载
进入一下页面
快速使用
步骤1：引入Quill相关的JS与CSS文件
在中插入如下代码，注意自己的项目路径, 将以下文件引入到项目中，如下：
步骤2: 初始化Quill
在你希望页面中呈现 Quill 编辑器的位置设置一个文本容器，并且给文本元素设置一个id选择器。
举个栗子
//js
//html
demo7
Hello Quill
效果如下
end
以上的JS编辑器的详细使用请参照官方以及相关文档，根据你的项目需求，挑选出适合的富文本编辑器，希望对你有所帮助！！
谢谢您的阅读！!
"点赞" "评论" "收藏"