多くの人ができたように見えますが、解決策を実装できないことをしようとしています。TinyMCEコントロールは、UpdatePanelで囲むまで、asp.net形式で非常にうまく機能します。UpdatePanelは、ポストバック後に壊れます。RegisterClientScriptBlockメソッドのようないくつかの修正を試しましたが、それでも失敗し、ポストバック後にtinyMCEコントロールを失います。
以下は、UpdatePanelの外側と内側のコントロールを備えた完全なテストプロジェクト（VS 2008）であり、それぞれにポストバックを生成するためのボタンがあります。また、プロジェクトには、誰かにアイデアが得られる場合に備えて、試したいくつかの呼び出しのコメント付きコードを含むEditorTestコントロールがあります。
MCEフォーラムのいくつかのソリューションのソースは次のとおりです：
AJAX
UpdatePanel
init毎回変更を実行するには、UpdatePanel次を使用してスクリプトを登録する必要がありますScriptManager。
// control is your UpdatePanel
ScriptManager.RegisterStartupScript(control, control.GetType(), control.UniqueID, "your_tinymce_initfunc();", true);
注:exact init 関数で mode を使用することはできません。textareasまたは のいずれかを使用できclass selectorます。そうしないと、適切に機能しません。
また、使用する必要があります
ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "", "tinyMCE.triggerSave();");
UpdatePanel のポストバックでは、エディターのコンテンツは Textbox に保存されません。これは、デフォルトの動作が のみでform.submitあるためです。そのため、何かを送信すると、投稿する前にテキストが保存されます。
値を取得するコード ビハインドでは、プロパティにアクセスするだけで済みTextBox.Textます。
注: .NET GZipped を使用している場合は、おそらく削除する必要があります。動作させることができなかったため、これを完全に削除する必要がありました。
わかりました、あなたの問題は2つあります。Stefy が回答の一部を提供してくれました。次のようにスタートアップ スクリプトを登録して、ポストバックで TinyMCE を初期化する必要があります。
using System.Web.UI;
namespace TinyMCEProblemDemo
{
public partial class EditorClean : UserControl
{
protected void Page_Load(object sender, System.EventArgs e)
{
ScriptManager.RegisterStartupScript(this.Page,
this.Page.GetType(), mce.ClientID, "callInt" + mce.ClientID + "();", true);
}
}
}
2 番目の問題は、カスタム コントロールの実装にあります。カスタム コントロールの設計は、この回答の範囲外です。Google がお手伝いします。
ページにコントロールの複数のインスタンスがあり、スクリプトが複数回レンダリングされるため、スクリプトで問題が発生する可能性があります。これは、問題を解決するためにマークアップをどのように変更したかです (スクリプト関数の動的な名前付けに注意してください。カスタム コントロールは自己完結型であり、モードは tinyMCE.init で「正確」である必要があります)。
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EditorClean.ascx.cs"
Inherits="TinyMCEProblemDemo.EditorClean" %>
<script type="text/javascript" src="Editor/tiny_mce.js"></script>
<script type="text/javascript">
function myCustomCleanup<%= mce.ClientID%>(type, value) {
if (type == "insert_to_editor") {
value = value.replace(/</gi, "<");
value = value.replace(/>/gi, ">");
}
return value;
}
function myCustomSaveContent<%= mce.ClientID%>(element_id, html, body) {
html = html.replace(/</gi, "<");
html = html.replace(/>/gi, ">");
return html;
}
function callInt<%= mce.ClientID%>() {
tinyMCE.init({
mode: "exact",
elements: "<%= mce.ClientID%>",
theme: "advanced",
skin: "o2k7",
plugins: "inlinepopups,paste,safari",
theme_advanced_buttons1: "fontselect,fontsizeselect,|,forecolor,backcolor,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,cut,copy,paste,pastetext,pasteword",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
cleanup_callback: "myCustomCleanup<%= mce.ClientID%>",
save_callback: "myCustomSaveContent<%= mce.ClientID%>"
});
}
</script>
<textarea runat="server" id="mce" name="editor" cols="50" rows="15">Enter your text here...</textarea>
このソリューションは、TinyMCE 4.2.3 では機能しなくなりました。tinymce.mceRemoveControl() を使用する代わりに、tinymce.remove() を使用する必要があります。完全な動作例を次に示します。
ページ
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Frame.master" AutoEventWireup="true" CodeFile="FullImplementation.aspx.cs"
Inherits="TinyMCE" ValidateRequest="false" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cphContent" Runat="Server">
<asp:ScriptManager runat="server"/>
<asp:UpdatePanel runat="server" id="upUpdatPanel">
<ContentTemplate>
<asp:TextBox runat="server" id="tbHtmlEditor" TextMode="MultiLine">
Default editor text
</asp:TextBox>
<asp:Dropdownlist runat="server" ID="ddlTest" AutoPostBack="true" OnSelectedIndexChanged="ddlTest_SelectedIndexChanged">
<Items>
<asp:ListItem Text="A"></asp:ListItem>
<asp:ListItem Text="B"></asp:ListItem>
</Items>
</asp:Dropdownlist>
<asp:Button runat="server" ID="butSaveEditorContent" OnClick="butSaveEditorContent_Click" Text="Save Html Content"/>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
$(document).ready(function () {
/* initial load of editor */
LoadTinyMCE();
});
/* wire-up an event to re-add the editor */
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler_Page);
/* fire this event to remove the existing editor and re-initialize it*/
function EndRequestHandler_Page(sender, args) {
//1. Remove the existing TinyMCE instance of TinyMCE
tinymce.remove( "#<%=tbHtmlEditor.ClientID%>");
//2. Re-init the TinyMCE editor
LoadTinyMCE();
}
function BeforePostback() {
tinymce.triggerSave();
}
function LoadTinyMCE() {
/* initialize the TinyMCE editor */
tinymce.init({
selector: "#<%=tbHtmlEditor.ClientID%>",
plugins: "link, autolink",
default_link_target: "_blank",
toolbar: "undo redo | bold italic | link unlink | cut copy paste | bullist numlist",
menubar: false,
statusbar: false
});
}
</script>
</asp:Content>
コードビハインド:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class TinyMCE : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// we have to tell the editor to re-save the date on Submit
if (!ScriptManager.GetCurrent(Page).IsInAsyncPostBack)
{
ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "SaveTextBoxBeforePostBack", "SaveTextBoxBeforePostBack()");
}
}
protected void butSaveEditorContent_Click(object sender, EventArgs e)
{
string htmlEncoded = WebUtility.HtmlEncode(tbHtmlEditor.Text);
}
private void SaveToDb(string htmlEncoded)
{
/// save to database column
}
protected void ddlTest_SelectedIndexChanged(object sender, EventArgs e)
{
}
}
更新パネルで tinyMCE を機能させる正しい方法:
1) 「送信」ボタンの OnClientClick のハンドラーを作成します。
2) tinyMCE.execCommand("mceRemoveControl", false, '<%= txtMCE.ClientID %>'); を実行します。ハンドラーで、ポストバックの前に tinyMCE インスタンスを削除します。
3) 非同期ポストバックで、ScriptManager.RegisterStartupScript を使用して tinyMCE.execCommand("mceAddControl", true, '<%= txtMCE.ClientID %>'); を実行します。
基本的には、非同期ポストバックの前に mceRemoveControl コマンドを使用し、非同期ポストバック後に mceAddControl コマンドを実行するスタートアップ スクリプトを登録するだけです。あまりにもタフではありません。
これは古い質問ですが、何時間も検索して答えを探し回った後、思いついた解決策を投稿する義務があると感じています。
少なくとも私が使用している実装 (UpdatePanel 内の複数のエディター) では、tinyMCE は、UpdatePanel が送信されたときにコントロールが消えることを通知する必要があるようです。そうしないと、再度ロードすることを拒否します。
そのため、TinyMCE を初期化するコード (ページ全体が読み込まれたときにのみ実行する必要があります) に加えて、MCE テキストボックスごとに次のことを行う必要があります。
ScriptManager.RegisterStartupScript(this, this.GetType(), elm1.UniqueID+"Add",
"tinyMCE.execCommand('mceAddControl', true,'" + elm1.ClientID + "');", true);
ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), elm1.UniqueID + "Remove",
"tinyMCE.execCommand('mceRemoveControl', true,'" + elm1.ClientID + "');");
elm1 は tinyMCE 要素が何であれです。私のはUserControlにあるテキストエリアですが、テキストエリアをバインド/バインド解除する任意のアイテムに適用できます。
.NET Framework 4 を使用しているユーザー向けにこの質問への回答を更新すると、次のコードを挿入することで、TinyMCE を更新パネル内の TextBox にアタッチすることに成功しました。
<head></head> 領域内のマークアップ:
<script src="scripts/tinymce/tinymce.min.js" type="text/javascript"></script>
<script type="text/javascript">
tinyMCE.init({
selector: ".tinymcetextarea",
mode: "textareas",
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace visualblocks visualchars code fullscreen autoresize insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor",
"autosave codesample colorpicker image imagetools importcss layer"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media | forecolor backcolor emoticons",
style_formats: [
{ title: 'Bold text', inline: 'b' },
{ title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
{ title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
{ title: 'Example 1', inline: 'span', classes: 'example1' },
{ title: 'Example 2', inline: 'span', classes: 'example2' },
{ title: 'Table styles' },
{ title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
]
});
</script>
<body></body> 領域内のマークアップ:
<asp:TextBox ID="tbContentHtml" CssClass="tinymcetextarea" Wrap="true" runat="server" Width="90%" TextMode="MultiLine" />
最後に、Page_Load イベントの分離コードで:
ScriptManager.RegisterStartupScript(this, this.GetType(), tbContentHtml.UniqueID + "Add", "tinyMCE.execCommand('mceAddEditor', true,'" + tbContentHtml.ClientID + "');", true);
ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), tbContentHtml.UniqueID + "Remove", "tinyMCE.execCommand('mceRemoveEditor', true,'" + tbContentHtml.ClientID + "');");
私はこれ
<script language="javascript" type="text/javascript">
function pageLoad(sender, args) {
aplicartinyMCE();
}
function aplicartinyMCE() {
tinyMCE.init({
mode: "specific_textareas",
editor_selector: "mceEditor",
.....
});
}
</script>
非同期ポストバックのたびにエディタを初期化します。
次に、page_load イベントで
ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "salvarEditorMCE", "tinyMCE.triggerSave();");
更新パネルが更新されるたびに、TinyMCE の初期化メソッドを呼び出す必要があります。
このためには、RegisterStartupScript メソッドからこのメソッド (tinyMCE.init) を呼び出すか、次のようにページの head セクションにページ読み込み JavaScript 関数を作成する必要があります。
function pageLoad() {
tinyMCE.init();
}
この関数は、更新パネルが更新されるたびに実行されます。
私はajax呼び出しの応答生成後に小さなmceを呼び出すようにこの問題を解決しました
function edittemp(name) {
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
var url="edit_temp.php";
url=url+"?id="+name;
xmlhttp.onreadystatechange=stateChanged3;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged3()
{
if (xmlhttp.readyState==4)
{
spl_txt=xmlhttp.responseText.split("~~~");
document.getElementById("edit_message").innerHTML=spl_txt[0];
tinyMCE.init({
theme : "advanced",
mode: "exact",
elements : "elm1",
theme_advanced_toolbar_location : "top",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,"
+ "justifyleft,justifycenter,justifyright,justifyfull,formatselect,"
+ "bullist,numlist,outdent,indent",
theme_advanced_buttons2 : "link,unlink,anchor,image,separator,"
+"undo,redo,cleanup,code,separator,sub,sup,charmap",
theme_advanced_buttons3 : "",
height:"350px",
width:"600px"
});
}
}
そして、ajax呼び出しによって呼び出されたページは
<?php
$name=$_GET['id'];
include 'connection.php';
$result=mysql_query("SELECT * FROM `templete` WHERE temp_name='$name' and status=1");
$row = mysql_fetch_array($result);
$Content=$row['body'];
?>
<html>
<head>
<title>editing using tiny_mce</title>
<script language="..." src="tinymce/jscripts/tiny_mce /tiny_mce.js"></script>
</head>
<body>
<h2>change the template here</h2>
<form method="post" action="save_temp.php?name=<?php echo $name;?>">
<textarea id="elm1" name="elm1" rows="15" cols="80"><?php echo $Content;?></textarea>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>
そんなときに役立つかもしれません。
これらを見たかどうかはわかりません。
http://joakimk.blogspot.com/2007/07/tinymce-inside-of-aspnet-ajax.html
と
http://codeodyssey.com/archive/2007/7/18/updatepanel-tinymce-demo-with-project-zip-file
ここにtinymceフォーラムの投稿があります
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=12682
幸運を。
TinyMCE（および他のWYSIWYGエディター、FCKEditorなど）は、ポストバック検証の問題に悩まされています。デフォルトでは、ポストバック上のASP.Netページの内容がチェックされ、エンコードされていないHTMLはポストバック検証エラーをスローします。
現在、これらのフォーラムを含む多くの人々が、ポストバック検証を無効にすることを提案しています。validaterequest= "false"ですが、これによりスクリプト攻撃を受けやすくなります。最善の方法は、非同期ポストバックの直前に発生する非同期ポストバックイベントに関数をバインドすることです。 。このJavaScript関数は、サーバーにポストバックされるTinyMCEデータをHTMLエンコードする必要があります。これにより、ポストバック検証に合格し、問題がなくなります。
TinyMCEや他のエディターはポストバックでこれを正しく実行しますが、非同期ポストバックでは実行しないため、問題が発生します。実際、TinyMCEのソースを見ると、これを実行する関数を見つけて、イベントバインディングを追加するだけです。
お役に立てれば