简单了解下UEditor的使用
目前网上的富文本编辑器多的可以说是数不胜数，但是百度的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页面上，一个完美的富文本编辑器就可以使用了。
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-05-07 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读