富文本编辑器


富文本编辑器需要获取焦点后才能上传图片,有的人一上来就上传图片,都不知道光标在哪,它怎么知道图片应该显示在什么地方
使用代码功能时,需要引入下列文件
<!--代码高亮-->
<link href="javaex/pc/lib/highlight/highlight.css" rel="stylesheet" />
<script src="javaex/pc/lib/highlight/highlight.min.js"></script>
<!--切记:下面这行代码只能在展示页面和无需回显编辑的页面使用-->
<script>hljs.initHighlightingOnLoad();</script>
因为默认样式中屏蔽了ulli的原生样式,所以最终页面展示的内容需要包裹在class="javaex-edit-content"的元素中
<!--如果需要用到图片懒加载,需要替换src为data-original的话,在jsp中这么写-->
<div class="javaex-edit-content">
	${fn:replace(contentHtml, "img src", "img data-original")}
</div>
测试回显
图片为url的代码示例(图片为base64时,直接缺省image属性即可)
<div id="edit" class="edit-container">测试回显</div>
<input type="hidden" id="contentHtml" name="contentHtml" value="" />
<input type="hidden" id="contentText" name="contentText" value="" />

<script>
	javaex.edit({
		id : "edit",
		image : {
			url : "${pageContext.request.contextPath}/upload/upload.json",	// 请求路径
			param : "file",		// 参数名称,Spring中与MultipartFile的参数名保持一致
			dataType : "url",	// 返回的数据类型:base64 或 url
			isShowOptTip : true,	// 是否显示上传提示
			rtn : "rtnData",	// 后台返回的数据对象,在前台页面用该名字存储
			imgUrl : "data.imgUrl"	// 根据返回的数据对象,获取图片地址。  例如后台返回的数据为:{code: "000000", message: "操作成功!", data: {imgUrl: "/1.jpg"}}
		},
		isInit : true,
		callback : function(rtn) {
			$("#contentHtml").val(rtn.html);
			$("#contentText").val(rtn.text);
		}
	});
</script>
如果想让编辑器内部出现滚动条,可以添加如下样式
<style>
.edit-editor-body .edit-body-container {
	height: 600px;
}
</style>

或

<style>
.edit-editor-body .edit-body-container {
	max-height: 600px;
}
</style>

参数说明(使用属性默认值时,可以缺省该属性)
序号 属性名 默认值 说明
1 id 富文本编辑器承载容器的id
2 image 图片上传的一些属性设置
image : {
url : "${pageContext.request.contextPath}/upload/upload.json", // 请求路径
param : "file", // 参数名称,Spring中与MultipartFile的参数名保持一致
dataType : "url" // 返回的数据类型:base64 或 url
isShowOptTip : true, // 是否显示上传提示
rtn : "rtnData", // 后台返回的数据对象,在前台页面用该名字存储
imgUrl : "data.imgUrl" // 根据返回的数据对象,获取图片地址。 例如后台返回的数据为:{code: "000000", message: "操作成功!", data: {imgUrl: "/1.jpg"}}
}
3 isInit false 是否初始化调用回调函数
4 fixedTop -1 工具栏距离顶部多少像素时,自动固定(-1表示不自动固定,可以填写:10、28...等数字)
5 callback 返回一个内容对象,包含html内容和纯文本内容。
rtn.html :html内容
rtn.text :纯文本内容