如何使TinyMCE在UpdatePanel中工作?
我正在尝试做一些许多人似乎能够做到但我无法实现任何解决方案的事情。 TinyMCE控件在asp.net表单中工作得很好,直到你用UpdatePanel封装它,然后在回发后中断。 我尝试了一些像RegisterClientScriptBlock方法的修复,但仍然不成功,我在回发后仍然失去了tinyMCE控件。
下面是一个完整的测试项目(VS 2008),它在UpdatePanel外部提供了一个Control,内部有一个控件,每个项目都有一个按钮来生成回发。 同样在项目中我有一个EditorTest控件,其中包含我尝试的一些调用的注释代码,以防它给任何人任何想法。
代码示例
以下是MCE论坛上一些解决方案的一些来源:
AJAX
的UpdatePanel
要在UpdatePanel
每次更改时执行init
,您需要使用ScriptManager
注册脚本:
// control is your UpdatePanel ScriptManager.RegisterStartupScript(control, control.GetType(), control.UniqueID, "your_tinymce_initfunc();", true);
注意:您不能在init函数上使用exact
模式,您可以使用textareas
或class selector
,否则它将无法正常工作。
你也必须使用
ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "", "tinyMCE.triggerSave();");
在UpdatePanel的回发中,编辑器内容不会保存在文本框中,因为默认行为仅适用于form.submit
,因此当您提交任何内容时,它会在发布之前保存文本。
在获取值的代码背后,您只需要访问TextBox.Text
属性。
注意:如果您正在使用.NET GZipped,您可能不得不放弃它,我无法使其工作,我必须完全删除它。
好的,你的问题是双重的。 Stefy为您提供了部分答案,您必须通过注册启动脚本来在回发时初始化TinyMCE,如下所示:
using System.Web.UI; namespace TinyMCEProblemDemo { public partial class EditorClean : UserControl { protected void Page_Load(object sender, System.EventArgs e) { ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), mce.ClientID, "callInt" + mce.ClientID + "();", true); } } }
第二个问题是你的自定义控件的实现。 设计自定义控件超出了这个答案的范围。 谷歌可以帮助你。
您在页面上有多个控件实例,这可能会导致脚本问题,因为它会多次呈现。 这就是我修改标记以解决问题的方法(注意脚本函数的动态命名,自定义控件应该是自包含的,模式:tinyMCE.init上的“exact”):
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EditorClean.ascx.cs" Inherits="TinyMCEProblemDemo.EditorClean" %>
此解决方案不再适用于TinyMCE 4.2.3。 您现在需要使用tinymce.remove()而不是使用tinymce.mceRemoveControl()。 这是一个完整的工作示例:
这页纸
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Frame.master" AutoEventWireup="true" CodeFile="FullImplementation.aspx.cs" Inherits="TinyMCE" ValidateRequest="false" %> Default editor text
守则背后:
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class TinyMCE : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // we have to tell the editor to re-save the date on Submit if (!ScriptManager.GetCurrent(Page).IsInAsyncPostBack) { ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "SaveTextBoxBeforePostBack", "SaveTextBoxBeforePostBack()"); } } protected void butSaveEditorContent_Click(object sender, EventArgs e) { string htmlEncoded = WebUtility.HtmlEncode(tbHtmlEditor.Text); } private void SaveToDb(string htmlEncoded) { /// save to database column } protected void ddlTest_SelectedIndexChanged(object sender, EventArgs e) { } }
在更新面板中使tinyMCE正常工作的正确方法:
1)为“提交”按钮的OnClientClick创建一个处理程序。
2)运行tinyMCE.execCommand(“mceRemoveControl”,false,’<%= txtMCE.ClientID%>‘); 在处理程序中,以便在回发之前删除tinyMCE实例。
3)在异步回发中,使用ScriptManager.RegisterStartupScript运行tinyMCE.execCommand(“mceAddControl”,true,’<%= txtMCE.ClientID%>‘);
基本上,您需要做的就是在异步回发之前使用mceRemoveControl命令并注册启动脚本以在异步回发后运行mceAddControl命令。 不太难
我做了以下事情:
首先,我将此Javascript添加到我的页面:
因为我在页面中创建了一个ASP.NET并使用了ASP.NET Button,所以我不得不在页面加载中添加以下内容:
protected void Page_Load(object sender, EventArgs e) { Button1.Attributes.Add("onclick", "UpdateTextArea()"); }
这是一个老问题,但是经过几个小时的搜索和乱七八糟地寻找答案,我觉得有义务发布我想出的解决方案。
看来,至少在我正在使用的实现(UpdatePanel中的多个编辑器)中,必须通知tinyMCE,当UpdatePanel提交时控件将消失,否则它将拒绝再次加载它。
因此,除了Init TinyMCE的代码(只需要在整个页面加载时运行),您需要为每个MCE文本框执行此操作:
ScriptManager.RegisterStartupScript(this, this.GetType(), elm1.UniqueID+"Add", "tinyMCE.execCommand('mceAddControl', true,'" + elm1.ClientID + "');", true); ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), elm1.UniqueID + "Remove", "tinyMCE.execCommand('mceRemoveControl', true,'" + elm1.ClientID + "');");
elm1是tinyMCE元素。 我是驻留在UserControl中的textarea,但您可以将它应用于任何要绑定/取消绑定textarea的项目。
使用.NET framework 4更新了这个问题的答案,我成功地通过插入以下内容将TinyMCE附加到更新面板内的TextBox:
在 head>区域内的标记中:
在 body>区域内的标记中:
最后在Page_Load事件的代码隐藏中:
ScriptManager.RegisterStartupScript(this, this.GetType(), tbContentHtml.UniqueID + "Add", "tinyMCE.execCommand('mceAddEditor', true,'" + tbContentHtml.ClientID + "');", true); ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), tbContentHtml.UniqueID + "Remove", "tinyMCE.execCommand('mceRemoveEditor', true,'" + tbContentHtml.ClientID + "');");
不确定你是否看过这些。
http://joakimk.blogspot.com/2007/07/tinymce-inside-of-aspnet-ajax.html
和
http://codeodyssey.com/archive/2007/7/18/updatepanel-tinymce-demo-with-project-zip-file
这是一个关于它的tinymce论坛post
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=12682
祝好运。
每当刷新更新面板时,您必须调用TinyMCE的初始化方法。
为此,您要么从RegisterStartupScript方法调用此方法(tinyMCE.init),要么在页面的head部分创建一个页面加载javascript函数,如下所示:
function pageLoad() { tinyMCE.init(); }
每次刷新更新面板时都将执行此function。
我在ajax调用响应生成后调用tiny mce解决了这个问题
function edittemp(name) { xmlhttp=GetXmlHttpObject(); if (xmlhttp==null) { alert ("Your browser does not support XMLHTTP!"); return; } var url="edit_temp.php"; url=url+"?id="+name; xmlhttp.onreadystatechange=stateChanged3; xmlhttp.open("GET",url,true); xmlhttp.send(null); } function stateChanged3() { if (xmlhttp.readyState==4) { spl_txt=xmlhttp.responseText.split("~~~"); document.getElementById("edit_message").innerHTML=spl_txt[0]; tinyMCE.init({ theme : "advanced", mode: "exact", elements : "elm1", theme_advanced_toolbar_location : "top", theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator," + "justifyleft,justifycenter,justifyright,justifyfull,formatselect," + "bullist,numlist,outdent,indent", theme_advanced_buttons2 : "link,unlink,anchor,image,separator," +"undo,redo,cleanup,code,separator,sub,sup,charmap", theme_advanced_buttons3 : "", height:"350px", width:"600px" }); } }
和ajax调用的页面是
editing using tiny_mce change the template here
在这种情况下可能会有所帮助。
我喜欢这个
即使在每次异步回发之后初始化编辑器
然后在page_load事件中
ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "salvarEditorMCE", "tinyMCE.triggerSave();");
TinyMCE(以及其他WYSIWYG编辑器,FCKEditor等)遭受回发validation问题。 默认情况下,回发上的任何ASP.Net页面都会检查其内容,并且任何未编码的HTML都会抛出回发validation错误。
现在很多人,包括在那些论坛上建议禁用回发validation,validaterequest =“false”,但是这使你容易受到脚本攻击,最好的做法是将函数绑定到异步回发事件,该事件在异步回发之前触发。 这个JavaScript函数需要对发送回服务器的TinyMCE数据进行HTML编码,然后通过回发validation,你就可以了。
我相信TinyMCE和其他编辑在回发上正确地做了这个,但没有异步回发因此问题,事实上如果你看一下TinyMCE的源代码,你可能会发现他们的function,只需添加事件绑定。
希望这可以帮助