您的位置：首页 > 产品设计 > UI/UE

SSH网站开发实录（8）Ueditor的入门使用

2016-12-08 18:53 274 查看

这一节先讲简单使用，关于如何集成到ssh框架，请看下一节内容

Ueditor是一款比较流行的富文本编辑器

关于Ueditor的详细介绍请到官方网站：http://ueditor.baidu.com/website/index.html

官方下载：http://ueditor.baidu.com/website/download.html#ueditor

我使用的是jsp的utf8如下：

下载后解压

官方开发文档：http://fex.baidu.com/ueditor/#server-jsp(关于官方开发文档的jdk,tomcate安装部署可以直接跳过，毕竟这不是基础课程)

使用eclipse创建：一个"Dynamic Web Project”项目项目名称 ueditorTest

在工程目录下的“WebContent”目录上右击，在弹出的菜单中选择：Import弹出如下图所示对话框：

在弹出的对话框中展开General项，双击“File
System”后弹出对话框，如下图所示：

之后next 然后如下：browse选择解压的文件路径，finish就行了

之后拷贝目录jsp/lib/下的所有jar包到WEB-INF/lib/目录下，
部署至此完成，最终项目的结构如下图所示：

可能出现的错误：

导入的utf8-jsp文件夹下的dialog文件下有个map文件会报错。因为我不需要用到百度地图所以我直接把这个map文件夹删除了

测试：

右键run as ->Run on server 选择服务器

然后在浏览器输入http://localhost:8080/ueditorTest/utf8-jsp/jsp/controller.jsp?action=config

显示：

c

导入的文件夹utf-8下有一个index.html可以查看demo

输入：http://localhost:8080/ueditorTest/utf8-jsp/index.html可查看demo

成功

配置完成了，如何使用呢

webcontent目录下新建两个文件

news_deitor.jsp文件：

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>完整demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" charset="utf-8" src="utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="utf8-jsp/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="utf8-jsp/lang/zh-cn/zh-cn.js"></script>

<style type="text/css">
div{
width:100%;
}
</style>
</head>
<body>
<div>
<form action="news.jsp" method="post" target="_blank">
<h1>完整demo</h1>
<script id="editor" type="text/plain" style="width:1024px;height:500px;">
</script>
<input type="submit" value="编辑完成">
</form>

</div>

<script type="text/javascript">

//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');

function getContent() {
var arr = [];
arr.push("使用editor.getContent()方法可以获得编辑器的内容");
arr.push("内容为：");
arr.push(UE.getEditor('editor').getContent());
alert(arr.join("\n"));
}

</script>
</body>
</html>

news.jsp文件

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>news</title>
<style type="text/css">
.news {
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
String newsbody = request.getParameter("editorValue");
%>

<div class="news">
<%=newsbody%>

</div>
</body>
</html>

运行：http://localhost:8080/ueditorTest/news_editor.jsp

编辑：

点击编辑完成

把内容显示在news.jsp界面

如下：

配置图片上传路径实现图片文本编辑显示

要实现图文混排需要对配置文件进行修改.
1.打开/uetest/WebContent/utf8-jsp/jsp/config.json,imageUrlPrefix值为"/工程名",注意要加上/.imagePathFormat路径要和工程目录配置一致.

2.打开ueditor.config.js,修改window.UEDITOR_HOME_URL为符合项目访问的路径。

运行

提交：

可能出现的问题：

提示图片保存成功但是图片显示不出来：

解决方法：检查路径配置(注意：路径配置的时候/斜杠不要忘了。我就是这里漏了所以图片显示不出来)我就是在配置imageUrlPrefix的时候路径没有加/

下一节讲如何继承到ssh (springmvc +sping+hibernate)框架中

完！

（1）参考：http://blog.csdn.net/napoay/article/details/47414851

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航