百度富文本编辑器使用

程序员文章站 2022-04-25 11:45:11

...

先上效果图
这个是编辑页的
百度富文本编辑器使用
这个是显示页的

1、首先，去百度富文本编辑器官网下载相关插件百度富文本编辑器官网
一般使用jsp版本
百度富文本编辑器使用
2.解压后将文件夹导入项目，顺便把文件夹改个名字

3.添加jar包，将ueditor/jsp/ 下的所有jar包粘贴到web-inf下的lib中并build path

3.修改一下 ueditor/ueditor.config.js 文件，添加第22行哪一行

4.jsp页面使用

<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page import="com.netmarch.user.bean.User"%>
<%@page import="com.netmarch.auth.AuthManager"%>
<%@page import="com.netmarch.user.GroupManager"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<!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=utf-8" />
<title>百度富文本编辑器使用</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <script type="text/javascript" src="<%=request.getContextPath()%>/js/gen.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.2.min.js"></script>
<script src="<%=request.getContextPath()%>/js/center/layui/layui.js"></script>
 <script src="<%=request.getContextPath()%>/js/center/main.js"></script> 
<!---   ------------------------------------------------------------------------------------------  -->
<!---   ------------------------------------------------------------------------------------------  -->
<!---   ------------------------------------------------------------------------------------------  -->
 <!-- 配置文件 -->
<script type="text/javascript" src="<%=request.getContextPath()%>/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="<%=request.getContextPath()%>/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/ueditor/lang/zh-cn/zh-cn.js"></script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/ueditor/themes/default/css/ueditor.css" />
<!---   ------------------------------------------------------------------------------------------  -->
<!---   ------------------------------------------------------------------------------------------  -->
<!---   ------------------------------------------------------------------------------------------  -->



<link rel="stylesheet"
	href="<%=request.getContextPath()%>/css/center/all.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/js/center/layui/css/layui.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/js/center/layui/css/layui.admin.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/css/center/style.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/css/center/style09.css" />
</head>
<!---   ------------------------------------------------------------------------------------------  -->
<!---   ------------------------------------------------------------------------------------------  -->
**<script type="text/javascript">
        var ue = UE.getEditor('editor'); 
</script>**
<!---   ------------------------------------------------------------------------------------------  -->
<!---   ------------------------------------------------------------------------------------------  -->
<body>
<form:form class="layui-form" id="listForm" >
<input type="hidden" name="projectid" value="${bean.projectid }" />
<input type="hidden" name="year" value="${bean.year }" />
<input type="hidden" name="addtime" value="${bean.addtime }">
<input type="hidden" name="adduser" value="${bean.adduser }" />
	<table class="layui-table">
		<colgroup>
			<col width="15%">
			<col width="10%">
			<col width="15%">
			<col width="60%">
		</colgroup>
		<tbody>
			<tr>
				<td colspan="1">所属部门</td>
				<td colspan="1"><span class="group" class="group">${bean.groupname }</span> <input type="hidden" value="${bean.groupid }" name="groupid" /> </td>
				<td colspan="1"><span style="color: red;">*</span>标题</td>
				<td colspan="1"><input type="text" name="projectname" class="layui-input" value="${bean.projectname }" /> </td>
			</tr>
			<tr>
				<td colspan="1"><span style="color: red;">*</span> 内容</td>
				<!---   ------------------------------------------------------------------------------------------  -->
				<!---   ------------------------------------------------------------------------------------------  -->
				**<td colspan="3">
					  <input type="text" id="format" hidden name="fomat"/>
                            <textarea type="text/plain"  id="editor" style="width:98%;height:500px;" name="projectcontent"  >${bean.projectcontent }</textarea>
                        <!--     <script id="editor" type="text/plain" style="width:98%;height:500px;"></script><img/>  -->
				</td>**
				<!---   ------------------------------------------------------------------------------------------  -->
				<!---   ------------------------------------------------------------------------------------------  -->
			</tr>
			<!-- <tr>
				<td colspan="1">附件</td>
				<td colspan="3">
					<input type="file" id="file" name="file" >
					<button type="button" class="layui-btn">上传</button>
				</td>
			</tr> -->
			
			
		</tbody>
	</table>
                  
</form:form>
			<div style="text-align: center;">
				<button class="layui-btn" onclick="add()" >提交</button>
				<button class="layui-btn" onclick="fh()">返回</button>
            </div>


</body>

<script>


//t提交时提交整个form表单，因为富文本编辑器的加载在textarea里边的，如果所以符文本编辑器的的内容就是textarea的value。在数据库中该字段是用text类型，其中的图片上传是内嵌在ueditor的jar包中，在数据库中图片是以一个链接的形式存在。
function add(){
	var formData=$("#listForm").serializeObject();
	$.ajax({
	async: false,
	type: "POST",
	url:'${pageContext.request.contextPath}/xxfb/xxlb/addXxfbinfo',
	contentType : "application/json; charset=utf-8",
	data:JSON.stringify(formData),
	dataType: "text",
	success: function (result) {
		layer.alert(result);
		},error : function(){
			alert("保存失败");
		}
	})
 } 


$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
	if (o[this.name]) {
		if (!o[this.name].push) {
			o[this.name] = [ o[this.name] ];
		}
		o[this.name].push(this.value || '');
	} else {
		o[this.name] = this.value || '';
	}
});
return o;
}

function fh(){
	location.href = '<%=request.getContextPath() %>/xxfb/xxlb/list';
}


</script>
</html>

使用富文本编辑器上传的图片，以日期文单位存放在ueditor/jsp/uppload/image 下，在数据库中存放的是路径
百度富文本编辑器使用

百度富文本编辑器使用

EmEditor Professional(文本编辑器)使用教程(适用于初学者)

Python的Flask框架中集成CKeditor富文本编辑器的教程

vue2.0 实现富文本编辑器功能

ue编辑器怎么用？ultraedit文本编辑器使用方法

ultraedit怎么用？ultraedit-32文本编辑器使用教程

Django集成百度富文本编辑器uEditor攻略

CKeditor富文本编辑器使用技巧之添加自定义插件的方法

C# Winform使用扩展方法实现自定义富文本框(RichTextBox)字体颜色

详解vue中使用vue-quill-editor富文本小结（图片上传）

使用富文本编辑器上传图片实例详解