fckeditor 上传转义字符相关

最新推荐文章于 2024-05-14 21:22:10 发布

原创最新推荐文章于 2024-05-14 21:22:10 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能

web 开发技巧专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种将富文本编辑器与ExtJs框架集成的方法，解决了编辑器内容包含特殊字符及HTML标签时的前后端交互问题，并演示了如何正确地从前端传送到后端及展示。

大家做web开发，可能会用到编辑器，编辑器写很多文字上传可到后台就是表情了。比如<img> 等标签，还有相关的单引号，双引号，但是当从后来读取到前台显示的时候，会出现很多问题，尤其是赋值给js 的变量的时候，可能需要用转义字符才能解决相关问题。

本人是这样解决此问题的。以下是相关的ExtJs的部分代码

	var win = new Ext.Window({
		title : "管理学校简介",
		layout : 'fit',
		width : '100%',//1300
		height : 600,//600
		closeAction : 'hide',
		modal : true,
		buttonAlign : 'center',
		buttons : [{
					text : "确定修改",
					type : 'submit',
					handler : function() {
						Ext.get('code').dom.value = editorInstance
								.GetXHTML(true);//获取fckeditor内容赋给textarea  
						var str = Ext.getCmp("code");
						if (fckeditorFormPanel.form.isValid()){//验证通过      
							fckeditorFormPanel.form.doAction('submit', {
										url : '../content.do?method=updateContent',
										params:{
											'id' : '00001'
										},
										method : 'post',
										waitMsg : '正在提交,请稍等...',
										success : function(form, action) {//成功返回        
											Ext.Msg.alert("提示消息", "添加成功");
										},
										failure : function(form, action) {//失败返回      
											Ext.Msg.alert("提示消息", "添加数据发生了异常");
										}
									});
						}
					}
		}],
		items : fckeditorFormPanel
	});
	win.show();
	//	var oFCKeditor = new FCKeditor('code', 1100, 600); //编辑器的大小
	var oFCKeditor = new FCKeditor('code');
	oFCKeditor.Height = '100%';
	oFCKeditor.Width = '100%';
	oFCKeditor.BasePath = "../fckeditor/"; //编辑器路径  
	oFCKeditor.ToolbarSet = 'Default'; //工具栏样式主题，经过测试其他的主题还要到fckconfig.js下去修改。  
	oFCKeditor.ReplaceTextarea();

编辑器的内容直接保存到后台数据库即可，包括对应的标签等内容，在显示的时候

<div id="stockcode" style="display:none">
			<%=content.getContent()%>
		</div>

显示到一个div 中，但是是隐藏的，然后再js 中调用 stockcode.innerHTML 即可用html 识别的方式显示出之前保存的

内容，当时也可用stockcode.innerText ，不过这种方法只显示内容，过滤了html 中的标签

fckeditor 上传 转义字符相关

fckeditor 上传转义字符相关