Ueditor富文本编辑器使用

最新推荐文章于 2024-07-02 03:18:35 发布

DH2264664169

最新推荐文章于 2024-07-02 03:18:35 发布

阅读量695

点赞数

分类专栏： ueditor

本文链接：https://blog.csdn.net/DH2264664169/article/details/84030794

版权

ueditor 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、在Ueditor官网上下载对应的版本（包括：页面类型jsp,php等，编码类型：UTF-8,gbk)

2、在工程的根目录下创建一个ueditor包，将解压出的内容复制到该文件夹中

3、我的demo是SSH框架的，修改web.xml中的文件，使得struts的核心控制器不拦截ueditor中使用到的文件格式（如：jpg,js,jsp等）

<!-- 不拦截ueditor中使用到的文件格式（如：jpg,js,jsp等） -->
	<filter-mapping>
		<filter-name>struts2</filter-name>
		<!-- <url-pattern>/*</url-pattern> -->
		<url-pattern>*.do</url-pattern>
		<url-pattern>*.action</url-pattern>
	</filter-mapping>

若没有配置，在上传图片时，会报错，无法保存图片内容

4、将解压后的文件中jsp下lib包里的五个jar包复制到项目的lib包下，导入项目运行环境中（若有jar包与源项目重复，保留ueditor的，将项目中与之重复的jar包去除（先在运行环境中移除，再在lib包下删除））

5、环境测试：访问http://localhost:8080/你的项目名/ueditor/index.html

或是访问：http://localhost:8080/ssh-4/ueditor/jsp/config.json

出现如图所示，即ueditor基本环境搭建成功

6、若是按照以上步骤操作的，你的/ssh-4/WebContent/ueditor/ueditor.config.js这个配置文件不要动（切记不要动），源码如下图所示：

7、修改config.json使之符合自己的项目路径/ssh-4/WebContent/ueditor/jsp/config.json

下面的这个不知道是不是必须的，没有测试

8、前端页面设计（下面是一个完整代码，ueditor使用到的在代码下面解释），我的是jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<TITLE>添加请求</TITLE> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK href="${pageContext.request.contextPath }/css/Style.css" type=text/css rel=stylesheet>
<LINK href="${pageContext.request.contextPath }/css/Manage.css" type=text/css rel=stylesheet>
<META content="MSHTML 6.00.2900.3492" name=GENERATOR>


</HEAD>
<BODY>
<script type="text/javascript" charset="utf-8" src="${ctx}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx}/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="${ctx}/ueditor/lang/zh-cn/zh-cn.js"></script>

<script type="text/javascript">
        UE.getEditor('content',{
            //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
            toolbars:[['FullScreen','simpleupload', 'Source', 'Undo', 'Redo','Bold','test']],
            //focus时自动清空初始化时的内容
            autoClearinitialContent:true,
            //关闭字数统计
            wordCount:false,
            //关闭elementPath
            elementPathEnabled:false,
            //默认的编辑区域高度
            initialFrameHeight:300
            //更多其他参数，请参考ueditor.config.js中的配置项
        })
    </script>
    
<script type="text/javascript">
	/* var ue = UE.getEditor('content'); */
	var editor = UE.getEditor('content',{
		enterTag : 'br'
	});
	/* var arr = [];
	arr.push(UE.getEditor('content').getContent());  //arr数组里面就是HTML 
	
	var articleContent = UE.getContent();
	editor.ready(function() {
	      ue.setContent($("#content").val());
	  });*/
</script>
	<FORM id=form1 name=form1 action="${pageContext.request.contextPath }/request/addRequest.action" method=post>
		<TABLE cellSpacing=0 cellPadding=0 width="98%" border=0>
			<TBODY>
				<TR>
					<TD width=15><IMG src="${pageContext.request.contextPath }/images/new_019.jpg" border=0></TD>
					<TD width="100%" background="${pageContext.request.contextPath }/images/new_020.jpg" height=20></TD>
					<TD width=15><IMG src="${pageContext.request.contextPath }/images/new_021.jpg" border=0></TD>
				</TR>
			</TBODY>
		</TABLE>
		<TABLE cellSpacing=0 cellPadding=0 width="98%" border=0>
			<TBODY>
				<TR>
					<TD width=15 background="${pageContext.request.contextPath }/images/new_022.jpg">
						<IMG src="${pageContext.request.contextPath }/images/new_022.jpg" border=0>
					</TD>
					<TD vAlign=top width="100%" bgColor=#ffffff>
						<TABLE cellSpacing=0 cellPadding=5 width="100%" border=0>
							<TR>
								<TD class=manageHead>当前位置：客户管理 &gt; 添加客户</TD>
							</TR>
							<TR>
								<TD height=2></TD>
							</TR>
						</TABLE>						
						<TABLE cellSpacing=0 cellPadding=5  border=0>
							<TR>
								<td>请求人：</td>
								<td>
									<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="requestUser">
								</td>
								<td>请求人部门 ：</td>
								<td>
									<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="requestDepartment">
								</td>
							</TR>							
							<TR>	
								<td>请求类型 ：</td>
								<td>
									<select name="requestType" class=textbox id=sChannel2 style="WIDTH: 180px">
										<option value="non">---请选择---</option>
										<option value="6">硬件</option>
										<option value="7">软件</option>
									</select>
								</td>
								<td>服务类型：</td>
								<td>
									<select name="serviceForm" class=textbox id=sChannel2 style="WIDTH: 180px">
										<option value="non">---请选择---</option>
										<option value="22">远程</option>
										<option value="23">现场</option>
									</select>								
								</td>
							</TR>
							<TR>
								<td>请求状态：</td>
								<td>
									<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="requestStatus">
								</td>
								<td>服务人员：</td>
								<td>
									<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="serviceUser">
								</td>
							</TR>
<!-- Ueditor富文本编辑器 -->
<!-- start================================================ -->
<TR>
	<td>请求描述：</td>
	<td colspan="3">
		<textarea name="requestDescription" id="content" style="width: 800px; height: 400px; margin: 0 auto;"></textarea>
		<!-- <INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="requestDescription"> -->
	</td>
</TR>
<!-- end================================================== -->
							<tr>
								<td rowspan=2>
									<INPUT class=button id=sButton2 type=submit value=" 保存 " name=sButton2>
								</td>
							</tr>
						</TABLE>
					</TD>
					<TD width=15 background="${pageContext.request.contextPath }/images/new_023.jpg">
						<IMG src="${pageContext.request.contextPath }/images/new_023.jpg" border=0>
					</TD>
				</TR>
			</TBODY>
		</TABLE>
		<TABLE cellSpacing=0 cellPadding=0 width="98%" border=0>
			<TBODY>
				<TR>
					<TD width=15><IMG src="${pageContext.request.contextPath }/images/new_024.jpg" border=0></TD>
					<TD align="center" width="100%" background="${pageContext.request.contextPath }/images/new_025.jpg" height=15></TD>
					<TD width=15><IMG src="${pageContext.request.contextPath }/images/new_026.jpg"	border=0></TD>
				</TR>
			</TBODY>
		</TABLE>
	</FORM>
</BODY>
</HTML>

静态文件引入

script代码（得到id为content的组件， toolbars:[['FullScreen','simpleupload', 'Source', 'Undo', 'Redo','Bold','test']]为工具类上的属性（simpleupload为单图上传组件按钮）

id为content的组件代码：

<TR>
   <td>请求描述：</td>
   <td colspan="3">
       <textarea name="requestDescription" id="content" style="width: 800px; height: 400px; margin: 0 auto;"></textarea>
       
   </td>
</TR>

9、完毕后，直接访问上述所写的jsp页面，点击图片按钮，选择将要上传的图片，确定，即可回显到页面上（效果图如下）

附录：遇到的问题

1、访问的页面不显示富文本工具栏

（script代码未找到对应id的组件，静态文件引入需要在UE获得之前定义）

2、/ssh-4/WebContent/ueditor/jsp/controller.jsp页面访问报错

（jar包冲突，项目jar包与ueditorjar包冲突，保留ueditor的配套jar包，移除并删除项目与之名字相同的jar包）

3、点击页面上的图片按钮组件无反应

（在web.xml中未允许struts核心控制器不拦截ueditor使用到资源，解决方法如上web.xml文件的配置）

<filter-mapping>
       <filter-name>struts2</filter-name>
       
       <url-pattern>*.do</url-pattern>
       <url-pattern>*.action</url-pattern>
   </filter-mapping>

4、图片上传失败

（/ssh-4/WebContent/ueditor/jsp/config.json中的路径配置无效）（详细如上）

"imageManagerUrlPrefix": "http://localhost:8080/ssh-4/", /* 图片访问路径前缀 */

尚待解决问题：

富文本编辑器里保存的内容，在数据库中带有<p></p>标签，从数据库中直接取出来的，也带有标签

（若有大神知晓，万请想告，拜谢）

DH2264664169

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录