Question

我有以下简单的脚本和html：

LCNN_deploy.prototxt

现在我想在图像上显示一个自定义工具栏，其中包含一些自定义提供的按钮。与https://www.tinymce.com/docs/plugins/imagetools/类似，但我不知道该怎么做。

您是否有任何想法如何以编程方式在tinymce中创建特定html元素的自定义工具栏？

Answer 1

提供的功能是editor.addContextToolbar，您可以在其中找到相关文档：

https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#addcontexttoolbar

换句话说，开发插件的推荐方法是：

 tinymce.PluginManager.add('imageClick',function(editor){
      var lastSelectedImage=undefined;
      function addEvents() {
        editor.on('click', function (e) {
          if (lastSelectedImage && lastSelectedImage.src != e.element.src) {
            lastSelectedImage = undefined;
          }
          // Set up the lastSelectedImage
          if (isEditableImage(e.element)) {
            lastSelectedImage = e.element;
          }
        });
      }
      function isEditableImage(img) {
        var selectorMatched = editor.dom.is(img, 'img:not([data-mce-object],[data-mce-placeholder])');
        return selectorMatched;
      }
      function addToolbars() {
          var toolbarItems = editor.settings.myimagetools_toolbar;
          if (!toolbarItems) {
            toolbarItems = 'alignleft aligncenter alignright alignjustify';
          }
          editor.addContextToolbar(
            isEditableImage,
            toolbarItems
          );
      }
      addToolbars()
      addEvents()
    })

基于imagetools插件的源代码。

提示：

您可以通过下载tinymce的开发包来访问插件源代码：

http://download.ephox.com/tinymce/community/tinymce_4.6.4_dev.zip?_ga=2.167213630.1854029251.1501225162-27629746.1501225162

解压缩＆amp;＆amp;查看^location_you_unziped/tinymce/src/plugins^以查看并将插件基于tinymce提供的插件。

Tinymce：如何显示弹出式动态工具栏;

1 个答案:

提示：