TinyMCE的使用AJAX（更新面板）从来没有一个值 [英] TinyMCE with AJAX (Update Panel) never has a value

问题描述

我想用一个文本区富文本编辑器的更新面板内。

我发现这个职位：的http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors通过这个问题：<一href="http://stackoverflow.com/questions/1207382/need-asp-net-mvc-rich-text-editor">http://stackoverflow.com/questions/1207382/need-asp-net-mvc-rich-text-editor

决定去与TinyMCE的，因为我以前在非AJAX的情况下使用它，它说，在该名单是AJAX兼容。好吧，我做了好醇' tinyMCE.init（{//此处设置}）; 测试出来，做一个更新面板更新后消失。我从一个问题弄清楚就在这里，它应该是在的Page_Load 函数，所以它会变得对异步回发运行。好吧做到这一点，在面板保持。然而，当试图从我的textarea提交的价值，它的文字总是回来为空的，因为我的表单验证总是说：你必须输入一个描述甚至当我输入文本到它。这发生在第一次加载页面和异步回发后，已经完成的页面。

好吧，我觉得这 http://www.dallasjclark.com/using-tinymce -with-AJAX / 和<一href="http://stackoverflow.com/questions/699615/cant-post-twice-from-the-same-ajax-tinymce-textarea">http://stackoverflow.com/questions/699615/cant-post-twice-from-the-same-ajax-tinymce-textarea.我尝试了tinyMCE.init之后添加此code到网页的加载功能。这样做打破了所有我的jQuery被称为也在之后的Page_Load中，它仍然有同样的问题。

我依然pretty的初学者到客户端脚本的东西，所以也许我需要把code在不同的点比的Page_Load？不知道我挂的职位不是很线索在哪里把那个code。

我的javascript：

 ＆LT;脚本类型=文/ JavaScript的＆GT;

VAR的redirectUrl ='＆LT;％=的redirectUrl％＆GT;';

页面加载函数（）{

    tinyMCE.init（{
        模式：精确，
        元素：ctl00_mainContent_tbDescription
        主题：先进的，
        插件： "table,advhr,advimage,iespell,insertdatetime,$p$pview,searchreplace,print,contextmenu,paste,fullscreen",
        theme_advanced_buttons1_add_before：preVIEW，分隔符，
        theme_advanced_buttons1：粗体，斜体，下划线，分离器，证明左边，中间对齐，证明右边，justifyfull，bullist，numlist，撤消，重做，链接，取消链接，分离器，styleselect，formatselect
        theme_advanced_buttons2： "cut,copy,paste,pastetext,pasteword,separator,removeformat,cleanup,charmap,search,replace,separator,iespell,$c$c,fullscreen",
        theme_advanced_buttons2_add_before：，
        theme_advanced_buttons3：，
        theme_advanced_toolbar_location：顶，
        theme_advanced_toolbar_align：左，
        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：真正的，
        paste_convert_headers_to_strong：真正的，
        button_tile_map：真
    }）;

    tinyMCE.triggerSave（假，真）;
    tiny_mce_editor = tinyMCE.get（'ctl00_mainContent_tbDescription'）;
    变种newData = tiny_mce_editor.getContent（）;
    tinyMCE.execCommand（'mceRemoveControl'，假的，your_textarea_name'）;

    // QJqueryUI对话框的东西
}＆LT; / SCRIPT＆GT;
 

现在我目前的code不具有 tinyMCE.execCommand（mceAddControl，真正的'内容'）; 这是一个问题，指出应该也加入。我曾尝试将它添加，但同样，不知道在哪里把它，只是把它在Page_Load似乎没有任何效果。

文本框控件：

 ＆LT; ASP：文本框ID =tbDescription=服务器文本模式=多行
                WIDTH =500px的高度=为175px＆GT;＆LT; / ASP：文本框＆GT;＆LT; BR /＆GT;
 

我怎样才能获得这些值，以便在code背后实际上可以得到的是键入的文本区域，我的验证不上去的话称它是空的？即使在异步回发，因为我在表单上多个按钮，即更新之前，实际提交。

谢谢！

编辑：为进一步澄清我对后端像这样的表单验证：

 如果tbDescription.Text =或者tbDescription.Text是没有那么
        lblDescriptionError.Text =你必须输入一个描述。
        ISERROR = TRUE
    其他
        lblDescriptionError.Text =
    结束如果
 

和被dispalyed这个错误总是会导致该错误消息。

编辑：

好吧，我越来越绝望这里，我已经花了几个小时这一点。我终于找到了我认为是专家交流的赢家，其中列明了以下内容（有关编码XML中的价值有一部分，但是我跳过的）：的 http://www.experts-exchange.com/Programming/Languages​​/C_Sharp/Q_25059848.html

  

对于任何人谁想要使用TinyMCE的与AJAX.Net：

1. 追加开始/结束处理Ajax请求的对象。这将删除TinyMCE的控制发送数据（开始）之前，它会重新TinyMCE的控制（结束）：

     Sys.WebForms.PageRequestManager.getInstance（）。add_beginRequest（功能（发送器，参数）{
       变种EDID =＆其中;％= this.ClientID％GT; _rte_tmce; //你的文本/ textarea的ID。
       变种ED = tinyMCE.getInstanceById（EDID）;
     如果（ED）{
       tinyMCE.execCommand（'mceFocus'，假的，EDID）;
       tinyMCE.execCommand（'mceRemoveControl'，假的，EDID）;
   }
       }）;
   
   
     Sys.WebForms.PageRequestManager.getInstance（）。add_endRequest（功能（发送器，参数）{
        变种EDID =＆其中;％= this.ClientID％GT; _rte_tmce;
         变种ED = tinyMCE.getInstanceById（EDID）;
         如果（ED）{
       tinyMCE.execCommand（'mceAddControl'，假的，EDID）;
         }
      }）;
    

2. 当用户改变从TinyMCE的控制/模糊，我们希望确保textarea的/文本框得到适当的更新：

     ed.onChange.add（函数（ED，L）{
          tinyMCE.triggerSave（真实的，真正的）;
    }）;
    

现在我已经尝试了这个code把它放在自己的脚本标签，将开始和结束的请求到自己的脚本标记，并把ed.onChange在Page_Load，把一切在Page_Load，并把所有的3在它自己的脚本标签。在所有的情况下，从来没有工作，有时甚至打破了jQuery的，这也是在我的Page_Load ...（是的，我改变了上面的code，以适应我的页面）

任何人都可以得到这个工作，或者提供一个解决方案？

在code

解决方案

那么有两种方法我得到这个工作，这真的没有解决的问题，只是避免它。

一个是使用FCKeditor的.NET控件，这种重新加载异常缓慢，虽然对我来说，就像2-3秒。所以，我决定只进行形式有两个更新的面板，并把文本区域之间的话，基本上走的是文本区域进行更新面板。这种感觉有点像一个廉价的把戏，不应该是必要的，但它工作正常。没有一个解决方案或建议任何人张贴工作对我来说，这样就是我所做的。如果我不得不把文本区进入更新面板，虽然，这将无法工作。

I wanted to use a Rich Text Editor for a text area inside an update panel.

I found this post: http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors via this question: http://stackoverflow.com/questions/1207382/need-asp-net-mvc-rich-text-editor

Decided to go with TinyMCE as I used it before in non AJAX situations, and it says in that list it is AJAX compatible. Alright I do the good ol' tinyMCE.init({ //settings here }); Test it out and it disappears after doing a update panel update. I figure out from a question on here that it should be in the page_load function so it gets run even on async postbacks. Alright do that and the panel stays. However, upon trying to submit the value from my textarea, the text of it always comes back as empty because my form validator always says "You must enter a description" even when I enter text into it. This happens the first time the page loads and after async postbacks have been done to the page.

Alright I find this http://www.dallasjclark.com/using-tinymce-with-ajax/ and http://stackoverflow.com/questions/699615/cant-post-twice-from-the-same-ajax-tinymce-textarea. I try to add this code into my page load function right after the tinyMCE.init. Doing this breaks all my jquery being called also in the page_load after it, and it still has the same problem.

I am still pretty beginner to client side scripting stuff, so maybe I need to put the code in a different spot than page_load? Not sure the posts I linked weren't very clue on where to put that code.

My 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>

Now my current code doesn't have the tinyMCE.execCommand("mceAddControl",true,'content'); which that one question indicated should also be added. I did try adding it but, again, wasn't sure where to put it and just putting it in the page_load seemed to have no effect.

Textbox control:

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

How can I get these values so that the code behind can actually get what is typed in the textarea and my validator won't come up as saying it's empty? Even after async postbacks, since I have multiple buttons on the form that update it prior to actual submission.

Thanks!

Edit: For further clarification I have form validation on the back-end like so:

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

And this error will always cause the error message to be dispalyed.

Edit:

Alright I am getting desperate here, I have spent hours on this. I finally found what I thought to be a winner on experts exchange which states the following (there was a part about encoding the value in xml, but I skipped that): http://www.experts-exchange.com/Programming/Languages/C_Sharp/Q_25059848.html

For anyone who wants to use tinyMCE with AJAX.Net:

1. Append begin/end handlers to the AJAX Request object. These will remove the tinyMCE control before sending the data (begin), and it will recreate the tinyMCE control (end):

   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);
         }
      });
   

2. When the user changes/blurs from the tinyMCE control, we want to ensure that the textarea/textbox gets updated properly:

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

Now I have tried this code putting it in its own script tag, putting the begin and end requests into their own script tags and putting the ed.onChange in the page_load, putting everything in the page_load, and putting all 3 in it's own script tag. In all cases it never worked, and even sometimes broke the jquery that is also in my page_load... (and yes I changed the above code to fit my page)

Can anyone get this to work or offer a solution?

The code

解决方案

Well there were two ways I got this to work, which really didn't fix the problem just avoid it.

One was to use the FCKeditor .net control, this reloaded horribly slow though for me, like 2-3 seconds. So I decided to just make the form have two update panels, and put the text area in between then, essentially taking the text area out of the update panel. This felt kind of like a cheap trick that shouldn't be necessary, but it works fine. None of the solutions or suggestions anyone posted worked for me so that is what I did. If I HAD to put the text area into the update panel though, this wouldn't have worked.

这篇关于TinyMCE的使用AJAX（更新面板）从来没有一个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！