发表于: 2019-10-17 23:35:00

1 897


今天完成的事:

完成新增页面上传图片、进度条、图片预览功能

明天计划的事:

继续任务6-10

遇到的问题:

暂无

收获:

了解各富文本编辑器组件区别

富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。
富文本编辑器不同于文本编辑器,程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里(当然付费的功能会更强大些),方便用户编辑文章或信息。比较好的文本编辑器有kindeditor,fckeditor等。

常见富文本

市面上其它的一些富文本:

  • 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 应用标杆的编辑器。同时,你也无需担心在代码实现上陷入复杂度的泥潭之中。看起来很酷,以后有机会我会在项目中实践试用一下。


quill富文本组件

使用应作为编辑器的div的css选择器实例化一个新的Quill对象。

<!-包括羽毛笔样式表->
<链接 href = https://cdn.quilljs.com/1.0.0/quill.snow.css rel = 样式表 >
<!-创建工具栏容器->
< div id = toolbar >
< button class = ql-bold >加粗</ button >
< button class = ql-italic >斜体</ button >
</ div >
<!-创建编辑器容器->
< div id = editor >
< p >世界你好!</ p >
</ div >
<!-包括Quill库->
< script src = https://cdn.quilljs.com/1.0.0/quill.js > </ script >
<!-初始化羽毛笔编辑器->
<脚本 > VAR编辑= 奎尔' #editor ',{ 模块 {工具栏 ' #toolbar ' }, 主题 '' });</ 脚本 >





返回列表 返回列表
评论

    分享到