富文本编辑器


使用代码功能时,需要引入下列文件
<!--代码高亮-->
<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"的元素中
又因为编辑器中将单引号格式化为了\',所以最终页面展示的内容需要将\'替换成'
<!--在jsp中这么写-->
<div class="javaex-edit-content">
	${fn:replace(contentHtml, "\\'", "'")}
</div>

<!--如果还需要用到图片懒加载,需要替换src为data-original的话,这么写-->
<div class="javaex-edit-content">
	${fn:replace(fn:replace(contentHtml, "\\'", "'"), "src", "data-original")}
</div>
图片为url的代码示例
<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",		// 参数名称,SSM中与MultipartFile的参数名保持一致
			dataType : "url",	// 返回的数据类型:base64 或 url
			rtn : "rtnData",	// 后台返回的数据对象,在前面页面用该名字存储
			imgUrl : "data.imgUrl",	// 根据返回的数据对象,获取图片地址。  例如后台返回的数据为:{code: "000000", message: "操作成功!", data: {imgUrl: "1.jpg"}}
			prefix : "/upload/"	// 图片地址的前缀,根据实际情况决定是否需要填写
		},
		content : '我是来测试的',	// 这里必须是单引号,因为html代码中都是双引号,会产生冲突
		callback : function(rtn) {
			$("#contentHtml").val(rtn.html);
			$("#contentText").val(rtn.text);
		}
	});
</script>
图片为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",
		content : '测试回显',	// 这里必须是单引号,因为html代码中都是双引号,会产生冲突
		callback : function(rtn) {
			console.log(rtn.html);
			console.log(rtn.text);
		}
	});
</script>

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