如何使TinyMCE在UpdatePanel中工作？

Question

我正在尝试做一些许多人似乎能够做到但我无法实施任何解决方案的事情。 TinyMCE控件在asp.net表单中运行良好，直到用UpdatePanel封闭它，然后在回发后中断。我尝试了一些像RegisterClientScriptBlock方法的修复，但仍然不成功，我在回发后仍然失去了tinyMCE控件。

下面是一个完整的测试项目（VS 2008），它在UpdatePanel外部提供了一个Control，内部有一个控件，每个项目都有一个按钮来生成回发。同样在项目中我有一个EditorTest控件，其中包含我尝试的一些调用的注释代码，以防它给任何人任何想法。

CODE SAMPLE

以下是MCE论坛上一些解决方案的一些来源：
AJAX
UpdatePanel

Answer 1

要在每次init更改时执行UpdatePanel，您需要使用ScriptManager注册脚本：

// control is your UpdatePanel
ScriptManager.RegisterStartupScript(control, control.GetType(), control.UniqueID, "your_tinymce_initfunc();", true);

注意：您无法在初始化函数上使用exact模式，您可以使用textareas或class selector，否则它将无效正常。

您还必须使用

ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "", "tinyMCE.triggerSave();");

在UpdatePanel的回发中，编辑器内容未保存在文本框中，因为默认行为仅适用于form.submit，因此当您提交任何内容时，它会在发布之前保存文本。

在获取值的背后代码中，您只需访问TextBox.Text属性。

注意：如果你使用的是.NET GZip，你可能不得不放弃它，我无法使用它，我必须完全删除它。

Answer 2

好的，你的问题有两个问题。 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" %>
<script type="text/javascript" src="Editor/tiny_mce.js"></script>

<script type="text/javascript">
    function myCustomCleanup<%= mce.ClientID%>(type, value) {
        if (type == "insert_to_editor") {
            value = value.replace(/&lt;/gi, "<");
            value = value.replace(/&gt;/gi, ">");
        }
        return value;
    }
    function myCustomSaveContent<%= mce.ClientID%>(element_id, html, body) {
        html = html.replace(/</gi, "&lt;");
        html = html.replace(/>/gi, "&gt;");
        return html;
    }

    function callInt<%= mce.ClientID%>() {

        tinyMCE.init({
            mode: "exact",
            elements: "<%= mce.ClientID%>",
            theme: "advanced",
            skin: "o2k7",
            plugins: "inlinepopups,paste,safari",
            theme_advanced_buttons1: "fontselect,fontsizeselect,|,forecolor,backcolor,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,cut,copy,paste,pastetext,pasteword",
            theme_advanced_buttons2: "",
            theme_advanced_buttons3: "",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            cleanup_callback: "myCustomCleanup<%= mce.ClientID%>",
            save_callback: "myCustomSaveContent<%= mce.ClientID%>"
        });
    }
</script>
<textarea runat="server" id="mce" name="editor" cols="50" rows="15">Enter your text here...</textarea>

Answer 3

此解决方案不再适用于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" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphContent" Runat="Server">

  <asp:ScriptManager runat="server"/>


  <asp:UpdatePanel runat="server" id="upUpdatPanel">
    <ContentTemplate>

      <asp:TextBox runat="server" id="tbHtmlEditor" TextMode="MultiLine">
        Default editor text
      </asp:TextBox>

      <asp:Dropdownlist runat="server" ID="ddlTest" AutoPostBack="true" OnSelectedIndexChanged="ddlTest_SelectedIndexChanged">
        <Items>
           <asp:ListItem Text="A"></asp:ListItem>
           <asp:ListItem Text="B"></asp:ListItem>
        </Items>
      </asp:Dropdownlist>

      <asp:Button runat="server" ID="butSaveEditorContent" OnClick="butSaveEditorContent_Click" Text="Save Html Content"/>      

    </ContentTemplate>
  </asp:UpdatePanel>

  <script type="text/javascript">

      $(document).ready(function () {
        /* initial load of editor */
        LoadTinyMCE();
      });

      /* wire-up an event to re-add the editor */     
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler_Page);

      /* fire this event to remove the existing editor and re-initialize it*/
      function EndRequestHandler_Page(sender, args) {
        //1. Remove the existing TinyMCE instance of TinyMCE
        tinymce.remove( "#<%=tbHtmlEditor.ClientID%>");
        //2. Re-init the TinyMCE editor
        LoadTinyMCE();
      }

      function BeforePostback() {
        tinymce.triggerSave();
      }

      function LoadTinyMCE() {

        /* initialize the TinyMCE editor */
        tinymce.init({
          selector: "#<%=tbHtmlEditor.ClientID%>",
          plugins: "link, autolink",
          default_link_target: "_blank",
          toolbar: "undo redo | bold italic | link unlink | cut copy paste | bullist numlist",
          menubar: false,
          statusbar: false
        });
      }

  </script>




</asp:Content>

守则背后：

    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)
  {

  }
}

Answer 4

在更新面板中使tinyMCE正常工作的正确方法：

1）为“提交”按钮的OnClientClick创建一个处理程序。

2）运行tinyMCE.execCommand（“mceRemoveControl”，false，'＆lt;％= txtMCE.ClientID％＆gt;'）;在处理程序中，以便在回发之前删除tinyMCE实例。

3）在异步回发中，使用ScriptManager.RegisterStartupScript运行tinyMCE.execCommand（“mceAddControl”，true，'＆lt;％= txtMCE.ClientID％＆gt;'）;

基本上，您需要做的就是在异步回发之前使用mceRemoveControl命令并注册启动脚本以在异步回发后运行mceAddControl命令。不太难。

Answer 5

我做了以下事情：

首先我将此Javascript添加到我的页面：

<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);

function endRequestHandler(sender,args)
{
    tinyMCE.idCounter=0;
    tinyMCE.execCommand('mceAddControl',false,'htmlContent');
}

function UpdateTextArea()
{ 
    tinyMCE.triggerSave(false,true);
}
</script>

因为我在页面中创建了一个ASP.NET并使用了ASP.NET Button，所以我不得不在页面加载中添加以下内容：

protected void Page_Load(object sender, EventArgs e)
{
    Button1.Attributes.Add("onclick", "UpdateTextArea()");
}

Answer 6

这是一个古老的问题，但经过几个小时的搜索和寻找答案后，我觉得有义务发布我想出的解决方案。

看来，至少在我正在使用的实现（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的任何项目。

Answer 7

为那些使用.NET framework 4的人更新这个问题的答案，我成功地通过插入以下内容将TinyMCE附加到更新面板内的TextBox：

在＆lt; head＆gt;＆lt; / head＆gt;中的标记中区域：

<script src="scripts/tinymce/tinymce.min.js" type="text/javascript"></script>
<script type="text/javascript">

    tinyMCE.init({
        selector: ".tinymcetextarea",
        mode: "textareas",

        plugins: [
             "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
             "searchreplace visualblocks visualchars code fullscreen autoresize insertdatetime media nonbreaking",
             "save table contextmenu directionality emoticons template paste textcolor",
             "autosave codesample colorpicker image imagetools importcss layer"
        ],

        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media | forecolor backcolor emoticons",
        style_formats: [
             { title: 'Bold text', inline: 'b' },
             { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
             { title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
             { title: 'Example 1', inline: 'span', classes: 'example1' },
             { title: 'Example 2', inline: 'span', classes: 'example2' },
             { title: 'Table styles' },
             { title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
        ]
    });

</script>

在＆lt; body＆gt;＆lt; / body＆gt;中的标记中区域：

<asp:TextBox ID="tbContentHtml" CssClass="tinymcetextarea" Wrap="true" runat="server" Width="90%" TextMode="MultiLine" />

最后在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 + "');");

Answer 8

不确定你是否看过这些。

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

这是一个关于它的论坛帖子

http://tinymce.moxiecode.com/punbb/viewtopic.php?id=12682

祝你好运。

Answer 9

每当刷新更新面板时，您都必须调用TinyMCE的初始化方法。

为此，您要么从RegisterStartupScript方法调用此方法（tinyMCE.init），要么在页面的head部分创建一个页面加载javascript函数，如下所示：

function pageLoad() {
   tinyMCE.init();
}

每次刷新更新面板时都会执行此功能。

Answer 10

我解决了这个问题 在响应生成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调用的页面是

<?php
$name=$_GET['id'];
include 'connection.php';
$result=mysql_query("SELECT * FROM `templete` WHERE temp_name='$name' and status=1");

$row = mysql_fetch_array($result);
$Content=$row['body'];
?>
<html>
<head>
<title>editing using tiny_mce</title>
<script language="..." src="tinymce/jscripts/tiny_mce  /tiny_mce.js"></script>
</head>
<body>
<h2>change the template here</h2>
<form method="post" action="save_temp.php?name=<?php echo $name;?>">
<textarea id="elm1" name="elm1" rows="15" cols="80"><?php echo $Content;?></textarea>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>

在这种情况下，

可能会有所帮助。

Answer 11

我喜欢这个

<script language="javascript" type="text/javascript">
    function pageLoad(sender, args) { 
        aplicartinyMCE();     
    }
    function aplicartinyMCE() {
       tinyMCE.init({
           mode: "specific_textareas",
           editor_selector: "mceEditor",
           .....
       });
    }
</script>

即使

，也会在每次异步回发后初始化编辑器

然后在page_load事件中

ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "salvarEditorMCE", "tinyMCE.triggerSave();");

Answer 12

TinyMCE（以及其他WYSIWYG编辑器，FCKEditor等）遭受回发验证问题。默认情况下，回发上的任何ASP.Net页面都会检查其内容，任何未编码的HTML都会抛出回发验证错误。

现在很多人，包括在那些论坛上建议禁用回发验证，validaterequest =“false”，但是这使你容易受到脚本攻击，最好的做法是将一个函数绑定到仅触发的异步回发事件在异步回发之前。这个JavaScript函数需要对发布回服务器的TinyMCE数据进行HTML编码，然后通过回发验证，你就可以了。

我相信TinyMCE和其他编辑在回发时正确地做了这个，但没有异步回发因此问题，事实上如果你看一下TinyMCE的源代码，你可能会找到他们的功能，只需添加事件绑定。

希望这有帮助