整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML编辑器可以将你写的东西转换成HTML代码，可以对你的文字进行包装，让它看起来更有趣一点，创建完成之后，可以将生成的代码应用在你的博客网站上……
在线HTML编辑器
https://htmleditor.io/
接下来我们来看一下它的使用，创建一个表格，选择表，并选中你所要增加的行列数，就可以进行添加了，在右边也能看到生成的代码了。
插入代码，支持多种语言语法高亮……
可以插入媒体，图片等，并进行样式控制……
文本编辑器，Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能，容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱。它的应用也越来越广泛。
网址：http://ueditor.baidu.com/website/
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。
UEditor推出后帮助网站开发者在开发富文本编辑器所遇到的难题，节约开发时间，有效降低了开发成本。
网址：http://ckeditor.com/
CKEditor是新一代的FCKeditor，是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。它志于轻量化，不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。
网址：http://kindeditor.net/
KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
主要特点：
快速：体积小，加载速度快
开源：开放源代码，高水平，高品质
底层：内置自定义 DOM 类库，精确操作 DOM
扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能
风格：修改编辑器风格非常容易，只需修改一个 CSS 文件
兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Opera
网址：https://www.tinymce.com/
TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，支持目前流行的各种浏览器，由JavaScript写成。功能配置灵活简单（两行代码就可以将编辑器嵌入网页中），支持AJAX。另一特点是加载速度非常快，如果你的服务器采用的脚本语言是 PHP，那还可以进一步优化。最重要的是，TinyMCE是一个根据LGPL license发布的自由软件，你可以把它用于商业应用。
网址：http://simditor.tower.im/
Simditor 是团队协作工具 Tower 使用的富文本编辑器。Tower 认为，作为一款在线生产力工具，让用户能极其舒畅地生产内容是它的核心品质之一，因此决定自己开发一款编辑器，这就是 Simditor 产生的原因。Simditor的理念是保持简单，避免过度的功能，每一个特性都追求极致的用户体验。同时，Simditor也很容易扩展。
主要特点：
功能精简，加载快速
输出格式化的标准 HTML
每一个功能都有非常优秀的使用体验
兼容的浏览器：IE10+、Chrome、Firefox、Safari
网址：http://www.ewebeditor.net/
eWebEditor是基于浏览器的、所见即所得的在线HTML编辑器。她能够在网页上实现许多桌面编辑软件（如：Word）所具有的强大可视编辑功能。WEB开发人员可以用她把传统的多行文本输入框<TEXTAREA>替换为可视化的富文本输入框，使最终用户可以可视化的发布HTML格式的网页内容。
网址：http://www.wangeditor.com/
wangEditor的定位是做最简单、易用、快捷、轻量化的富文本编辑器。基于javascript和css开发的开源免费Web富文本编辑器。它经历了两次代码重构和五次UI升级。配置方便，使用简单。支持 IE10+ 浏览器。
网址：http://xheditor.com/
xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器。
xhEditor完全基于Javascript开发，您可以应用在任何的服务端语言环境下。
xhEditor可以在CMS、博客、论坛、商城等互联网平台上完美的嵌入运行，能够非常灵活简单的和您的系统实现完美的无缝衔接。
自2009年4月首个版本发布以来，凭借我们人性化的用户体验和不断持续完善的态度，越来越多的网站选择了使用xhEditor。
主要特点：
精简迷你：初始加载65k。若gzip压缩传输，缩减为24k左右。
使用简单：简单的调用方式，就能将您的textarea立马变成一个可视化编辑器。
无障碍访问：提供WAI-ARIA全面支持，全程语音向导，让残疾人也能使用。
内置Ajax上传：内置强大的Ajax上传，剪切板上传及远程抓取上传。
Word自动清理：实现Word代码自动检测并清理。
UBB可视化编辑：提供完美的UBB可视化编辑解决方案。
网址：http://www.bootcss.com/p/bootstrap-wysiwyg/
为Bootstrap定制的微型所见即所得（What you see is what you get）富文本编辑器。轻量、简洁大方好看、使用方便。
网址：https://quilljs.com/
Quill 是一个开源的富文本编辑器，基于可扩展的架构设计，提供丰富的 API 进行定制。一个可以帮助开发人员解决所见即所得的编辑器工具，该编辑器旨在通过自身的编辑模块提供强大的API来构建自定义式的编辑器，最重要的是它没有规定样式，你可以自定义自己的编辑器以符合自己的使用需求。
为一名技术工作者, 我们经常会遇到编写技术文档, 技术分享等需求, 网上也有很多现成的文档管理工具, 出于好奇心, 我拉着朋友一起实现了一个, 用来自给自足. 接下来就来介绍一下轻量级且灵活方便的文档编辑工具—— powerNice.
powerNice 提供两种方式来编写文章/文档, 即程序员最喜欢的 markdown, 也可以使用非技术人员最容易上手的富文本编辑器.
实现 powerNice 在线文档编辑器我们采用如下核心技术栈: - React - Ant Design - Dva - For-editor - Braft-editor - Nodejs - 浏览器指纹识别技术
多模式编辑主要是指我们可以用富文本和md编辑器来编辑我们的文章, 我们采用最熟悉的 React 来实现, 效果如下:
2. 多主题
目前支持2套主题, 浅色和深色, 主要从用户体验的角度方便用户夜间写作. 效果如下: 1. 深色
2. 浅色
3. 支持一键导入导出
为了提高我们的写作效率以及对文章的多路复用, 我们提供了一键导入导出文件等功能, 具体如下:
使用截图如下:
下载的html内容预览如下:
还原度还是非常高的~
4. 多模式预览
多模式预览主要是右侧的预览区, 我们支持手机端预览和pc端预览, 如下图:
5. 字数行数统计
字数行数统计主要是帮助作者做内容统计, 这块实现不是很难, 我们看看预览效果:
6. 文章管理
文章管理主要是管理用户编写的内容, 这里因为我们做的是线上工具, 用户识别主要采用浏览器指纹识别技术来区分用户, 用户可以轻松在编辑器文章列表中切换文章进行编辑, 效果如下:
核心技术实现
1. 导入导出多类型文件
{ name: 'file', showUploadList: false, beforeUpload(file: any): any { const reader = new FileReader() reader.onload = function(e: Event) { const data = (e as any).target.result if (editor === 'richText') { // ... } else { // ... } } reader.readAsText(file) }, }
核心代码如下:
const doc = document.querySelector('.for-markdown-preview') as HTMLElement const html = createMDHtml(doc.innerHTML, article) file = new File([html], `${moment().format('YYYYMMDDHHmmss')}.html`, { type: 'text/html;charset=utf-8' }) // 下载文件 saveAs(file)
2. 基于浏览器指纹识别技术的用户识别
浏览器指纹这块知识点涉及的比较多, 笔者这里简单介绍一下canvas指纹.
Canvas指纹是利用系统之间, 字体渲染引擎, 抗锯齿、次像素渲染等处理方式的差异而实现的一种指纹识别技术. 我们使用canvas将同样的文字转成图片, 即便使用Canvas绘制相同的元素，但由于上述的差别得到的结果也是不同的。
所以我们可以利用以上技术, 对不同用户浏览器进行识别, 从而区分用户(虽然存在概率事件), 实现无需登录就能保存对应内容的目的. 基本实现代码如下:
createFingerprint = () => { const canvas = document.getElementById('anchor-uuid') as HTMLCanvasElement const context = canvas.getContext('2d') as CanvasRenderingContext2D context.font = '18pt Arial' context.textBaseline = 'top' context.fillText('hello, user.', 2, 2) const fingerprint = canvas.toDataURL('image/jpeg') // hash const secret = 'nice' const hash = crypto.createHmac('sha256', secret) .update(fingerprint) .digest('hex') return hash }
大家也可以参考此方法来设计自己的指纹识别方案.
在线体验: 传送门
最后
目前笔者也在持续更新H5编辑器 H5-Dooring, 近期更新如下:
觉得有用 ？喜欢就收藏，在 “趣谈前端”，发现更多有趣的H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战.
*请认真填写需求信息，我们会在24小时内与您取得联系。
