检测到您启用了Adblock等屏蔽广告扩展,导致正常的内容图片无法显示,为了不影响阅读体验,建议您将www.xiaoz.me加入白名单。

百度UEditor的配置和使用

UEditor是一款不错的富文本编辑器,功能丰富且轻量、可定制,之前有在使用CKEditor,这次试了下UEditor,配置也是非常的简单,分享一下。

一、首先到官方下载最新的UEditor包并解压,会看到如图所示的内容:
ueditor1

二、新建一个HTML页面,在头部载入以下三个js文件

1
2
3
4
5
6
<!--引入配置文件-->
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<!--UEditor核心文件-->
<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
<!--调用语言包文件-->
<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>

三、在body的底部对编辑器进行实例化

1
2
3
<script type="text/javascript">
UE.getEditor('editor');//实例化编辑器
</script>

四、然后使用textarea标签建立一个编辑器,并且调用UEditor,第三步中我们实例化的名字为editor,所以textarea标签的id一定也要为editor,否则无法调用。

1
2
<!--ID和实例化编辑器的名字一样为editor-->
<textarea id = 'editor' name = 'editor'></textarea>

五、完成以上步骤后我们前台就可以显示一个完整的UEditor编辑器了,下面的代码可供参考。更多的参考内容可以查看压缩包内的index.html文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<title>UEditor演示</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--引入配置文件-->
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<!--UEditor核心文件-->
<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
<!--调用语言包文件-->
<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<!--ID和实例化编辑器的名字一样为editor-->
<textarea id = 'editor'></textarea>
<script type="text/javascript">
UE.getEditor('editor');//实例化编辑器
</script>
</body>
</html>

六、编辑器的设置可修改ueditor.config.js文件,里面有详细的说明。取消注释并修改里面的值即可,否则保持默认。
ueditor2

One Comment

发表评论

电子邮件地址不会被公开。 必填项已用*标注