टिनी MCE जोड़ने कस्टम HTML टैग

Question

मैं MODx के लिए टिनी 4.3.3 का उपयोग कर रहा मैं एक

<p class="classname"> 
<em class="openImg"></em> 
    Some randome Input text by the user 
<em class="closeImg"></em> 
</p> 

अगर एक अतिरिक्त मेनू आइटम है या पैरा लटकती मेनू में है मुझे आपत्ति नहीं है जोड़ने की जरूरत है। मैं बस संभवतः कम समय में कम से कम काम करना चाहता हूं।

मैंने इस http://alexzag.blogspot.co.uk/2009/12/custom-tags-in-tinymce.html को आजमाया है लेकिन किसी भी तरह यह काम नहीं करता है।

क्या कोई मुझे एक अच्छा ट्यूटोरियल इंगित कर सकता है या मुझे बता सकता है कि मैं ड्रॉप डाउन मेनू में आइकन या नाम कैसे जोड़ सकता हूं जो पी और एम टैग को सही कक्षाओं के साथ स्वचालित रूप से बनाता है? धन्यवाद

Answer 1

प्रश्न पूछने के बाद से कुछ समय हो गया है, लेकिन जैसा कि मैं वर्तमान में बिल्कुल वही बना रहा हूं, मैंने सोचा कि मैं इस मामले के बारे में अपनी खोजों और समाधान साझा करता हूं। :)

मैं काम पर एक परीक्षण परियोजना के लिए TinyMCE का विस्तार कर रहा हूँ और हमारे समाधान कस्टम टैग की जरूरत है - उनमें से कुछ में उपयोगकर्ता, केवल एक ही लाइन में प्रवेश के लिए अन्य लोगों में सक्षम होना चाहिए एक बहुत (अपने उन्हें के रूप में) पाठ का

कदम के लिए किया जाना है, ताकि वांछित समाधान प्राप्त करने के लिए:

• TinyMCE संपादक कहता हूं, कि आपके तत्व अच्छा दो विन्यास कीवर्ड extended_valid_elements और custom_elements का उपयोग कर रहे हैं:

  tinymce.init({ selector: "textarea#editor", // ... extended_valid_elements : "emstart,emend", custom_elements: "emstart,emend", content_css: "editor.css" });

• उद्घाटन और समापन टैग के लिए दो छवियां बनाएं। मैंने उदाहरण के लिए मेरा नाम emstart.png और emend.png के लिए मेरा नाम दिया।

• अपने कस्टम तत्वों के लिए एक कस्टम सीएसएस शैली बना सकते हैं और (मेरे मामले में, एक है कि TinyMCE विन्यास में निर्दिष्ट किया जाता editor.css) कस्टम सीएसएस फ़ाइल में डाल:

  emstart { background: url(emstart.png) no-repeat; background-position: left -3px top -3px; padding: 10px 10px 5px 10px; background-color:#aabbcc; border:1px dotted #CCCCCC; height:50px; width:100px; }

  emend { background: url(emend.png) no-repeat; background-position: left -3px bottom -3px; padding: 5px 10px 10px 10px; background-color:#aabbcc; border:1px dotted #CCCCCC; height:50px; width:100px; }

• एक कस्टम प्लगइन लिखें जो नए टैग इनपुट करता है और इसे प्लगइन्स निर्देशिका में डाल देता है।मैं मेरा customem कहा जाता है:

प्लगइन कोड:

tinymce.PluginManager.add('customem', function(editor, url) { 
    // Add a button that opens a window 
    editor.addButton('customEmElementButton', { 
     text: 'Custom EM', 
     icon: false, 
     onclick: function() { 
      // Open window 
      editor.windowManager.open({ 
       title: 'Please input text', 
       body: [ 
        {type: 'textbox', name: 'description', label: 'Text'} 
       ], 
       onsubmit: function(e) { 
        // Insert content when the window form is submitted 
        editor.insertContent('<emstart>EM Start</emstart><p>' + e.data.description + '</p><emend>EM End</emend>'); 
       } 
      }); 
     } 
    }); 

    // Adds a menu item to the tools menu 
    editor.addMenuItem('customEmElementMenuItem', { 
     text: 'Custom EM Element', 
     context: 'tools', 
     onclick: function() { 
      editor.insertContent('<emstart>EM Start</emstart><p>Example text!</p><emend>EM End</emend>'); 
     } 
    }); 
}); 

अंतिम चरण संपादक (प्लगइन और उपकरण पट्टी विन्यास विकल्प का उपयोग) करने के लिए अपने कस्टम प्लगइन लोड करने के लिए है और परिणाम का आनंद लें:

tinymce.init({ 
     selector: "textarea#editor", 
     height: "500px", 
     plugins: [ 
       "code, preview, contextmenu, image, link, searchreplace, customem" 
      ], 
     toolbar: "bold italic | example | code | preview | link | searchreplace | customEmElementButton", 
     contextmenu: "bold italic", 
     extended_valid_elements : "emstart,emend", 
     custom_elements: "emstart,emend", 
     content_css: "editor.css", 
    }); 

अब संपादक इस तरह दिखता है:

और अपने उदाहरण की तरह स्रोत:

Answer 2

तुम सब (valid_children के बच्चे के रूप में valid_elements को em जोड़ सकते हैं और उन्हें टैग वांछित (शायद p) करने के लिए) TinyMCE valid_elements और valid_children अपनी आवश्यकताओं के लिए सेटिंग को संशोधित करने की आवश्यकता होगी सबसे पहले।

दूसरा आपको इस कोड को डालने के लिए ओउ ड्रॉप डाउन या बटन के साथ अपनी प्लगइन की आवश्यकता होगी।