2010-05-12 8 views
9

मैं एक अद्यतन पैनल के अंदर एक टेक्स्ट क्षेत्र के लिए एक रिच टेक्स्ट एडिटर का उपयोग करना चाहता था। इस सवाल के माध्यम से http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors:AJAX (अपडेट पैनल) के साथ TinyMCE का कोई मूल्य नहीं है

मैं इस पोस्ट पाया Need ASP.Net/MVC Rich Text Editor

के रूप में मैं यह पहले इस्तेमाल गैर AJAX स्थितियों में TinyMCE के साथ जाने का फैसला किया, और यह है कि सूची में यह AJAX के संगत है में कहते हैं। ठीक है, मैं अच्छा ओल 'tinyMCE.init({ //settings here }); परीक्षण करता हूं और अपडेट पैनल अपडेट करने के बाद गायब हो जाता है। मुझे यहां एक प्रश्न से पता चला है कि यह page_load फ़ंक्शन में होना चाहिए ताकि यह एसिंक पोस्टबैक पर भी चलाया जा सके। ठीक है और पैनल रहता है। हालांकि, मेरे टेक्स्टरेरा से मूल्य जमा करने का प्रयास करने पर, इसका पाठ हमेशा खाली के रूप में वापस आता है क्योंकि मेरा फॉर्म वैलिडेटर हमेशा कहता है कि "आपको विवरण दर्ज करना होगा" जब भी मैं इसमें टेक्स्ट दर्ज करता हूं। पृष्ठ लोड होने पर और एसिंक पोस्टबैक के बाद पृष्ठ पर पहली बार ऐसा होता है।

ठीक है मुझे यह http://www.dallasjclark.com/using-tinymce-with-ajax/ और Can't post twice from the same AJAX TinyMCE textarea मिल गया है। मैं इस कोड को tinyMCE.init के ठीक बाद अपने पेज लोड फ़ंक्शन में जोड़ने का प्रयास करता हूं। ऐसा करने से मेरे सभी jquery को पेज_लोड में भी बुलाया जा रहा है, और यह अभी भी एक ही समस्या है।

मैं अभी भी क्लाइंट साइड स्क्रिप्टिंग सामग्री के लिए बहुत शुरुआत कर रहा हूं, तो शायद मुझे पेज_लोड की तुलना में कोड को एक अलग स्थान पर रखना होगा? निश्चित नहीं है कि मेरे द्वारा लिंक की गई पोस्ट इस कोड को कहां रखना है, इस पर बहुत सुराग नहीं था।

मेरे जावास्क्रिप्ट:

<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'); जो कि एक सवाल संकेत दिया भी जोड़ा जाना चाहिए नहीं है। मैंने इसे जोड़ने का प्रयास किया लेकिन फिर से, यह सुनिश्चित नहीं था कि इसे कहां रखा जाए और इसे पेज_लोड में डालने से कोई प्रभाव नहीं पड़े।

पाठ बॉक्स नियंत्रण:

<asp:TextBox ID="tbDescription" runat="server" TextMode="MultiLine" 
       Width="500px" Height="175px"></asp:TextBox><br /> 

कैसे इतना है कि कोड के पीछे वास्तव में करने के पाठ क्षेत्र में क्या लिखा गया हो और मेरी सत्यापनकर्ता हुए कहा कि यह खाली होने के रूप में नहीं आएगा कर सकते हैं मैं इन मूल्यों को मिल सकता है? एसिंक पोस्टबैक के बाद भी, क्योंकि मेरे पास फॉर्म पर कई बटन हैं जो वास्तविक सबमिशन से पहले इसे अपडेट करते हैं।

धन्यवाद!

संपादित करें: अधिक स्पष्टीकरण के लिए मैं बहुत तरह बैक-एंड पर फ़ॉर्म सत्यापन हैं:

If tbDescription.Text = "" Or tbDescription.Text Is Nothing Then 
     lblDescriptionError.Text = "You must enter a description." 
     isError = True 
    Else 
     lblDescriptionError.Text = "" 
    End If 

और इस त्रुटि हमेशा कारण होगा त्रुटि संदेश dispalyed किया जाना है।

संपादित करें: इस पर

ठीक है मैं यहाँ हताश हो रही है, मैं बिताया है घंटे। मैं अंत में पाया है कि मैं क्या विशेषज्ञों एक्सचेंज पर एक विजेता जिसमें कहा गया है निम्नलिखित माना (वहाँ एक्सएमएल में मूल्य एन्कोडिंग के बारे में एक हिस्सा था, लेकिन मैं छोड़ दिया है कि): http://www.experts-exchange.com/Programming/Languages/C_Sharp/Q_25059848.html

जो कोई साथ tinyMCE का उपयोग करना चाहता के लिए AJAX.Net:

  1. संलग्न शुरू/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); 
         } 
        }); 
    
  2. उपयोगकर्ता परिवर्तन/tinyMCE नियंत्रण से blurs करते हैं, हम यह सुनिश्चित करें कि चाहते हैं पाठ क्षेत्र/पाठ बॉक्स ठीक से अद्यतन हो जाता है:

    ed.onChange.add(function(ed, l) { 
         tinyMCE.triggerSave(true, true); 
    }); 
    

अब मैं इस कोड का अपना स्क्रिप्ट टैग में डालने की कोशिश की है, डाल शुरू करते हैं और अपने स्वयं के स्क्रिप्ट टैग में अंत अनुरोध और में ed.onChange डाल पेज_लोड, पेज_लोड में सबकुछ डालें, और इसमें सभी 3 डालें अपनी स्क्रिप्ट टैग। सभी मामलों में यह कभी काम नहीं करता है, और कभी-कभी jquery को भी तोड़ देता है जो कि मेरे पेज_लोड में भी है ... (और हाँ मैंने अपने पेज को फिट करने के लिए उपर्युक्त कोड बदल दिया है)

क्या कोई इसे काम करने या समाधान देने के लिए प्राप्त कर सकता है?

कोड

उत्तर

0

साथ आप init समारोह रजिस्टर करने के लिए सुनिश्चित करें कि वैसे वहाँ दो तरीके मुझे मिल रहे थे यह काम करने के लिए, जिसने वास्तव में समस्या को ठीक नहीं किया, बस इससे बचें।

एक FCKeditor .NET नियंत्रण का उपयोग करना था, यह मेरे लिए हालांकि 2-3 सेकंड की तरह धीमा धीमा हो गया। इसलिए मैंने फॉर्म को केवल दो अपडेट पैनल बनाने का फैसला किया, और टेक्स्ट क्षेत्र को तब के बीच में रखा, अनिवार्य रूप से अपडेट पैनल से टेक्स्ट एरिया लेना। यह एक सस्ता चाल की तरह महसूस किया जो आवश्यक नहीं होना चाहिए, लेकिन यह ठीक काम करता है। किसी भी पोस्ट किए गए समाधान या सुझावों में से कोई भी मेरे लिए काम नहीं करता है, इसलिए मैंने यही किया। अगर मुझे पाठ क्षेत्र को अद्यतन पैनल में रखना है, तो यह काम नहीं करेगा।

2

मुझे लगता है कि आप इस पोस्टिंग को देखने के लिए चाहते हैं: How to make TinyMCE work inside an UpdatePanel?

scriptmanager

ScriptManager.RegisterStartupScript(this.Page, 
     this.Page.GetType(), mce.ClientID, "pageLoad();", true); 
+0

मैंने उस धागे को देखा है और मैंने यह किया है, यदि आप चिह्नित उत्तर के नीचे उत्तर पढ़ते हैं, तो यह कहता है कि आप या तो स्टार्ट-अप स्क्रिप्ट पंजीकृत कर सकते हैं या इसे पृष्ठ_लोड जावास्क्रिप्ट फ़ंक्शन में डाल सकते हैं। मैंने उत्तरार्द्ध चुना और यह काम करता है क्योंकि मुझे उस व्यक्ति की एक ही समस्या नहीं है।उस व्यक्ति को पोस्ट-बैक के बाद नियंत्रण खो देता है, मुझे यह समस्या नहीं है, मेरी समस्या यह है कि जब मैं टेक्स्टरेरा भरता हूं और सबमिट करने का प्रयास करता हूं तो एक पोस्टबैक (और बाद में) से पहले, यह मुझे बता रहा है कि tbDescription.text खाली है। – SventoryMang

0

एक चीज जो मैंने एक अद्यतन पैनल में TinyMCE डालने पर भाग लिया था, यह था कि मुझे इसे सही काम करने के लिए सभी प्रकार की चालें करनी पड़ीं। ध्यान रखें कि अद्यतन पैनल कैसे काम करता है, जब आप इसे रीफ्रेश करना चाहते हैं, तो यह TinyMCE समेत इसके अंदर डोम को पूरी तरह से बदल देता है।

मेरे द्वारा उपयोग किए जाने वाले वर्कअराउंड को अद्यतन पैनल से TinyMCE को निकालना था और किसी भी अन्य चीज़ को लपेटना था जिसे अद्यतन पैनल में गतिशील रूप से रीफ्रेश करने की आवश्यकता थी। मैं तब जावास्क्रिप्ट एपीआई के माध्यम से TinyMCE में डेटा जोड़ता हूं, अगर मुझे गतिशील होने के लिए TinyMCE सामग्री की आवश्यकता होती है।

1

आप जब वापस पोस्टिंग समारोह को बचाने को गति प्रदान Page.RegisterOnSubmitStatement का उपयोग स्क्रिप्ट tinyMCE.triggerSave();

मैंने देखा है कि tinyMCE के init समारोह केवल एक निश्चित वर्ग के साथ सभी textareas या textareas का चयन कहा जा सकता है रजिस्टर करने के लिए किया है। exact काम नहीं करता है।

2

मैं इस पोस्ट में अपना समाधान जोड़ना चाहता हूं, क्योंकि मैं कुछ दिनों के लिए एक ही मुद्दे के साथ कुश्ती कर रहा था। मुझे एहसास है कि यह एक पुरानी पोस्ट है, लेकिन शायद मेरा जवाब किसी की मदद करेगा, क्योंकि मेरा मानना ​​है कि सवाल अभी भी प्रासंगिक है।

मैं एक एएसपी.नेट वेब फॉर्म एप्लिकेशन विकसित कर रहा हूं, और पृष्ठों में से एक को टेक्स्टपेरा नियंत्रण एक अपडेटपेनल में निहित है। tinyMCE इस textarea से बांधता है।टेक्स्टरेरा के लिए टेक्स्ट दोहराए गए नियंत्रण बॉक्स के भीतर एक बाउंड टेक्स्टबॉक्स से आता है, क्योंकि मैं ऑब्जेक्टडेटा स्रोत नियंत्रण से टेक्स्ट प्राप्त करना चाहता हूं, और यह ऐसा करने का थोड़ा सा तरीका है। मेरे दिमाग में, ऑब्जेक्टडेटा स्रोत नियंत्रण सुविधाजनक हैं और वे जल्दी से निष्पादित होते हैं।

यहां मेरा मार्कअप है जिसमें ऑब्जेक्टडेटा स्रोत नियंत्रण, पुनरावर्तक, बाध्य टेक्स्टबॉक्स, और टेक्स्टरेरा (एक एएसपी: टेक्स्टबॉक्स सेट मल्टीलाइन) है। ध्यान दें कि बाध्य पाठ बॉक्स सेट किया गया है करने के लिए "प्रदर्शन: कोई": एसक्यूएल सर्वर के लिए tinyMCE में पाठ को बचाने के लिए बटन:

<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" /> 

मैं भी एक एएसपी की है। इन सभी नियंत्रणों को एक अद्यतन पैनेल के भीतर निहित किया गया है।

मैंने अपने सभी jQuery और जावास्क्रिप्ट कोड को एक अलग फ़ाइल में रखा है। मैं नीचे प्रासंगिक बिट्स शामिल हैं। एक सिंहावलोकन के रूप में:

  • मैं जावास्क्रिप्ट पेज लोड ईवेंट में tinyMCE प्रारंभ करता हूं। ध्यान दें कि यह घटना पूर्ण और आंशिक (async) पोस्टबैक के लिए आग लगती है, इसलिए tinyMCE हमेशा प्रदर्शित होता है और पूर्ण या आंशिक पोस्टबैक के बीच गायब नहीं होता है।

  • पृष्ठ में भी लोड करें, यदि कोई पोस्टबैक एसिंक है, तो मैं ASP.NET PageRequestManager द्वारा उठाए गए BeginRequest ईवेंट को सुनना शुरू करता हूं। मैं जावास्क्रिप्ट पेज अननोड इवेंट में BeginRequest ईवेंट के लिए सुनना बंद कर देता हूं। इससे प्रत्येक बार पेज लोड लोड होने पर अधिक से अधिक श्रोताओं को जोड़ा जा रहा है।

  • जब BeginRequest ईवेंट के लिए ईवेंट हैंडलर आग लगती है (जब मेरे पृष्ठ पर सहेजें बटन क्लिक किया जाता है), तो मुझे tinyMCE टेक्स्ट एडिटर की HTML सामग्री मिलती है और इसे कुकी में सहेजती है। मैं ऐसा करने के लिए jQuery कुकी प्लगइन का उपयोग करता हूं: https://github.com/carhartl/jquery-cookie। सुरक्षा के लिए एचटीएमएल कुकी में एन्कोड किया गया है।

  • अब, सर्वर कोड में जो सेव बटन क्लिक किया जाता है, निष्पादित करता है, कुकी का टेक्स्ट (जो HTML को एन्कोड किया गया है) पुनर्प्राप्त और SQL सर्वर में सहेजा जाता है। कुकी अब हटा दी गई है।

  • एएसपी.नेट ऑब्जेक्टडेटा स्रोत नियंत्रण के माध्यम से सहेजे गए डेटा को छिपे हुए टेक्स्टबॉक्स पर बांधता है, टेक्स्टरेरा नियंत्रण का मान छिपे हुए टेक्स्टबॉक्स पर सेट होता है, और UpdatePanel के भीतर पृष्ठ का हिस्सा ब्राउज़र पर वापस प्रस्तुत किया जाता है।

  • tinyMCE अब टेक्स्ट टेक्स्ट से इस पाठ को प्रदर्शित करता है, लेकिन यह HTML को एन्कोड किया गया है और मानव पठनीय नहीं है।

  • तो, जावास्क्रिप्ट पेज लोड ईवेंट में, मैं HTML को डीकोड करके tinyMCE टेक्स्ट को प्रारूपित करता हूं।

  • काम किया!

    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 
    

    आशा इस:

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

    यहाँ सर्वर कोड आग है कि जब सहेजें बटन क्लिक किया जाता है के एक हिस्से को है:

यहाँ मेरी स्क्रिप्ट फ़ाइल के प्रासंगिक भागों रहे हैं किसी की मदद करता है।

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^