.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