tinymce加载网页上已有的图片列表

Question

我有这个 jquery 代码：

  $.each( imgPath, function( key, value ) {
  $('#imgul').append('<div draggable=\"true\" style="display:inline-block;">
  <input type="checkbox" name="image[]" id="image[]"  class="checkboxImg" value="' + value + '">
  <img src="' + value + '" class="imgList" ></div>');   
  $("#imgRes").replaceWith($("#imgRes").clone());
  });

加载

中的一系列图像

 <ul id=\"imgul\" style=\"margin-left:10px; width:500px;\">                                 
 </ul>

这样我就已经有了TinyMCE 4.1.9编辑器框架下的图像列表。通过单击 "Images" > "list"，我必须将它们发送到编辑器图像列表中。

如有任何建议，我们将不胜感激。

Answer 1

TinyMCE 提供了添加自定义按钮的可能性，它允许我触发任何 javascript 事件。

将此代码插入页面并编写一些自定义 jQuery 或通过 id 获取元素的代码就足够了:

tinyMCE.init({
   ...

   theme_advanced_buttons1 : 'example,..'

   setup : function(ed) {
      // Register example button
      ed.addButton('example', {
         title : 'example.desc',
         image : '../jscripts/tiny_mce/plugins/example/img/example.gif',
         onclick : function() {
            ed.windowManager.alert('Hello world!! Selection: ' + ed.selection.getContent({format : 'text'}));
         }
      });
   }
});

tinymce加载网页上已有的图片列表

tinymce load image list already available on the web page

javascript

jquery

image

list

tinymce