Ueditor文本回显问题

最新推荐文章于 2023-01-10 14:02:39 发布

原创最新推荐文章于 2023-01-10 14:02:39 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ueditor

Ueditor 专栏收录该内容

1 篇文章

订阅专栏

本文探讨使用Ueditor编辑器在网页上编辑富文本内容时如何正确保存和读取格式化文本。介绍如何通过获取HTML格式内容而非纯文本内容，确保格式在数据库存储和页面显示中得以保留。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近接刚接触Ueditor，本来想用它来实现带格式的文本内容的编辑和传值。但是刚用就碰到问题了。
先了解以下它的几个获取内容的方法吧：

<script type="text/javascript">
	function saveNotice(url){
		//获取带格式纯文本内容
		UE.getEditor('editorInfo').getPlainContent();
		//获取不带格式的纯文本内容
		UE.getEditor('editorInfo').getContentTxt();
		//获取html格式的内容
		var content = UE.getEditor('editorInfo').getContent();
	};
</script>

然后是容器初始化的代码：

<script type="text/javascript">
	//获取编辑器对象
	var ue = UE.getEditor('editorInfo');
	//容器初始化
	ue.ready(function(){
		//设置高度
		ue.setHeight(400);
		//给容器设置内容
		ue.setContent($("#content").val());
	});
</script>

然后是jsp代码

<input type="hidden" id="content" name="content" value='${notice.content}' >

<%-- 这是ueditor的容器 --%>
<script type="text/javascript" id="editorInfo" style="width: 90%;"></script>

起初，我是想通过获取获取获取容器中的带格式的纯文本内容，然后存入数据库，再把纯文本内容设置给Ueditor容器，达到回显的效果。谁知道并没成功，因为带格式的纯文本内容设置回给Ueditor容器后，竟然并没有带格式，而且存放在数据库中的文本内容，也没有了格式，所以取出来无法原样显示。

然后经过一番搜索，发现要保持文本的格式，应该获取html格式的内容：

var content = UE.getEditor('editorInfo').getContent();

然后取到值直接设置给Ueditor容器。存在数据库的数据也应该是Html格式内容，这样取出来后就可以直接放在页面中显示了。
TIP: 我在页面中是用一个input来作为文本内容的中转站的，也就是回显时先在把值放到input中，然后再从input中取值（从上面的代码就可以看出）。要注意的是input中 value=’${notice.content}’ 要用单引号，否则双引号会和html内容中的造成混乱。