TinyMCE özel tema - bağlantı listesi işlenmemiş bağlantı kaldırılıyor

Question

Bu yüzden web sitelerinde düğme yöntemini kullanarak TinyMCE için özel bir tema oluşturduk. Düğmelerin çoğu çalışıyor gibi görünüyor, ancak liste, numara, bağlantı ve bağlantı kesme düğmeleri hiçbir şey yapmıyor. HTML görünümüne geçerken bile html eklenmez (yani <ul><li></li></ul>). Advlist, advlink vb. Için eklenti eklemeyi denedim ancak değişiklik yapmam. Bunun için çevrimiçi herhangi bir cevap bulamıyor.

$('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 koduna baktıktan sonra olası bir çözüm tespit ettik

İşte benim tinymce kodudur. data-mce-command="bullist" ve data-mce-command="numlist" kullanmak yerine listeler için data-mce-command="InsertUnorderedList" ve data-mce-command="InsertOrderedList"'u kullanabiliriz.

Bağlantılar için, data-mce-command="mceInsertLink" kullandım ve URL/HREF'yi execCommand'a bildirmenin bir yoluna ihtiyacımız var. Yani kavramın bir kanıtı olarak, tüm olayları

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

zaten seçili metin varsa bu çalışacaktır atar kod biraz değiştirilmiş. Bu test değil ama bir şey var seçilir ve URL ve bağlantı metni ikisi için sormak eğer belki bir onay olabilir ve .execCommand("mceInsertRawHTML")

Example Fiddle

Answer 2

deneyin bu eklentileri ekleyerek:

   plugins: [ 
         "link lists", 
       ],