带有AJAX的TinyMCE(更新面板)从来没有价值

Question

我想在更新面板中为文本区域使用富文本编辑器.

我发现这篇帖子:http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors通过这个问题:需要ASP.Net/MVC富文本编辑器

决定使用TinyMCE,因为我之前在非AJAX情况下使用它,并且它在该列表中说它与AJAX兼容.好吧,我做了很好的' tinyMCE.init({ //settings here }); 测试它,它在更新面板更新后消失了.我从这里的一个问题中找出它应该在page_load函数中,所以它甚至可以在异步回发上运行.好吧,这样做,面板停留.但是,在尝试从我的textarea提交值时,它的文本总是返回为空,因为我的表单验证器总是说"你必须输入描述",即使我在其中输入文本.这是在页面第一次加载以及对页面执行异步回发之后发生的.

好吧,我发现这个http://www.dallasjclark.com/using-tinymce-with-ajax/并且不能从同一个AJAX TinyMCE textarea发布两次.我尝试在tinyMCE.init之后立即将此代码添加到我的页面加载函数中.这样做会破坏我之后在page_load中调用的所有jquery,它仍然存在同样的问题.

我仍然是客户端脚本编写的初学者,所以也许我需要将代码放在与page_load不同的位置？不确定我链接的帖子不知道放置代码的位置.

我的Javascript:

<script type="text/javascript">

var redirectUrl = '<%= redirectUrl %>';

function pageLoad() {

    tinyMCE.init({
        mode: "exact",
        elements: "ctl00_mainContent_tbDescription",
        theme: "advanced",
        plugins: "table,advhr,advimage,iespell,insertdatetime,preview,searchreplace,print,contextmenu,paste,fullscreen",
        theme_advanced_buttons1_add_before: "preview,separator",
        theme_advanced_buttons1: "bold,italic,underline,separator,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink,separator,styleselect,formatselect",
        theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,separator,removeformat,cleanup,charmap,search,replace,separator,iespell,code,fullscreen",
        theme_advanced_buttons2_add_before: "",
        theme_advanced_buttons3: "",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        extended_valid_elements: "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
        paste_auto_cleanup_on_paste: true,
        paste_convert_headers_to_strong: true,
        button_tile_map: true
    });

    tinyMCE.triggerSave(false, true);
    tiny_mce_editor = tinyMCE.get('ctl00_mainContent_tbDescription');
    var newData = tiny_mce_editor.getContent();
    tinyMCE.execCommand('mceRemoveControl', false, 'your_textarea_name');

    //QJqueryUI dialog stuff
}</script>

现在我的当前代码没有tinyMCE.execCommand("mceAddControl",true,'content');一个问题指出的那个也应该添加.我确实尝试添加它,但是,再次,不知道在哪里放它,只是把它放在page_load似乎没有效果.

文本框控件:

<asp:TextBox ID="tbDescription" runat="server" TextMode="MultiLine" 
                Width="500px" Height="175px"></asp:TextBox><br />

我怎样才能获得这些值,以便后面的代码可以实际获得textarea中输入的内容,而我的验证器不会出现,因为它是空的？即使在异步回发后,由于我在表单上有多个按钮,在实际提交之前更新它.

谢谢!

编辑:为了进一步说明,我在后端进行了表单验证,如下所示:

If tbDescription.Text = "" Or tbDescription.Text Is Nothing Then
        lblDescriptionError.Text = "You must enter a description."
        isError = True
    Else
        lblDescriptionError.Text = ""
    End If

并且此错误将始终导致显示错误消息.

编辑:

好吧,我在这里绝望了,我花了好几个小时.我终于找到了我认为是专家交换的赢家,其中说明了以下内容(有一部分是关于在xml中编码值,但我跳过了):http://www.experts-exchange.com/Programming/Languages /C_Sharp/Q_25059848.html

对于任何想要在AJAX.Net中使用tinyMCE的人:

2. 将开始/结束处理程序附加到AJAX请求对象.这些将在发送数据(开始)之前删除tinyMCE控件,它将重新创建tinyMCE控件(结束):

   Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function(sender, args) {
       var edID = "<%=this.ClientID%>_rte_tmce"; // the id of your textbox/textarea.
       var ed = tinyMCE.getInstanceById(edID);
     if (ed) {
       tinyMCE.execCommand('mceFocus', false, edID);
       tinyMCE.execCommand('mceRemoveControl', false, edID);
   }
       });
   
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args) {
        var edID = "<%=this.ClientID%>_rte_tmce";
         var ed = tinyMCE.getInstanceById(edID);
         if (ed) {
       tinyMCE.execCommand('mceAddControl', false, edID);
         }
      });
   

3. 当用户从tinyMCE控件更改/模糊时,我们希望确保textarea/textbox正确更新:

      ed.onChange.add(function(ed, l) {
          tinyMCE.triggerSave(true, true);
    });
   

现在我已尝试将此代码放入其自己的脚本标记中,将开始和结束请求放入其自己的脚本标记中,并将ed.onChange放入page_load中,将所有内容放入page_load中,并将所有3个放入其自己的脚本标记中.在所有情况下,它从来没有工作,甚至有时打破了我的page_load中的jquery ...(是的,我改变了上面的代码以适合我的页面)

谁能让这个工作或提供解决方案？

代码

Answer 1

好吧，我有两种方法可以解决这个问题，但实际上并没有解决问题，只是避免了它。

一种是使用 FCKeditor .net 控件，但对我来说重新加载速度非常慢，大约需要 2-3 秒。所以我决定让表单有两个更新面板，然后将文本区域放在中间，实质上是将文本区域从更新面板中取出。这感觉有点像一个不必要的廉价技巧，但效果很好。任何人发布的解决方案或建议都不适合我，所以这就是我所做的。如果我必须将文本区域放入更新面板，那么这将不起作用。