TinyMCE कस्टम थीम - बुलिस्ट numlist लिंक काम नहीं कर रहा

Question

तो मैंने अपनी वेबसाइट पर बटन विधि का उपयोग कर TinyMCE के लिए एक कस्टम थीम बनाई है। अधिकांश बटन काम कर रहे प्रतीत होते हैं, लेकिन बुलिस्ट, numlist, लिंक, और अनलिंक बटन कुछ भी नहीं करते हैं। एचटीएमएल व्यू पर स्विच करते समय भी, एचटीएमएल भी जोड़ा नहीं जाता है (यानी <ul><li></li></ul>)। मैंने एडलिस्ट, एडलिंक इत्यादि के लिए प्लगइन जोड़ने का प्रयास किया है लेकिन कोई बदलाव नहीं है। इस के लिए ऑनलाइन कोई जवाब नहीं मिल रहा है।

$('textarea.htmlify').tinymce({ 
    mode: 'textareas', 
    script_url : host + '/js/admin/tinymce/tiny_mce.js', 
    content_css: host + '/css/admin/tiny_mce.css', 
    language: false, 

    setup: function(editor) { 
     $('.showPreview', '#' + editor.id + '_preview').click(function(event) { 
      event.preventDefault(); 
      tinyMCE.execCommand('mceAddControl', false, editor.id); 
      $('#'+editor.id + '_preview').css('display', 'none'); 
     }); 

     editor.addCommand('showHTML', function(ui, v){ 
      tinyMCE.execCommand('mceRemoveControl', false, editor.id); 
      $('#'+editor.id + '_preview').css('display', 'block'); 
     }); 
    }, 

    theme: function(editor, target) { 
     var editorContainer = $(target).after(
      '<div>' + 
       '<div class="mce-toolbar clearfix">' + 
        '<button class="btn-mce-bold" data-mce-command="bold">Bold</button>' + 
        '<button class="btn-mce-italic" data-mce-command="italic">Italic</button>' + 
        '<button class="btn-mce-underline" data-mce-command="underline">Underline</button>' + 
        '<button class="btn-mce-strikethrough" data-mce-command="strikethrough">Strike Through</button>' + 
        '<button class="btn-mce-justifyleft" data-mce-command="justifyleft">Justify Left</button>' + 
        '<button class="btn-mce-justifycenter" data-mce-command="justifycenter">Justify Center</button>' + 
        '<button class="btn-mce-justifyright" data-mce-command="justifyright">Justify Right</button>' + 
        '<button class="btn-mce-justifyfull" data-mce-command="justifyfull">Justify Full</button>' + 
        '<button class="btn-mce-bullist" data-mce-command="bullist">Bullet List</button>' + 
        '<button class="btn-mce-numlist" data-mce-command="numlist">Number List</button>' + 
        '<button class="btn-mce-undo" data-mce-command="undo">Undo</button>' + 
        '<button class="btn-mce-redo" data-mce-command="redo">Redo</button>' + 
        '<button class="btn-mce-link" data-mce-command="link">Link</button>' + 
        '<button class="btn-mce-unlink" data-mce-command="unlink">Unlink</button>' + 
        '<button class="btn-mce-code" data-mce-command="showHTML">HTML</button>' + 
       '</div>' + 
       '<div class="htmlify"></div>' + 
      '</div>' 
     ).next(); 

     $('.mce-toolbar').css('width', $(target).css('offsetWidth')); 

     // Bind events for each button 
     $('button', editorContainer).click(function(event) { 
      event.preventDefault(); 
      editor.execCommand(
       $(this).attr('data-mce-command'), 
       false, 
       $(this).attr('data-mce-value') 
      ); 
     }); 

     // setup tabbing 
     $tabindex = parseInt($('#' + editor.id).attr('tabindex')); 
     if ($tabindex > 1) { 
      $('[tabindex=' + ($tabindex-1) + ']').keydown(function(event) { 
       var $keyCode = event.keyCode || event.which; 
       if ($keyCode == 9) { 
        event.preventDefault(); 
        editor.execCommand('mceFocus', false, editor.id); 
       } 
      }); 
     } else { 
      editor.execCommand('mceFocus', false, editor.id); 
     } 

     editor.onKeyDown.add(function(ed, event) { 
      var $tabindex = parseInt($('#' + ed.id).attr('tabindex')); 
      var $keyCode = event.keyCode || event.which; 
      if ($keyCode == 9) { 
       $tabindex++; 
       while(($("[tabindex='" + $tabindex + "']").length == 0 || $("[tabindex='" + $tabindex + "']:not([readonly])").length == 0) && $tabindex != 150){ 
        $tabindex++; 
       } 
       if ($tabindex != 150) 
        $('[tabindex='+$tabindex+']').focus(); 
      } 
     }); 

     // Register state change listeners 
     editor.onInit.add(function(ed, event) { 
      $('button', editorContainer).each(function(i, button) { 
       editor.formatter.formatChanged($(button).data('mce-command'), function(state) { 
        $(button).toggleClass('btn-mce-on', state); 
       }); 
      }); 

      $('#'+ed.id+'_ifr').css('height', '100%'); 
     }); 

     // Return editor and iframe containers 
     return { 
      editorContainer: editorContainer[0], 
      iframeContainer: editorContainer.children().eq(-1), 

      // Calculate iframe height: target height - toolbar height 
      iframeHeight: $(target).height() - editorContainer.first().outerHeight() 
     }; 
    }  
}); 

Answer 1

TinyMCE कोड में देखने के बाद, मैं एक संभव समाधान की पहचान की है

यहाँ मेरी TinyMCE कोड है। data-mce-command="bullist" और data-mce-command="numlist" का उपयोग करने के बजाय सूचियों के लिए, हम data-mce-command="InsertUnorderedList" और data-mce-command="InsertOrderedList" का उपयोग कर सकते हैं।

लिंक के लिए, मैंने data-mce-command="mceInsertLink" का उपयोग किया और हमें execCommand पर URL/HREF प्रदान करने का एक तरीका चाहिए। तो अवधारणा का एक सबूत के रूप में, मुझे लगता है कि सभी घटनाओं

$('button', editorContainer).click(function(event) { 
     event.preventDefault(); 
     var value=$(this).attr('data-mce-value') 
     if($(this).attr('data-mce-command')=="mceInsertLink"){ 
      value=prompt("href") //really hacky way of getting data from user 
      //maybe do a modal popup with the callback that calls the execCommand below 
     } 
     editor.execCommand(
      $(this).attr('data-mce-command'), 
      false, 
      value 
     ); 
    }); 

यह अगर वहाँ पाठ है कि पहले से ही चुना है काम करेंगे प्रदान करती है कोड का थोड़ा संशोधित। मैं इस परीक्षण किया है नहीं, लेकिन शायद, वहाँ एक जाँच हो सकता है अगर वहाँ कुछ भी चुना गया था और दोनों URL और लिंक पाठ के लिए पूछना है, और एक .execCommand("mceInsertRawHTML")

Example Fiddle

Answer 2

कोशिश इन प्लग-इन को जोड़ने:

   plugins: [ 
         "link lists", 
       ],