TinyMCE 与 AJAX（更新面板）永远没有价值

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 函数中，这样即使在异步回发上它也能运行。好吧，这样做，面板就保留了。但是，在尝试从我的文本区域提交值时，它的文本总是返回为空，因为即使我在其中输入文本，我的表单验证器也总是说“您必须输入描述”。这种情况发生在页面第一次加载时以及页面异步回发之后。

好吧，我找到这个 http://www.dallasjclark.com/using-tinymce-with -ajax/ 和 无法从以下位置发布两次相同的 AJAX TinyMCE 文本区域。我尝试将此代码添加到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 />

如何获取这些值，以便后面的代码实际上可以获取文本区域中键入的内容，并且我的验证器不会显示它是空的？即使在异步回发之后，因为表单上有多个按钮可以在实际提交之前更新它。

谢谢！

编辑：为了进一步澄清，我在后端进行了表单验证，如下所示：

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

对于任何想要将tinyMCE与AJAX.Net结合使用的人：

2. 将开始/结束处理程序附加到AJAX 请求对象。这些将在发送数据之前删除tinyMCE控件（开始），并且它将重新创建tinyMCE控件（结束）：

   Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function(sender, args) {
       var edID = "<%=this.ClientID%>_rte_tmce"; // 你的文本框/文本区域的 id。
       var ed = tinyMCE.getInstanceById(edID);
     如果（编辑）{
       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);
         如果（编辑）{
       tinyMCE.execCommand('mceAddControl', false, edID);
         }
      });
   

3. 当用户从tinyMCE控件更改/模糊时，我们希望确保文本区域/文本框得到更新正确地：

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

现在我尝试将此代码放入自己的脚本标记中，将开始和将请求结束到它们自己的脚本标记中，并将 ed.onChange 放入 page_load 中，将所有内容放入 page_load 中，并将所有 3 个放入它自己的脚本标记中。在所有情况下它都不起作用，甚至有时会破坏我的 page_load 中的 jquery...（是的，我更改了上面的代码以适合我的页面）

任何人都可以让它工作或提供解决方案吗？

代码

Answer 1

我只想将我的解决方案添加到这篇文章中，因为我几天来一直在努力解决同样的问题。我意识到这是一篇旧文章，但也许​​我的回答会对某人有所帮助，因为我相信这个问题仍然相关。

我正在开发一个 ASP.NET Web 表单应用程序，其中一个页面有一个包含在 UpdatePanel 中的文本区域控件。 tinyMCE 绑定到该文本区域。文本区域的文本来自转发器控件内的绑定文本框，因为我想从 ObjectDataSource 控件获取文本，而这是一种稍微笨拙的方法。在我看来，ObjectDataSource 控件很方便并且执行速度很快。

这是我的标记，其中包含 ObjectDataSource 控件、转发器、绑定文本框和文本区域（设置为多行的 asp:TextBox）。请注意，绑定的文本框设置为“display: none”：

<asp:ObjectDataSource ID="odsDetailText" runat="server" TypeName="Data.Document" SelectMethod="GetDocumentDetailText" />
<asp:Repeater ID="repBody" runat="server" DataSourceID="odsDetailText">
    <ItemTemplate>
        <asp:TextBox ID="tbxBodyBound" runat="server" Text='<%# Eval("Body") %>' CssClass="hidden" />
    </ItemTemplate>
</asp:Repeater>
<asp:TextBox ID="tbxBody" runat="server" TextMode="MultiLine" />

我还有一个 asp:Button 将tinyMCE 中的文本保存到SQL Server。所有这些控件都包含在 UpdatePanel 中。

我已将所有 jQuery 和 JavaScript 代码放在一个单独的文件中。我在下面列出了相关内容。概述：

• 我在 JavaScript pageLoad 事件中初始化tinyMCE。请注意，此事件会在完全和部分（异步）回发时触发，因此，tinyMCE 始终显示，并且不会在完全或部分回发之间消失。

• 此外，在 pageLoad 事件中，如果回发是异步的，我会开始侦听 ASP.NET PageRequestManager 引发的 BeginRequest 事件。我停止监听 JavaScript pageUnload 事件中的 BeginRequest 事件。这可以防止每次 pageLoad 触发时添加越来越多的侦听器。

• 当 BeginRequest 事件的事件处理程序触发时（单击页面上的“保存”按钮时），我获取tinyMCE 文本编辑器的 HTML 内容并将其保存到 cookie。我使用 jQuery cookie 插件来执行此操作： https://github.com/carhartl/jquery-cookie。为了安全起见，HTML 在 cookie 中进行编码。

• 现在，在单击“保存”按钮时执行的服务器代码中，将检索 cookie 的文本（编码为 HTML）并将其保存到 SQL Server。现在，该 cookie 已被删除。

• ASP.NET 通过 ObjectDataSource 控件将保存的数据绑定到隐藏的 textobx，textarea 控件的值设置为隐藏文本框的值，UpdatePanel 内的页面部分将呈现回浏览器。

• tinyMCE 现在从文本区域显示此文本，但它是编码的 HTML，而不是人类可读的。

• 因此，在 JavaScript pageLoad 事件中，我通过解码 HTML 来格式化tinyMCE 文本。

• 工作完成！

以下是我的脚本文件的相关部分：

// #########################################################
// Events
// #########################################################
// ---------------------------------------------------------
// Check for full and partial postbacks
// ---------------------------------------------------------
function pageLoad(sender, args) {

    // Register event handler for async postback beginning
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (!prm.get_isInAsyncPostBack()) {
        prm.add_beginRequest(onBeginRequest);
    };

    // Configure HTML editor
    HTMLEditorConfig();

    // Format HTML editor text
    HTMLEditorFormat();
};

// ---------------------------------------------------------
// When page unloads after full or partial postback
// ---------------------------------------------------------
function pageUnload(sender, args) {

    // Deregister event handler for async postback beginning
    Sys.WebForms.PageRequestManager.getInstance().remove_beginRequest(onBeginRequest);
};

// ---------------------------------------------------------
// Event handler for async postback beginning
// ---------------------------------------------------------
function onBeginRequest() {

    // Check whether to save text editor text
    HTMLEditorSave();
};

// #########################################################
// Functions
// #########################################################
// ---------------------------------------------------------
// Configure HTML text editor. tinyMCE converts standard textarea controls
// ---------------------------------------------------------
function HTMLEditorConfig() {

    // Determine edit mode
    var editMode = $('input:hidden[id*=hfEditMode]').val().toLowerCase();

    // If not in edit mode, prevent edits
    var editorReadOnly = null;
    var editorHeight = null;
    if (editMode == 'true') {
        editorReadOnly = '';
        editorHeight = '332';
    } else {
        editorReadOnly = 'true';
        editorHeight = '342';
    };

    // Initialise HTML text editor
    tinyMCE.init({
        mode: "textareas",
        plugins: "advhr,insertdatetime,print,preview,fullscreen",
        width: "488",
        height: editorHeight,

        // Theme options
        theme: "advanced",
        theme_advanced_buttons1: "newdocument,|,print,preview,|,cut,copy,paste,|,undo,redo,removeformat,|,bold,italic,underline,strikethrough,sub,sup,|,forecolor,backcolor",
        theme_advanced_buttons2: "justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,|,fontselect,fontsizeselect",
        theme_advanced_buttons3: "insertdate,inserttime,|,advhr,|,charmap,|,fullscreen",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "none",
        theme_advanced_resizing: false,

        // Skin options
        skin: "o2k7",
        skin_variant: "silver",

        // Custom css
        content_css: "../../Script/tiny_mce/custom.css",

        // Allow edits?
        readonly: editorReadOnly
    });
};

// ---------------------------------------------------------
// Format HTML editor text by ensuring its HTML is decoded
// ---------------------------------------------------------
function HTMLEditorFormat() {

    // Check bound textbox containing HTML for text editor
    var bodyText = $('input:text[id*=tbxBody]').val();

    // If HTML exists, decode it
    if (bodyText !== null) {
        tinyMCE.activeEditor.setContent(decodeURIComponent(bodyText));
    };
};

// ---------------------------------------------------------
// Save HTML text editor text to cookie for server-side processing.
// Can't save to hidden field or asp control as this function fires after viewstate is captured (I think).
// Extra content in viewstate would slow down page load anyway.
// ---------------------------------------------------------
function HTMLEditorSave() {

    // Determine edit mode
    var editMode = $('input:hidden[id*=hfEditMode]').val().toLowerCase();

    // If in edit mode, create cookie with encoded text editor HTML. Server code will save this to database.
    if (editMode == 'true') {
        var textToSave = tinyMCE.activeEditor.getContent();
        $.cookie('HTMLEditorText', textToSave);
    }
};

这是单击“保存”按钮时触发的服务器代码的一部分：

Private Sub Save()

    'Retrieve tinyMCE text from cookie
    Dim cookieName As String = "tinyMCEText"
    Dim cookies As HttpCookieCollection = Request.Cookies
    Dim text As String = cookies(cookieName).Value

    'Save text to database...

    'Delete cookie
    cookies.Remove(cookieName)

    'Databind text for tinyMCE
    repeaterTinyMCE.DataBind()
    Dim encodedText As String = DirectCast(repeaterTinyMCE.Controls(0).Controls(1), TextBox).Text
    textboxTinyMCE.Text = encodedText
End Sub

希望这对某人有帮助。

Answer 2

我想你想看看这个帖子：
如何使 TinyMCE 在 UpdatePanel 中工作？

确保使用 scriptmanager 注册您的 init 函数

ScriptManager.RegisterStartupScript(this.Page, 
         this.Page.GetType(), mce.ClientID, "pageLoad();", true);

Answer 3

回发时必须触发保存功能，请使用 Page.RegisterOnSubmitStatement 注册脚本 tinyMCE.triggerSave();

我注意到tinyMCE的init< /code> 函数只能调用选择所有文本区域或具有特定类别的文本区域。 exact 不起作用。

Answer 4

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

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

Answer 5

当我将 TinyMCE 放入更新面板时遇到的一件事是我必须采取各种技巧才能使其正常工作。请记住更新面板的工作原理，当您想要刷新它时，它完全替换了其中的 DOM，包括 TinyMCE。

我使用的解决方法是从更新面板中删除 TinyMCE，并将需要动态刷新的任何其他内容包装在更新面板中。如果我需要 TinyMCE 内容是动态的，我会通过它提供的 javascript API 将数据添加到 TinyMCE。