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

时间 2019-11-18

原文原文链接

首先看一下效果图：javascript

首先咱们须要来认识下UEditor，它是由百度web前端研发部开发所见即所得富文本web编辑器，而且是基于BSD协议的开源产品，容许自由使用和修改，开源就意味着能够本身来定制这个编辑器。html

实现方法：前端

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

下面就是一个简单的调用实例，只须要引入ueditor.config.js，ueditor.all.min.js，lang/zh-cn/zh-cn.js这三个文件便可，还须要其余功能的能够继续去挖掘web

<!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中能够查看一下提供还有许多提供的方法：spa

好比：使用editor.getContent()方法能够得到编辑器的内容code

　　　使用editor.getPlainTxt()方法能够得到编辑器的带格式的纯文本内容htm

须要的话能够参考官方文档blog

bbg