Niestandardowy motyw TinyMCE - link do listy numerów linków odłączanie nie działa

Question

Stworzyłem więc niestandardowy motyw dla TinyMCE za pomocą metody przycisku na ich stronie internetowej. Wygląda na to, że większość przycisków działa, ale przyciski listy zapasowej, numeru, łącza i rozłączenia nie działają. Nawet po przejściu do widoku HTML, html nie jest nawet dodawany (tj. <ul><li></li></ul>). Próbowałem dodawać wtyczki do advlig, advlink, etc, ale bez zmian. Nie można znaleźć żadnych odpowiedzi online dla tego.

Oto mój kod 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

Po patrząc na kod TinyMCE, mam zidentyfikować możliwe rozwiązanie. W przypadku list zamiast używania data-mce-command="bullist" i data-mce-command="numlist", możemy użyć data-mce-command="InsertUnorderedList" i data-mce-command="InsertOrderedList".

Dla linków użyłem data-mce-command="mceInsertLink" i potrzebujemy sposobu na podanie adresu URL/HREF do execCommand. Więc jako dowód koncepcji, zmodyfikowałem trochę kodu, który przydziela wszystkie wydarzenia

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

To będzie działać, jeśli nie jest to tekst, który jest już wybrany. Nie testowałem tego, ale być może, nie może być sprawdzenie, czy nie jest zaznaczona i poprosić o coś zarówno URL i tekst linku i zrobić .execCommand("mceInsertRawHTML")

Example Fiddle

Answer 2

spróbuj dodać te wtyczki:

   plugins: [ 
         "link lists", 
       ],