其他分享
首页 > 其他分享> > .net – 带有AJAX的TinyMCE(更新面板)从来没有价值

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

作者:互联网

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

我发现这个帖子:http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors来自这个问题:Need ASP.Net/MVC Rich Text Editor

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

好吧,我发现这个http://www.dallasjclark.com/using-tinymce-with-ajax/Can’t post twice from the same 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

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

>将开始/结束处理程序附加到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);
      }
   });

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

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

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

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

编码

解决方法:

我只想在这篇文章中添加我的解决方案,因为我已经在同一个问题上挣扎了几天.我意识到这是一个老帖子,但也许我的答案会帮助某人,因为我相信这个问题仍然有用.

我正在开发一个ASP.NET Web表单应用程序,其中一个页面包含一个包含在UpdatePanel中的textarea控件. tinyMCE与这个textarea绑定. textarea的文本来自转发器控件中的绑定文本框,因为我想从ObjectDataSource控件获取文本,这是一种稍微笨拙的方式.在我看来,ObjectDataSource控件很方便,而且执行起来很快.

这是我的标记,包含ObjectDataSource控件,转发器,绑定文本框和textarea(设置为多行的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事件的事件处理程序触发时(单击我页面上的Save按钮),我获取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现在显示textarea中的这个文本,但它是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

希望这有助于某人.

标签:javascript,net,tinymce,updatepanel,asp-net-ajax
来源: https://codeday.me/bug/20191007/1869603.html