TinyMCEのカスタムテーマ - bullist numlistリンクのリンクが解除されない

Question

私はTinyMCEのカスタムテーマをウェブサイトのボタンメソッドを使って作成しました。ほとんどのボタンは機能しているように見えますが、bullist、numlist、link、およびunlinkボタンは何もしません。 HTMLビューに切り替える場合でも、htmlは追加されません（つまり、<ul><li></li></ul>）。 advlist、advlinkなどのプラグインを追加しようとしましたが、変更はありません。この回答をオンラインで見つけることはできません。

$('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とリンクテキストの両方を求める、とあなたはjsfiddleを.execCommand("mceInsertRawHTML")

Example Fiddle

Answer 2

てみてください、これらのプラグインを追加：

   plugins: [ 
         "link lists", 
       ],