TinyMCE tema personalizzato - collegamento numlist bullist collegamento non funziona

Question

Così ho creato un tema personalizzato per TinyMCE utilizzando il metodo pulsante sul loro sito web. La maggior parte dei pulsanti sembra funzionare, ma i pulsanti bullist, numlist, link e unlink non fanno nulla. Anche quando si passa alla visualizzazione HTML, l'html non viene nemmeno aggiunto (ad esempio <ul><li></li></ul>). Ho provato ad aggiungere plug-in per advlist, advlink, ecc. Ma nessuna modifica. Non riesco a trovare risposte online per questo.

Ecco il mio codice TinyMCE:

$('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

Dopo aver guardato nel codice TinyMCE, ho identificato una possibile soluzione. Per gli elenchi invece di utilizzare data-mce-command="bullist" e data-mce-command="numlist", possiamo utilizzare data-mce-command="InsertUnorderedList" e data-mce-command="InsertOrderedList".

Per i collegamenti, ho utilizzato data-mce-command="mceInsertLink" e abbiamo bisogno di un modo per fornire l'URL/HREF allo execCommand. Così come un proof of concept, ho modificato il bit di codice che assegna tutti gli eventi

$('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 
     ); 
    }); 

Questo funziona se c'è del testo che è già selezionata. Non ho ancora testato questo, ma forse, ci potrebbe essere un controllo se c'è qualcosa selezionati e chiedono sia l'URL e il testo del link, e fare un .execCommand("mceInsertRawHTML")

Example Fiddle

Answer 2

Prova ad aggiungere questi plugin:

   plugins: [ 
         "link lists", 
       ],