富文本编辑器分享哪个好用?富文本编辑器推荐

富文本


富文本是管理后台一个核心的功能,但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路,市面上常见的富文本都基本用过了,最终权衡了一下选择了Tinymce。 


 这里在简述一下推荐使用 tinymce 的原因:tinymce 是一家老牌做富文本的公司(这里也推荐 ckeditor,也是一家一直做富文本的公司,新版本很不错),它的产品经受了市场的认可,不管是文档还是配置的自由度都很好。


在使用富文本的时候有一点也很关键就是复制格式化,之前在用一款韩国人做的富文本 summernote 被它的格式化坑的死去活来,但 tinymce 的去格式化相当的好,它还有一些增值服务(付费插件),最好用的就是powerpaste,非常的强大,支持从 word 里面复制各种东西,而且还帮你顺带格式化了。


富文本还有一点也很关键,就是拓展性。楼主用 tinymce 写了好几个插件,学习成本和容易度都不错,很方便拓展。最后一点就是文档很完善,基本你想得到的配置项,它都有。tinymce 也支持按需加载,你可以通过它官方的 build 页定制自己需要的 plugins。



常见富文本


我再来分析一下市面上其它的一些富文本:


文章来源地址https://www.toymoban.com/diary/share/253.html

summernote 先来说一个我绝对不推荐的富文本。这是一个韩国人开源的富文本(当然不推荐的理由不是因为这个),它对很多富文本业界公认的默认行为理解是反其道而行的,而且只为用了一个 dialog 的功能,引入了 bootstrap,一堆人抗议就是不改。格式化也是差劲。。反正不要用!不要用!不要用!


ckeditor ckeditor 也是一家老牌做富文本的公司,楼主旧版后台用的就是这个,今年也出了 5.0 版本,ui 也变美观了不少,相当的不错,而且它号称是插件最丰富的富文本了。推荐大家也可以试用一下。


quill 也是一个非常火的富文本,长相很不错。基于它写插件也很简单,api 设计也很简单。楼主不选择它的原因是它对图片的各种操作不友善,而且很难改。如果对图片没什么操作的用户,推荐使用。


medium-editor 大名鼎鼎的 medium 的富文本(非官方出品),但完成度还是很不错,拓展性也不错。不过我觉得大部分用户还是会不习惯 medium 这种写作方式的。


squire 一个比较轻量的富文本,压缩完才 11.5kb,相对于其它的富文本来说是非常的小了,推荐功能不复杂的建议使用。


wangEditor 一个国人写的富文本,用过感觉还是不错的。不过毕竟是个人的,不像专门公司做富文本的,配置型和丰富性不足。前端几大禁忌就有富文本 为什么都说富文本编辑器是天坑?,不过个人能做成这样子很不容易了。


百度 UEditor 没有深入使用过,只在一个 angular1X 的项目简单用过,不过说着的 ui 真的不好看,不符合当今审美了,官方也已经很久没更新过了。


slate 是一个 完全 可定制的富文本编辑框架。通过 Slate,你可以构建出类似 Medium、Dropbox Paper 或者 Canvas 这样使用直观、富交互、体验业已成为 Web 应用标杆的编辑器。同时,你也无需担心在代码实现上陷入复杂度的泥潭之中。看起来很酷,以后有机会我会在项目中实践试用一下。


楼主列举了很多富文本但并没有列举任何 vue 相关的富文本,主要是因为富文本真的比想象中复杂,在前面的文章里也说过了,其实用 vue 封装组件很方便的,没必要去用人家封装的东西。什么 vue-quill vue-editor 这种都只是简单包了一层,没什么难度的。还不如自己来封装,灵活性可控性更强一点。还有一点基于 vue 真没什么好的富文本,不像 react 有 facebook 出的 draft-js,ory 出的 editor,这种大厂出的产品。


当然你也可以选择一些付费的富文本编辑器,作者自己公司里面有一个项目就使用了 froala-editor 这款编辑器。不管是美观和易用性都是不错的,公司买的是专业版,一年也就 $349 ,价格也是很合理的,但其实省去的程序员开发成本可能远不止这个价钱。



到此这篇关于富文本编辑器分享哪个好用?富文本编辑器推荐的文章就介绍到这了,更多相关内容可以在右上角搜索或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://www.toymoban.com/diary/share/253.html

如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用
如何申请美区Google Adsense及提款到国内银行卡以及Google Adsense常见解决(适用于国区)
上一篇 2023年08月19日 16:46
下一篇 2023年08月19日 16:46

相关文章

  • 【无标题】PDF编辑软件哪个好用?4款PDF编辑器分享!

    PDF编辑软件哪个好用?在我们的日常办公中,编辑PDF文件是非常方便的一项功能。通过编辑PDF,我们可以对文档进行修改和调整,添加或删除内容,以及进行格式和布局的更改。这样,我们可以更好地符合我们的需求和要求。此外,还可以帮助我们改善文档的可读性和专业性

    2024年02月02日
    浏览(83)
  • python编辑器安装与配置,python用哪个编辑器好用

    大家好,给大家分享一下python编辑器pycharm安装教程,很多人还不知道这一点。下面详细解释一下。现在让我们来看看! 编写python源代码的软件.首推的Pycharm。 PyCharm用于bai一般IDE具备的功能,比如, 调试、语法高亮、Project管理、du代码跳转、智能提示、自动完zhi成、单元测试

    2024年02月13日
    浏览(59)
  • 手机上好用的python编辑器,手机python编辑器哪个好

    本篇文章给大家谈谈手机软件编辑器中文版python,以及手机上好用的python编辑器,希望对各位有所帮助,不要忘了收藏本站喔。 如果你是个对编程比较感兴趣或者正走在这条康庄大道上的技术宅,那我强烈向你推荐以下神器,对于没资金买电脑的人来说是一个福音,因为它实

    2024年04月14日
    浏览(52)
  • 六个好用的在线代码编辑器,你选哪个?

    CodeSandbox CodeSandbox 是一个在线代码编辑器,主要用于创建 Web 应用项目,其提供了多种模块: CodeSandbox 为前端开发提供了完整的代码编辑器体验和沙盒环境。其包含了很多实用功能: Npm 支持:可以添加几乎任何 npm 上可用的包; 支持 TypeScript、热更新、GitHub 导出、静态文件

    2024年02月04日
    浏览(64)
  • 6款常用且好用的Python编辑器推荐!

    用Python写代码的时候,最重要的就是选择一款得心应手的编辑器,这样不仅能够让工作更简单、更高效,同时还可以提高我们的编码体验和效率,达到事半功倍的效果。本文为大家介绍常用Python编辑器,你钟爱哪一个? 1、PyCharm PyCharm由著名软件开发公司JetBrains开发。在涉及人

    2024年02月16日
    浏览(56)
  • 推荐几款主流好用的markdown编辑器

    随着技术的不断发展和人们对效率的追求,Markdown 编辑器已经成为了许多人写作的首选工具。Markdown 是一种轻量级的标记语言,使用简单,方便快捷,且可以方便地转换成各种格式的文件。在这篇文章中,我们将介绍几款常用的 Markdown 编辑器,并分析它们的优缺点。 1、VS

    2024年02月11日
    浏览(63)
  • Macos 有没有好用的文本编辑器,试下 Notepad--

    macos 是挺好用的,国内用户不少,许多用户给我留言,说国产的Ndd可以支持mac os吗?能够带来如npp一般的体验吗?我说当然可以啊,是许多人还惯性停留在“国产就是抄袭,国产就是烂”的陈旧惯性思维中。中国的希望应该是在80 90后这批人身上的,把国外软件替换出去,那

    2024年02月15日
    浏览(45)
  • HTML 编辑器的介绍及推荐

    HTML 编辑器是用于编写 HTML 的工具,使用 HTML 编辑器时以编辑主题,索引,自定义窗口,选择添加搜索页。 下列是三种专门用于编辑 HTML 的 HTML 编辑器: Adobe Dreamweaver Microsoft Expression Web CoffeeCup HTML 编辑器 不过,我们同时推荐使用文本编辑器来学习 HTML,比如 Notepad(PC)或

    2024年02月12日
    浏览(46)
  • 【HTML】标签读取富文本编辑器的内容

    1.正确读取富文本内容示例: 代码:  显示结果:  在这个例子中, {$row.content}  是直接输出从数据库中获取的富文本内容,包括可能存在的HTML标签和属性,这样可以确保富文本能够按照预期样式呈现。 2. 错误读取富文本内容示例及其原因分析:  代码:  显示结果: 分析

    2024年02月02日
    浏览(49)
  • HTML——实现富文本编辑器wangEditor的使用

    背景:最近在写小说项目,关于发布文章需要用到富文本编辑器,由于还没学到Vue,最实用的还是用wangEditor富文本编辑器。 官方文档:http://www.wangeditor.com/ 使用手册:创建一个编辑器 · wangEditor3使用手册 · 看云 (kancloud.cn) 至于实现的方式有三种: 一.导入wangEditor.JS 使用方法

    2024年02月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包