TinyMCE 与 AJAX(更新面板)永远没有价值

2023-11-25

我想对更新面板内的文本区域使用富文本编辑器。

我找到了这个帖子: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/ and 无法从同一个 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 />

我怎样才能获得这些值,以便后面的代码能够真正获得文本区域中输入的内容,并且我的验证器不会显示它是空的?即使在异步回发之后,因为表单上有多个按钮可以在实际提交之前更新它。

Thanks!

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

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

并且这个错误总是会导致错误信息的显示。

Edit:

好吧,我在这里变得绝望了,我花了几个小时在这上面。我终于在专家交流中找到了我认为是获胜者的内容,其中指出了以下内容(其中有一部分是关于在 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(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. 当用户从tinyMCE控件更改/模糊时,我们希望确保文本区域/文本框得到正确更新:

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

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

任何人都可以让它发挥作用或提供解决方案吗?

代码


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

我正在开发一个 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

希望这对某人有帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

TinyMCE 与 AJAX(更新面板)永远没有价值 的相关文章

随机推荐