Как заставить TinyMCE работать в UpdatePanel?

TinyMCE (а также другие WYSIWYG-редакторы, FCKEditor и т.д.) страдает от проблем проверки обратной передачи. По умолчанию любой странице ASP.Net на обратной передаче проверили ее содержание, и любой незакодированный HTML бросает ошибку проверки обратной передачи.

Теперь многие люди, включая на тех форумах предлагают отключить проверку обратной передачи, validaterequest = "ложь", но это делает Вас восприимчивыми к сценариям нападений, лучшая вещь сделать, связывают функцию с асинхронным событием возврата, которое исчерпывает непосредственно перед асинхронной обратной передачей. Эта функция JavaScript должна к HTML закодировать данные TinyMCE, отправляемые назад на сервер, это затем передаст проверку обратной передачи, и Вы будете в порядке.

я верю TinyMCE, и другие редакторы правильно делают это на обратных передачах, но не асинхронных обратных передачах следовательно проблема, на самом деле если Вы смотрите на источник TinyMCE, можно, вероятно, найти их функцию, которая делает это и просто добавляет привязку события.

Hope это помогает

Не уверенный, если Вы посмотрели на них.

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 всякий раз, когда обновляется панель обновления.

Для этого вам нужно либо вызвать этот метод (tinyMCE.init) из метода RegisterStartupScript, или создать функцию JavaScript загрузки страницы в разделе заголовка страницы следующим образом:

function pageLoad() {
   tinyMCE.init();
}

Эта функция будет выполняться при каждом обновлении панели обновления.

Ok, your problem is two fold. Stefy supplied you with part of the answer, which is you have to initialize TinyMCE on the postback by registering startup script like so:

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);
        }
    }
}

The second problem you have is with your implementation of a custom control. Designing custom controls is out of scope of this answer. Google can help you there.

You have multiple instances of your control on the page which can cause you issues with script, as it get rendered multiple times. This is how I modified your markup to solve your issue(notice dynamic naming of your script functions, custom controls should be self contained and mode: "exact" on the 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(/&lt;/gi, "<");
            value = value.replace(/&gt;/gi, ">");
        }
        return value;
    }
    function myCustomSaveContent<%= mce.ClientID%>(element_id, html, body) {
        html = html.replace(/</gi, "&lt;");
        html = html.replace(/>/gi, "&gt;");
        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>

Я сделал следующее:

Сначала я добавил этот Javascript в свой страница:

<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);

function endRequestHandler(sender,args)
{
    tinyMCE.idCounter=0;
    tinyMCE.execCommand('mceAddControl',false,'htmlContent');
}

function UpdateTextArea()
{ 
    tinyMCE.triggerSave(false,true);
}
</script>

Поскольку я создаю ASP.NET и использую кнопку ASP.NET на своей странице, мне пришлось добавить следующее к загрузке страницы:

protected void Page_Load(object sender, EventArgs e)
{
    Button1.Attributes.Add("onclick", "UpdateTextArea()");
}

Правильный способ заставить tinyMCE работать в панели обновления:

1) Создайте обработчик для OnClientClick вашей кнопки «отправить».

2) Запустите tinyMCE.execCommand ("mceRemoveControl", false, '<% = txtMCE.ClientID%>'); в обработчике, чтобы удалить экземпляр tinyMCE перед обратной передачей.

3) В асинхронной обратной передаче используйте ScriptManager.RegisterStartupScript для запуска tinyMCE.execCommand ("mceAddControl", true, '<% = txtMCE.ClientID%>');

По сути, все, что вам нужно сделать, это используйте команду mceRemoveControl перед асинхронной обратной передачей и зарегистрируйте сценарий запуска для запуска команды mceAddControl после асинхронной обратной передачи. Не слишком круто.

Для выполнения init каждый раз при изменении UpdatePanel необходимо зарегистрировать сценарий с помощью ScriptManager :

// control is your UpdatePanel
ScriptManager.RegisterStartupScript(control, control.GetType(), control.UniqueID, "your_tinymce_initfunc();", true);

ПРИМЕЧАНИЕ: Вы не можете использовать режим точный в своей функции инициализации, вы можете использовать либо textareas , либо селектор классов , иначе он не будет работать должным образом.

Вы также должны использовать

ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "", "tinyMCE.triggerSave();");

При обратной передаче UpdatePanel содержимое редактора не сохраняется в текстовом поле, потому что поведение по умолчанию только для form.submit , поэтому при отправке чего-либо он сохранит текст перед публикацией.

Чтобы получить значение в коде, вам просто нужно получить доступ к свойству TextBox.Text .

ПРИМЕЧАНИЕ: Если вы используете .NET GZipped, вам, вероятно, придется отказаться от него, я не смог заставить его работать, мне пришлось удалить его полностью.