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

Question

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script src="//cdn.tinymce.com/4/tinymce.min.js"></script> <!-- tinymce dependency -->
  <script>
    tinymce.PluginManager.add('imageClick',(editor)=>{
      editor.on('click',function(event){
        const element = event.target;
        //add code to open the internal toolbar
      })
    })
    tinymce.init({
      selector:'textarea',
      skin: 'lightgray',
      theme: 'modern',
      plugins: 'link image paste autolink media lists imageClick',
      toolbar: ['bold italic underline | alignleft aligncenter alignright alignjustify | link media image | undo redo '],
    });
  </script>
</head>
<body>
  <textarea>Next, get a free TinyMCE Cloud API key!</textarea>
</body>
</html>

现在我想在图像上显示一个自定义工具栏，其中包含一些自定义提供的按钮。与 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

解压缩它 && 查看 ^location_you_unziped/tinymce/src/plugins^ 以便查看并将你的插件基于 tinymce 提供的插件。

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

Tinymce: How to display a popover dynamic toolbar;

tinymce

tinymce-plugins

提示：