发表于: 2019-07-28 21:59:30

1 876


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 
明天计划的事情:(一定要写非常细致的内容) 
遇到的问题:(遇到什么困难,怎么解决的) 
收获:(通过今天的学习,学到了什么知识)

什么是富文本编辑器

在做Web应用时,经常会进行富文本编辑,常用的富文本编辑器有很多, 比如CuteEditor、CKEditor、NicEditor、KindEditor、UEditor等等。 好的富文本编辑器可以让我们用户有更好的体验效果,带来更多的用户好评。

Mditor

Mditor是一款轻量级的文本编辑器,实际上是markdown编辑器,即把文本的格式用 markdown语法表示出来,进行网络传输。这个编辑器的有点是引用非常简单,轻量级,转化为 的markdown格式可以把文本格式占用的存储空间降低很多,非常易于网络传输。

Mditor使用步骤

步骤一:引入 Mditor 样式文件

<link rel="stylesheet href="../css/mditor.min.css" />

步骤二:引用 Mditor 脚本文件

<script src="../js/mditor.min.js"></script>

步骤三:添加 textarea 元素

<textarea name="editor" id="editor">

步骤四:创建 Mditor 实例

var mditor = new Mditor("#editor",{

height:300,

fixedHeight:true

});

Mditor编辑器的局限性

只适合简单的文本排版,不支持复杂的表情输入、图片排版、格式刷等等功能, 如果需要使用复杂功能,最好还是使用UEditor、wangEditor等富文本编辑器

MARKDOWN语法的简单介绍

Markdown语法最大的优点是易读易写。 可读性,无论如何,都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布, 并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法的目标是:成为一种适用于网络的书写语言。

通俗点的说法即是Markdown语法通过使用一些简单的符号来将文本的排版表现出来,实现了对文本格式存储数据量的简化,它和html有很好的兼容性可以相互转化,比如markdown中使用#符号来表示html中的<h1></h1>标签,用一对*围在内容两边来表示<strong></strong>。 

富文本编辑器有很多种,每一种都有优点和缺点。

1、UEditor 百度的。

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

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

总结:小项目,可以用用。 

2、kindeditor

界面类似百度,效果很像

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

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

3、simditor

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

文档英文,使用较为吃力。

github上面开源,维护较好。

4、bootstrap-wysiwyg

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

优点:轻量,好看,使用方便。

缺点:需要一定的浏览器支持,毕竟需要bootstrap

5、wangEditor

js和css实现

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

插件基本能满足需求。

6、CKEditor

功能强大,使用较多,可以看他们官网的例子。

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

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

7、tinymce

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

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

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

使用之前需要考虑的点:

1需要插件,是否需要很多的插件,还是说简单的那些功能就行了。

2界面考虑,看你喜欢那个界面了。

3图片是否需要上传图片服务器。

4文档如果为英文是否会影响开发。

5支持浏览器类型和版本。



返回列表 返回列表
评论

    分享到