网页开发中文本编辑器UEditor的使用

原文地址:http://www.cnblogs.com/Steven-shi/p/5435358.html

首先看一下效果图:

首先我们需要来认识下UEditor,它是由百度web前端研发部开发所见即所得富文本web编辑器,并且是基于BSD协议的开源产品,允许自由使用和修改,开源就意味着可以自己来定制这个编辑器。

实现方法:

首先先下载UEditer,官方网址:http://ueditor.baidu.com/website/,根据自己需求下载相应的版本(其实里面都有demo实现调用编辑器)

下面就是一个简单的调用实例,只需要引入ueditor.config.js,ueditor.all.min.js,lang/zh-cn/zh-cn.js这三个文件即可,还需要其他功能的可以继续去挖掘

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" charset="utf-8" src="UEditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="UEditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="UEditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
    <script id="container" name="content" type="text/plain">这里就是编辑器的正文</script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
            var ue = UE.getEditor('container');
    </script>
</body>
</html>
复制代码

当把该编辑器放在一个表单中,提交后即可通过content来读取编辑器的内容。

在官方提供的demo中可以查看一下提供还有许多提供的方法:

比如:使用editor.getContent()方法可以获得编辑器的内容

   使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容

 需要的话可以参考官方文档


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值