UEditor的安装与基本使用

  • 官网地址:http://ueditor.baidu.com/website/
  • 简介UEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 UEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本编辑器
  • 下载地址:
    http://ueditor.baidu.com/website/download.html下载对应的版本,这里以jsp版本的UTF-8为例
  • 具体使用：新建一个web项目,jsp页面引入:jquery,js、ueditor.config.js、ueditor.all.min.js，将下载的jar包添加到web项目中
  • jsp源代码
 1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6 <script type="text/javascript" charset="UTF-8" src="./res/js/lib/jquery-1.10.2.min.js"></script>
 7 <script type="text/javascript" charset="UTF-8" src="./res/ueditor/ueditor.config.js"></script>
 8 <script type="text/javascript" charset="UTF-8" src="./res/ueditor/ueditor.all.min.js"> </script>
 9 <script type="text/javascript" charset="UTF-8" src="./res/ueditor/lang/zh-cn/zh-cn.js"></script>
10 <script type="text/javascript" charset="UTF-8" src="./res/js/js-web-ueditor.js"></script>
11 <title>ueditor基本使用</title>
12 </head>
13 <body>
14 <center>
15     <h3>UEditor百度富文本编辑器的使用</h3>
16     <!-- 加载编辑器的容器 -->
17     <script id="js-web-container" name="content" type="text/plain" style="width:60%;height:200px;">
18             初始化富文本编辑器的内容
19     </script>
20 </center>
21 </body>
22 </html>
  • js源代码:
1 $(function() {
2     //初始化加载富文本编辑器
3     var ue = UE.getEditor('js-web-container');
4 });
posted @ 2017-10-24 14:01  sunny1009  阅读(6486)  评论(0)    收藏  举报