我想对更新面板内的文本区域使用富文本编辑器。
我找到了这个帖子: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结合使用的任何人:
-
将开始/结束处理程序附加到 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控件更改/模糊时,我们希望确保文本区域/文本框得到正确更新:
ed.onChange.add(function(ed, l) {
tinyMCE.triggerSave(true, true);
});
现在我尝试了这段代码,将其放入自己的脚本标签中,将开始和结束请求放入自己的脚本标签中,并将 ed.onChange 放入 page_load 中,将所有内容放入 page_load 中,并将所有 3 个放入自己的脚本标签中。在所有情况下它都不起作用,甚至有时会破坏我的 page_load 中的 jquery...(是的,我更改了上面的代码以适合我的页面)
任何人都可以让它发挥作用或提供解决方案吗?
代码