发自己的基于web的文本编辑器背后可能有不同的原因，但是，你总能找到一个工具来创建符合你的需求和资金的在线文本编辑器。在本文中，我们将简要回顾五个JavaScript富文本编辑器，帮助你找到满足期望的编辑器，以便更好的进行前端开发。想要掌握web前端开发最新的编程技能和知识，建议参加web前端培训，课程实时更新，紧跟企业需求，让你轻松找到工作。

Froala 编辑器

Froala编辑器是一个JavaScript WYSIWYG编辑器，非常关注与流行开发框架的轻松集成。目前，你可以将Froala与React.js、Aurelia、Angular、Ionic、Django和其他框架一起使用。Froala编辑器强大而丰富的API提供了广泛的可能性，包含数十个代码示例的优秀文档将帮助你在几分钟内开始。

Froala编辑器的另一个显著优势是易于添加新功能。一堆易于使用的插件（有30多个）允许添加新功能，而无需任何重大努力。编写良好、结构化和文档化的代码非常容易理解、维护和扩展。

Textbox.io

Textbox.io是一个极简但功能强大的在线文本编辑器，支持桌面和移动设备。在主要功能中，内置的图像处理和存储、文件拖放、拼写检查和自动更正都是很不错的功能，此外，该工具还实现了屏幕阅读器等辅助技术，并符合WAI-ARIA可访问性标准。更多关于文本编辑器的相关知识，可以考虑通过参加web前端培训来学习，有专业老师指导，有全面系统的课程，学起来又快又轻松。

移动设备支持允许用户使用移动友好的用户界面，从相机或多媒体资料上传图像，使用Siri或Cortana处理文本等等。你可以通过应用标准和自定义类和样式来更改Textbox.io的外观。

Textbox.io支持与ASP.NET、Knockout、XPages和Angular的集成。

DHTMLX 富文本编辑器

dhtmlx富文本编辑器是一个完全可自定义的JavaScript文本编辑器，支持HTML和标记作为输入和输出格式以及纯文本。其集成功能允许在Angular、React和Vue.js项目中使用此文本编辑器。

基于dhtmlxRichText的在线应用程序的用户可以在紧凑的经典模式和文档模式之间切换。对于那些在小屏幕设备上工作的人来说，全屏模式非常有用。此文本编辑器的完全可自定义外观允许你创建独特的外观。你可以使用任何理想的图标、字体或颜色来开发可识别的设计。此外，你还可以更改可用控件的行为，并根据需要添加自己的控件。dhtmlxRichText支持块引号、链接以及所有必要的格式和编辑功能。

Imperavi Redactor

Imperavi Redactor是一款基于web的文本编辑器，它提供了流畅、清晰的设计、可扩展性、无限的灵活性、高效的API和令人惊叹的用户体验。其模块化架构允许你快速扩展应用程序的功能。清晰的代码和整洁的UI为开发人员和用户创造了极好的体验。在web前端培训学习中，有专业讲师面授指导教学，还有系统全面的课程，你可以很快掌握这些知识和技能。

目前，有22个插件用于最常见的任务。此外，你可以创建自己的插件，而无需任何重大努力。安装和配置此文本编辑器不需要技术专家。文档编写得很好，不会引起任何问题。

Syncfusion富文本编辑器

Syncfusion富文本编辑器是一个轻量级JavaScript工具，支持HTML和标记。你可以使用它创建web和移动应用程序，如博客编辑器、信使、在线论坛等。内联模式使内联编辑器在用户单击可编辑区域中的内容后显示。

工具栏配置的可能性很大。例如，你可以根据项目的要求向应用程序添加多行工具栏、展开工具栏、快速工具栏或浮动工具栏。此外，你还可以根据工具栏按钮的类别配置工具栏按钮和组命令，用户可以在文本中插入图像和超链接。此外，你还可以插入HTML表，以简化处理财务数据的工作。所有表都可以动态操作。

Syncfusion富文本编辑器提供了与Angular、React和Vue.js的集成。库的列表不是很大，但它包含了最流行的选项，这是一个优点。如果你想从事web前端开发，你可以从web前端培训课程开始，这是一个很好的起点。

了解更多

当我们要发送一份文稿时，Word 对于大部分用户而言都是首选应用。然而对于很多文字工作者而言，移动互联网让他们更加注重多平台云同步和协作，于是他们开始由 Wold 迁移到了类似于 Evernote 这样的云笔记应用。

可是说到这儿问题就来了：在电脑上，显示屏幕足够大，无论是打字还是排版都十分的便利。而在移动设备上，屏幕的局限性仅仅是打字就已经非常困难了，更不用提编辑排版了。

那么有没有什么方法能让我们更好地在移动设备上进行编辑排版呢？其实早就有很多先行者推荐使用 Markdown 这种标记语言进行写作了。

Markdown 的优势

Markdown 并不是任何一种编程语言，它是一种标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式，其特点在于轻量和易学习。仅仅需要使用一些符号标识，即可完成过去需要通过多次点按才能完成的格式编辑。Markdown 标记包括标题分级，加粗，斜体，引用文本，引用代码等等。详细使用方式如下图：

Markdown 使用规则

掌握 Markdown 的使用方法连 5 分钟都不需要，然后配合支持 Markdown 的工具，即编写出格式工整的文章。目前市面上支持 Markdown 的工具很多，甚至有一些云协作写作软件或平台也开始支持 Markdown 了。怎样才算是一款优秀的 Markdown 编辑器呢？钛媒体记者认为需要满足以下几个方面：

1. 界面简洁，功能简单
2. 支持云同步
3. 支持输出 HTML 页面

以记者们常使用的 Mac 平台为例，这些 Markdown 编辑器中，最负盛名的是 Ulysses。Ulysses 之所以会受到很多文字工作者的喜爱，是因为其简洁到极致的界面。打开应用，只需要敲下文字，无需任何设置——不用担心电脑宕机（虽然在 Mac 上极少发生），它会自动保存。同时 Ulysses 还有 iOS 应用，支持 iCloud 云同步，以及 Hand-off 功能。Hand-off 能用用户在离开了 Mac 之后，还能继续在移动设备上继续编辑文稿。而 iCloud 云同步的功能让用户能够在任何设备上继续编写自己的文稿。

Ulysses 界面

记者推荐的另一个编辑器是全平台通杀的 Bear。无论是 Mac 还是 Windows 甚至是 iOS 设备和 Android 设备，它统统支持。不过相较于 Ulysses 这种买断的方式，Bear 采用的是“付费订阅”的模式，付费用户才拥有跨平台同步以及多种格式的文稿导出等拓展功能。

Bear 界面

如果你需要一个支持 Markdown 的协作平台，那么钛媒体记者也推荐使用国内的协作平台“简书”。它不是一款单纯的写作工具，而是在线创作及发布平台。它既支持富文本也支持 Markdown。它既没有 Mac 端，也没有 Win 端的客户端，但它拥有 iOS 和 Android 手机客户端。用户只能在线写作。对于那些希望拥有云同步功能，但又不想花钱订阅 Bear 的 Win 用户而言，简书是个不错的选择。

国内的多人同步办公平台“石墨”以及国外的“quip” 同样也支持 Markdown 标记语言。如果你是一名 Evernote 的重度使用者，也可以选择“马克飞象”这样的付费订阅服务，将使用 Markdown 写出的文章同步到 Evernote 中。

微信快速排版也离不开 Markdown

推荐 Markdown 标记语言和工具的文章不胜枚举，钛媒体仅推荐了几款实用型较高的编辑器和平台。Markdown 的意义不仅仅在于能简化排版编辑，它还兼具另一个很多人没有发现的隐藏功能。

如果 Markdown 编辑器支持输出 HTML 文件，那么搭配 CSS 文本配置，完全可以实现“写稿-输出 HTML 文本-粘贴文本到微信公众号-发布”这样一个过程。而不用在完成写稿之后，再复制到各类在线微信公众号编辑器中进行二次修改的过程。这样一来能再一次极大地简化编辑排版的过程。

CSS 文本就是用来介绍文本字段换行、文本文字间间隔、文本缩进、文本文字上下排间隔等 DIV CSS 文本样式。使用 CSS 文本，用户不仅可以实现文字的排版，还能做小动画和绘制一些文字样式等等。

有些人会疑惑，既然有现成的在线微信排版编辑器为什么不使用呢？其实这个问题要回答起来很简单：微信排版编辑器所提供的样式有限，而且无论是采用何种排列组合的方式，一定会存在与其他的公众号相重合的可能性。同时，每一次都需要花费大量的时间去进行排版校正，调节详细的参数，这些动作是重复而无意义的。相较于在线编辑器，这种方式体验更好，效率更高。

如何做一套属于自己的“排版模板”

那么问题来了，如何写出一套自己心仪的微信排版模板呢？首先，需要了解 HTML 的基本标记；然后再花长一点的时间了解 CSS 的基本标记；最后打开一个支持 CSS 的编辑器，开始写属于自己的规范。

以钛媒体记者使用的 Mac 为例，在了解了 HTML 和 CSS 标记之后，笔者选择了“Bracket”作为 CSS 模板编辑器。因为 Bracket 能支持代码实时预览的功能。在编写模板的同时，你还可以通过参考其他的文章排版代码，对自己的排版进行修改。具体方法是在 Chrome 浏览器中打开其他文章，通过 Chrome 浏览器中的开发者工具，检查 CSS 代码。

Bracket 界面

在这个过程中，需要注意的一点是，排版所采用的每一个参数，比如字号，行间距等等都不是一成不变的，你可以拥有自己的特殊排版方式。在编写 CSS 模板的过程中，少不了反复地预览检查代码，编辑的过程。

以钛媒体记者使用的 Ulysses 为例，在编写完成后，导出 CSS 文本。点击“快速导出”，选择 HTML 格式，“样式”点击编写好的 CSS 模板，点击“预览”，在 Chrome 中打开预览文本。然后将这些文本复制到微信公众号后台，再插入配图，即可推送微信公众号文章了。

当然，以上是“自己动手丰衣足食”的方式。如果你身边有设计师和程序员朋友，你还可以这样做：

1. 找设计师给你设计一套漂亮的排版样式。
2. 让前端程序员将这套样式写成 css 模板。

让专业人士做专业的工作，这样效率最高。（本文独家首发钛媒体）

更多精彩内容，关注钛媒体微信号（ID：taimeiti），或者下载钛媒体App

tmlParse 是一款基于windwos平台的HTML文档解析工具，可快速构建DOM树，从而轻松实现网页元素的爬取工作。DOM树就是一个HTML文档的节点树，每个节点由：标签（Tag）、属性（Attribute）、文本（Text）三个值来描述。

所谓的HTML文档解析，指的就是如何构建一颗DOM树，只有成功构建出DOM树，才有可能进行后续的数据爬取和分析工作。显然，构建DOM树是比较复杂的过程，因为不是每一个HTML文档都会严格按照规范来书写，因此解析过程需要具有一定容错能力。此外，解析效率也是一个需要考虑的因素，也就是说最好通过一次文档扫描即可建立起DOM树，而不是反复扫描。

下面是HtmlParse介绍。

工具特点

1、绿色纯天然，无任何第三方依赖库，文件大小不到150K； 2、解析速度快，具有一定的HTML语法容错能力，可快速将HMTL文档解析为DOM树； 3、基于命令行参数，可通过不同参数获取指定TAG的属性值和文本内容，从而实现网页爬取功能； 4、可将爬取数据输出为json格式，方便第三方程序进一步分析和使用； 5、可爬取script脚本到指定的js文件中；

下载地址：http://softlee.cn/HtmlParse.zip

使用方法

HtmlParse HtmlPathFile -tag TagName [-attr] [Attribute] [-o] [JsonPathFile]

解析指定的HTML文档，并将文档中指定的标签及属性输出到指定文件中。

HtmlPathFile：必选参数，要解析的HTML文档路径名，如果文件路径中有空格，可使用双引号将文件路径包含；

-tag：必选参数，用于指定要抓取的HTML标签名称； -attr：可选参数，用于指定标签的属性值，如果不指定，则返回该标签的所有属性值； -o：可选参数，用于指定抓取内容输出的文件，可将抓取的内容保存为json格式的文件。 如果该参数不指定，则进行控制台输出。 如果抓取的是script、style则会保存为js格式文件。

如果要抓取doctype，可使用-tag doctype，将整个doctype内容获取。此时将会忽略-attr指定的任何属性值。

举例说明

1、爬取网页中所有超链接

HtmlParse c:/sina.html -tag a -attr href -o c:/sina.json

解析C盘下的sina.html文档，并提取该文档中的所有超链接到sina.json文件中。其中**-tag a -attr href，用于指定获取超链接标签a的href**属性。

2、爬取网页中所有图片链接

HtmlParse c:/sina.html -tag img -attr src -o c:/sina.json

解析C盘下的sina.html文档，并提取该文档中的所有图片链接到sina.json文件中。

3、爬取网页中所有脚本

HtmlParse c:/sina.html -tag script -o c:/sina.js

解析C盘下的sina.html文档，并提取该文档中的所有脚本函数到sina.js文件中。

输出内容

如果通过-o参数指定输出文件，则会生成一个json格式的文档。 TagName为爬取的标签名称，比如超链接的a，其值是一个json数组，数组中的每个内容为Json对象，每个Json对象，有属性和文本构成。如果-attr 指定了要爬取的属性，则AttrName为指定的属性名称，比如href或src。text为该标签的文本内容，有些标签不存在文本内容，比如img、meta等，则该值为空。json格式如下：

{
  "TagName":
  {
     {"AttrName":"AttrValue1", "text":"text1"}
     {"AttrName":"AttrValue1", "text":"text2"}
  }
}

下面是一个sina网页的所有超链接json

{
 "a": [{
  "href": "javascript：;",
  "text": "设为首页"
 }, {
  "href": "javascript：;",
  "text": "我的菜单"
 }, {
  "href": "https://sina.cn/",
  "text": "手机新浪网"
 }, {
  "href": "",
  "text": "移动客户端"
 }, {
  "href": "https://c.weibo.cn/client/guide/download",
  "text": "新浪微博"
 }, {
  "href": "https://so.sina.cn/palmnews/web-sinanews-app-download.d.html",
  "text": "新浪新闻"
 }, {
  "href": "https://finance.sina.com.cn/mobile/comfinanceweb.shtml",
  "text": "新浪财经"
 }, {
  "href": "https://m.sina.com.cn/m/sinasports.shtml",
  "text": "新浪体育"
 }, {
  "href": "https://tousu.sina.com.cn/about_app/index?frompage=heimaopc",
  "text": "黑猫投诉"
 }, {
  "href": "http://blog.sina.com.cn/lm/z/app/",
  "text": "新浪博客"
 }, {
  "href": "https://games.sina.com.cn/o/kb/12392.shtml",
  "text": "新浪游戏"
 }, {
  "href": "https://zhongce.sina.com.cn/about/app",
  "text": "新浪众测"
 }, {
  "href": "https://mail.sina.com.cn/client/mobile/index.php?suda-key=mail_app&suda-value=login",
  "text": "新浪邮箱客户端"
 }, {
  "href": "javascript：;",
  "text": "关闭置顶"
 }, {

来源：https://www.cnblogs.com/softlee/p/16374079.html