web可嵌入编辑器汇总

web编辑器

代码编辑器

Ace

官网地址：Ace - http://ace.c9.io

Github: GitHub - https://github.com/ajaxorg/ace/

vue版：GitHub - https://github.com/chairuosen/vue2-ace-editor

常用Api:http://t.zoukankan.com/yinian-p-10282018.html

配置项:https://blog.csdn.net/qq_26399287/article/details/124713511

CodeMirror

官网：https://codemirror.net/

vue-codemirror github 地址： https://github.com/surmon-china/vue-codemirror

codemirror 中文文档：https://olindk.gitbooks.io/codemirror/content/configuration.html

codemirror 英文文档：https://codemirror.net/doc/manual.html#config

常用API https://blog.csdn.net/songshuzhong/article/details/80678370

Monaco Editor

github: https://github.com/microsoft/monaco-editor

三个编辑器对比

三个编辑器对比

富文本编辑器

推荐使用 wangEditor

官网：https://www.wangeditor.com/

文档：www.kancloud.cn/wangfupeng/wangeditor3/332599

源码：github.com/wangfupeng1988/wangEditor

https://github.com/quilljs/quill star: 33.8k 轻型的编辑器

https://github.com/wangeditor-team/wangEditor star 14.6k

https://github.com/summernote/summernote star: 10.9k

https://github.com/tinymce/tinymce star: 12k

https://github.com/ckeditor/ckeditor5 star: 6.4k

https://github.com/fex-team/ueditor star: 6.2k

https://github.com/kindsoft/kindeditor star: 1.8k

https://github.com/mycolorway/simditor star: 5k

https://github.com/steveathon/bootstrap-wysiwyg star: 647

https://www.csdn.net/tags/MtTaYg2sMDg2NjMtYmxvZwO0O0OO0O0O.html

1、UEditor 百度的。

优点：插件多，基本满足各种需求，类似贴吧中的回复界面。

缺点：不再维护，文档极少，使用并不普遍，图片只能上传到本地服务器，如果需要上传到其他服务器需要改动源码，较为难办，加载速度慢。

总结：小项目，可以用用，不推荐使用。

http://ueditor.baidu.com/website/

2、kindeditor

界面类似百度，效果很像

文档齐全但用例较少，使用还算方便。

缺点：总感觉样子不是很好看，没有现代那种风格，还是老式的传统图标。

http://kindeditor.net/demo.php

3、simditor

样式好看，插件不多，基本满足需求

文档英文，使用较为吃力，如果英文水平不好的话

github上面开源，维护较好

因为文档看起来吃力，所以本人没有考虑继续使用。

http://simditor.tower.im/

4、bootstrap-wysiwyg

利用bootstrap实现的，简洁大方好看。

优点：轻量，好看，使用方便。

缺点：需要一定的浏览器支持，毕竟需要bootstrap

http://www.bootcss.com/p/bootstrap-wysiwyg/

5、wangEditor

js和css实现

优点：轻量简洁，最重要的是开源且中文文档齐全。设计的UI漂亮。

插件基本能满足需求，本人推荐使用。

http://www.wangeditor.com/index.html

6、CKEditor

功能强大，使用较多，可以看他们官网的例子，马上就有感觉。

优点：编辑能力极强，基本和word差不多了。看起来界面极其优秀的一款。

缺点：网站访问速度一般，文档英文，需要花时间开发。

http://ckeditor.com/

7、tinymce

支持图片在线处理，插件多，功能强

编辑能力优秀，界面好看。

同样文档为英文，开发需要花时间。

https://www.tinymce.com/

使用之前需要考虑的点：

• 1. 需要插件，是否需要很多的插件，还是说简单的那些功能就行了。
• 2. 界面考虑，看你喜欢那个界面了。
• 3. 图片是否需要上传图片服务器。
• 4. 文档如果为英文是否会影响开发。
• 5. 支持浏览器类型和版本。

8、summernote

summernote是一款轻量级的富文本编辑器，比较容易上手，使用体验流畅，支持各种主流浏览器。summernote开源免费，该项目一直比较活跃，一直都有人在维护。

summernote同样依赖于jquery和bootstrap，使用前先引入这两项。

更多介绍及下载：https://summernote.org/

9、Froala

Froala是一款功能丰富的富文本编辑器，界面分类清晰，容易集成，容易升级，支持主流浏览器，具有行内编辑功能。Froala代码示例很多，可以集成在很多js框架里如React.js，Aurelia，Angular，Ionic，Django等。插件很多，易于扩充功能。

Froala是收费的，不过前端是开源的，如果要使用后台是要交费的（如果你使用国人强大的crack技能那就是另外一回事了~ ~）。目前有三个定价方式：基础版（239美元）、专业版（1199美元）和企业版（1999美元）。

更多介绍及下载：https://www.froala.com/wysiwyg-editor

10、Quill

Quill是轻型的编辑器，样式一般（黑白风），功能中等，它的代码高亮功能比较强，同样支持行内编辑模式，工具条可自定义。

开源免费，项目活跃，一直有人维护。

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

11、FreeTextBox

FreeTextBox功能强大，前端支持主流浏览器，但后台只支持.NET。它的外观和使用风格都和微软 Word很类似。工具条可以定制，运行速度一般。FreeTextBox分为免费版和pro收费版，一般情况免费版本功能已经足够用了。

更多介绍及下载：http://freetextbox.com/

12、dhtmlxEditor

DHTMLX组件是一整套基于JS的UI库，功能强大，其中包含编辑器dhtmlxEditor。该编辑器可以直接集成到Angular，React和Vue.js框架中，该编辑器还同时支持Markdown和富文本。

支持普通视图和类似word一样的页面视图，支持全屏幕，工具支持自定义，包括工具条颜色和样式等。

dhtmlxEditor分为免费版和收费版，免费版具有绝大多数功能，而且免费版是开源的你可以在代码级别随便扩充。

更多介绍及下载：https://dhtmlx.com/docs/products/dhtmlxRichText/

13、eWebEditor

eWebEditor外观和使用风格都和微软 Word很类似，功能很多。工具条可以定制，运行速度很快。导入文件接口很多，支持word、excel、pdf、ppt直接导入，目前版本不支持代码高亮，不适合纯技术平台使用，适合内容编辑人员使用。

eWebEditor有很长的历史了，是典型的传统富文本编辑器，不论是界面，还是功能都比较传统。

eWebEditor是收费的，但也有免费的精简版，精简版没有后台功能。

更多介绍及下载：http://www.ewebeditor.net/demo/

Markdown编辑器

推荐使用：
https://github.com/hinesboy/mavonEditor 5.8k

https://github.com/adam-p/markdown-here 56.9k

1、前言

Markdown编辑器

Markdown 其实在 2004 年就有了，不过之前一直很小众，这几年随着相关应用平台的发展，Markdown以其独到的优势迅速火起来了。Markdown编辑器使用一套格式标记语言来对文档内容进行排版和格式显示。而Markdown的标记很少，常用的也就十个左右，它是一种非常轻量的标记语言。

Markdown编辑器深受技术人员的喜爱，Markdown可以用来编写说明文档，用它写的文档很多技术平台都能通用；Markdown可以用来写技术博客，可以使说明部分和代码都非常清晰易读；Markdown格式转换方便，还可以轻松地将文本转换为 html、pdf等。

Markdown编辑器分类

按照Markdown编辑器的使用环境，可以将它们归纳为三类。

平台集成工具：各大在线博客、社区平台自带的写作工具，比如CSDN、博客园、简书等。

独立软件类：下载到自己机器上使用的独立产品，可以编辑本地文件，比如Mou、MarkdownEditor、Haroopad等。

插件类：他自己本身是不能独立使用的，可以在你现有的主流编辑器安装，使你现有的编辑器具有Markdown的功能，比如Atom、WebStorm、Sublime Text等。

这三类软件分别面向三类Markdown用户，大家可以根据自己的需求来选择使用。

下面是我收集的一些业界比较受欢迎的Markdown编辑器，喜欢用Markdown的朋友可以一起看看，一起探讨。

2、编辑器推荐

1、Mou

Mou 是一款由国人开发的Markdown 编辑器，支持实时预览，但是仅支持 苹果操作系统，可以说是目前最好用的免费 Markdown 编辑器，对汉字兼容性非常好。提供语法高亮、在线预览、同步滚动、全屏模式，支持自定保存、自动匹配，允许自定义主题等等。支持 CSS，HTML 和 PDF 导出等功能。

Mou是独立的软件。更多介绍及下载：Account Suspended

２、MarkdownPad

MarkdownPad被很多人称赞为windows下最好用的Markdown编辑器之一，不过仅支持windows。它有免费版和收费版（MarkdownPad Pro），一般情况下免费版就够用了，想用pro版的可以自行网上下载，强大的国人crack无处不在的~ ~。

MarkdownPad支持键盘快捷键和工具栏操作，即可添加标记也可移除，支持即时HTML预览、支持自定义配色方案、字体、大小和布局、支持音乐视频，可以导出HTML和PDF。

MarkdownPad是独立的软件。更多介绍及下载：The Markdown Editor for Windows

３、Typora

Typora也是非常用名，非常好用的markdown编辑器，它的设计理念很不一样，是真正的即时预览型编辑器，不同于左右两个窗口的编辑器。Typora的设计理念就是极致简洁，它将「写字」和「预览」这两件事情合并了。

如果要修改已经写好的markdown标记可以点击切换到“源代码模式”。

Typora 同样支持 Windows、OS X 和 Linux多个操作系统，支持数学编辑，可与 Word 直接格式转换，可以进行多种文档格式转换。Typora 流畅度和反应速度很快，特别适合那些手速快的人。

Typora是独立的软件。更多介绍及下载：https://www.typora.io/

4、Atom

Atom 可以说是专门为程序员推出的一个文本编辑器，界面简洁，支持实时预览。功能非常多，除了Markdown同时支持CSS，HTML，JavaScript等网页编程语言，还支持宏定义，自动分屏功能等。Atom还具有语义输入模式，比例输入code即会自动开启代码模式。

Atom支持windows、苹果、linux等多种操作系统。Atom是由著名的github平台出品的。

Atom是独立的软件，也支持插件方式。更多介绍及下载：A hackable text editor for the 21st Century

5、Haroopad

Haroopad 也是一款非常流行的编辑器，来自韩国。Haroopad支持 Windows、Mac OS X 和 Linux三大操作系统。Haroopad的特色是主题样式丰富，语法高亮支持无数种编程语言，几乎你能想到的编程语言他都支持。Ubuntu/Linux 用户使用该工具比例很高，Haroopad 也是开源免费的。Haroopad也支持导出HTML、PDF，也支持数学公式和流程图。

Haroopad是独立的软件。更多介绍及下载：Haroopad - The Next Document processor based on Markdown

6、SublimeText

SublimeText 界面简约大方，定位专业，功能强大，并具有良好的扩展功能。SublimeText是收费软件，支持windows、苹果、linux三大操作系统。支持的编程语言有十几种，并可通过第三方插件无限扩充。

SublimeText默认不能实时预览，但通过 Markdown Preview 的插件来实现该功能。SublimeText屏幕右边有一个文档缩略图，可以看到文档全貌。

SublimeText是独立的软件，也支持插件方式。更多介绍及下载：Sublime Text - the sophisticated text editor for code, markup and prose

7、Cmd Markdown

Cmd Markdown是一款不错的写作工具，同时也兼顾博客等写作平台，国内作业部落出品，同时支持Windows、苹果、Linux操作系统，也有 Web 在线创作平台，界面很舒服。

Cmd Markdown是独立的软件、也有平台集成版本。

更多介绍及下载：Cmd Markdown 编辑阅读器 - 作业部落出品

8、Byword

Byword 是一款轻量级的 Markdown 编辑器，比较容易上手，适合新手使用。支持苹果系列系统，包括台式机、iPad和iPhone，收费软件。

Byword是独立的软件。更多介绍及下载：Markdown text editor app for Mac, iPhone and iPad.

9、CuteMarkEd

CuteMarkEd 是一个基于qt5的Markdown 编辑器，开源免费，支持windows、苹果、linux多种系统平台，提供实时 HTML 预览、数学表达式、代码高亮和PDF导出。

CuteMarkEd是独立的软件。更多介绍及下载：The open source, cross-platform Markdown editor

10、Dillinger

Dillinger 是国外的 Markdown 编辑器，Web在线创作。漂亮强大，支持md、 html、pdf 文件导出，支持Dropbox、Bitbucket、Github、Google Drive、Onedrive 一键保存，也可以编写本地文件。支持实时预览，跨平台，浏览器打开。

Dillinger是平台集成工具，不是独立的软件。更多介绍及下载：https://dillinger.io/

11、EpicEditor

EpicEditor 是个嵌入式 JavaScript Markdown 编辑器，可以全屏编辑，在线预览，自动草稿保存，支持离线等功能。对于开发者有很大吸引力，很容易集成在自己的系统中，并很容易自定义，也支持主题自定义。

EpicEditor属于插件类的API工具。更多介绍及下载：http://ww1.epiceditor.com/

12、MarkdownEditor

MarkdownEditor 是一款基于浏览器的 Markdown 编辑器，虽然他是独立软件，但该软件内嵌一个浏览器。功能非常简单实用、反应速度很快，号称是Markdown领域的NotePad（记事本）。MarkdownEditor还有拼写检查功能。

MarkdownEditor有两个版本，都是国人开发的，都是开源免费的。

MarkdownEditor是独立的软件、也有在线Web集成版。

更多介绍及下载：Markdown Editor

13、MarkPad

MarkPad是免费开源的 Markdown 编辑器，界面风格与window系统类似，同时只支持Window。支持实时预览，开放直接保存到你的博客或github的接口，有语法检查，支持代码高亮。

MarkPad是独立的软件。更多介绍及下载：MarkPad

14、Marxico

Marxico 中文名马克飞象，有桌面版、Chrome App插件，也支持Web集成版。这款编辑器的特点是可以直接把文本存到印象笔记平台中，另外还有导出HTML时可以将其中的图片自动转成base64保存。其他的实时预览、语法高亮也都支持。

不过这款软件是收费的~ ~

Marxico是独立的软件、同时有Chrome App插件，也支持Web集成。更多介绍及下载：Markdown Editor for Evernote

3、最后

markdown编辑器产品非常多，以上只是本人接触过的一些，相信还有很多很好的markdown存在，其实也没必要全都试一遍，只有最适合自己的，才是最好的。