使用TinyMCE和ModalPopupExtender创建可编辑内容（草稿）
稍后再整理吧
<%@ Page Language="C#" ValidateRequest="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title><!– TinyMCE –>
<script src="tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
// Example content CSS (should be your site CSS)
content_css: "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url: "lists/template_list.js",
external_link_list_url: "lists/link_list.js",
external_image_list_url: "lists/image_list.js",
media_external_list_url: "lists/media_list.js",
// Replace values for the template plugin
template_replace_values: {
username: "Some User",
staffid: "991234"
}
});
</script>
<style type="text/css">
.modalBackground
{
position: absolute;
z-index: 100;
top: 0px;
left: 0px;
background-color: #000;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
</style>
<!– /TinyMCE –>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:Panel ID="Panel1" runat="server" Height="250px" Width="591px" onclick="onShow();">
Hello test;
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="Panel1_ModalPopupExtender" runat="server" DynamicServicePath=""
Enabled="True" TargetControlID="Panel1" BackgroundCssClass="modalBackground"
PopupControlID="Panel2">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="Panel2" runat="server" Height="250px" Width="591px">
<textarea name="elm1" id="elm1" rows="15" cols="80" style="width: 99%; height: 280px;">
</textarea>
<input id="Button1" type="button" value="OK" onclick="onOK();" />
<input id="Button2" type="button" value="Cancel" onclick="onCancel();" />
</asp:Panel>
<script type="text/javascript">
function onShow() {
tinyMCE.get("elm1").setContent($get("<%=Panel1.ClientID %>").innerHTML);
$find("Panel1_ModalPopupExtender").show();
}
function onOK() {
$get("<%=Panel1.ClientID %>").innerHTML = tinyMCE.get('elm1').getContent();
$find("Panel1_ModalPopupExtender").hide();
}
function onCancel() {
$find("Panel1_ModalPopupExtender").hide();
}
</script>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title><!– TinyMCE –>
<script src="tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
// Example content CSS (should be your site CSS)
content_css: "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url: "lists/template_list.js",
external_link_list_url: "lists/link_list.js",
external_image_list_url: "lists/image_list.js",
media_external_list_url: "lists/media_list.js",
// Replace values for the template plugin
template_replace_values: {
username: "Some User",
staffid: "991234"
}
});
</script>
<style type="text/css">
.modalBackground
{
position: absolute;
z-index: 100;
top: 0px;
left: 0px;
background-color: #000;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
</style>
<!– /TinyMCE –>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:Panel ID="Panel1" runat="server" Height="250px" Width="591px" onclick="onShow();">
Hello test;
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="Panel1_ModalPopupExtender" runat="server" DynamicServicePath=""
Enabled="True" TargetControlID="Panel1" BackgroundCssClass="modalBackground"
PopupControlID="Panel2">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="Panel2" runat="server" Height="250px" Width="591px">
<textarea name="elm1" id="elm1" rows="15" cols="80" style="width: 99%; height: 280px;">
</textarea>
<input id="Button1" type="button" value="OK" onclick="onOK();" />
<input id="Button2" type="button" value="Cancel" onclick="onCancel();" />
</asp:Panel>
<script type="text/javascript">
function onShow() {
tinyMCE.get("elm1").setContent($get("<%=Panel1.ClientID %>").innerHTML);
$find("Panel1_ModalPopupExtender").show();
}
function onOK() {
$get("<%=Panel1.ClientID %>").innerHTML = tinyMCE.get('elm1').getContent();
$find("Panel1_ModalPopupExtender").hide();
}
function onCancel() {
$find("Panel1_ModalPopupExtender").hide();
}
</script>
</form>
</body>
</html>
