目前网上的富文本编辑器多的可以说是数不胜数,但是百度的UEditor可以算是其中的佼佼者,今天就简单的了解一下这款富文本编辑器。
下载:点击打开链接
其实几乎所有的富文本编辑器都是一样的模子,下载的时候分为好几个版本的,您可以根据需要自己下载对应的版本,其中有一个源码的版本是集成了所有的版本,相对的文件比较大一些,如图所示:
下载好了解压以后是这样的:
想要看效果很简单,创建一个demo.html,代码是这样的:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>ueditor demo</title> <link rel="stylesheet" type="text/css" href="themes/default/_css/ueditor.css"/> </head> <style> div{width:80rem; height: 30rem;} </style> <body> <div> <!-- 加载编辑器的容器 --> <script id="container" name="content" type="text/plain"> </script> </div> <!-- 配置文件 --> <script type="text/javascript" src="ueditor.config.js"></script> <!-- 编辑器源码文件 --> <script type="text/javascript" src="ueditor.all.js"></script> <!-- 实例化编辑器 --> <script type="text/javascript"> var ue = UE.getEditor('container'); </script> </body> </html>
PS:下载的源码版的里面是没有ueditor.all.js的文件的,您可以自己下载一个去网上,也可以直接下载PHP版本的,里面带的是有的,最后的效果是这样的:
如果您的效果迟迟调不出来的话,有以下几个可能:
第一:打开F12调试工具,看一下console里面的提示,如果提示丢失文件,就找对应的文件就行了。
第二:引用的css路径不正确,导致没有样式。
这里是可以看到的。
最后没有什么问题的时候,基本就可以了,可以直接应用到H5页面上,一个完美的富文本编辑器就可以使用了。想更多交流的可以加微信。