Tinymce自定义插件

Question

一位客户要求我制作一个插件来插入电话链接，我知道这可以通过链接插件来完成，但他希望有一个专门设计的插件来实现。我已经有了带有弹出窗口的插件，您可以在其中插入所需的数据，这是代码，我要添加的功能与链接插件相同，因此当用户单击链接的文本时，内容可以是在我的插件的窗口管理器中进行了编辑。

这是我到目前为止的代码：

tinymce.PluginManager.add('phonelink', function(editor, url) {  
// Add a button that opens a window
  tinymce.DOM.loadCSS(url + '/css/phonelink.css');
  editor.addButton('phonelink', {
    text: false,
    icon: 'phonelink',
    onclick: function() {
      // Open window
      editor.windowManager.open({
        title: 'Enlace teléfono',
        body: [
          {type: 'textbox', name: 'phone', label: 'Teléfono'},
          {type: 'textbox', name: 'showtext', label: 'Texto a mostrar'},
          {type: 'textbox', name: 'title', label: 'Título'}
        ],
        onsubmit: function(e) {
          // Insert content when the window form is submitted
          editor.insertContent('<a title="' + e.data.title + '" href="tel:+34' + e.data.phone + '">' + e.data.showtext + '</a>');
        }
      });
    }
  });

  // Adds a menu item to the tools menu
  editor.addMenuItem('phonelink', {
    text: 'Teléfono',
    context: 'tools',
    onclick: function() {
      // Open window with a specific url
      editor.windowManager.open({
          title: 'Enlace teléfono',
          body: [
            {type: 'textbox', name: 'phone', label: 'Teléfono'},
            {type: 'textbox', name: 'showtext', label: 'Texto a mostrar'},
            {type: 'textbox', name: 'title', label: 'Título'}
          ],
          onsubmit: function(e) {
            // Insert content when the window form is submitted
            editor.insertContent('<a title="' + e.data.title + '" href="tel:+34' + e.data.phone + '">' + e.data.showtext + '</a>');
          }
      });
    }
  });
});

Answer 1

我终于解决了它，如果有人感兴趣，这就是我的做法：

tinymce.PluginManager.add('phonelink', function(editor, url) {
    // Add a button that opens a window
    var linkText = "";
    var linkTitle = "";
    var link = "";
    tinymce.DOM.loadCSS(url + '/css/phonelink.css');
    editor.addButton('phonelink', {
        text: false,
        icon: 'phonelink',
        onpostrender: updateOnSelect,
        onclick: onClickPhoneButton
    });
    // Adds a menu item to the tools menu
    editor.addMenuItem('phonelink', {
        text: 'Teléfono',
        context: 'tools',
        onclick: onClickPhoneButton,
        onpostrender: updateOnSelect,
    });
    function onClickPhoneButton(){
        editor.windowManager.open({
            title: 'Enlace teléfono',
            body: [
                {type: 'textbox', name: 'phone', label: 'Teléfono', value: link},
                {type: 'textbox', name: 'showtext', label: 'Texto a mostrar', value: linkText},
                {type: 'textbox', name: 'title', label: 'Título', value: linkTitle}
            ],
            onsubmit: function(e) {
                // Insert content when the window form is submitted
                var hrefLink = '<a title="' + e.data.title + '" href="tel:+34' + e.data.phone + '">' + e.data.showtext + '</a>';
                if(link !== ''){
                    editor.setContent(hrefLink);
                }else{
                    editor.insertContent(hrefLink);
                }
            }
        });
    }
    function updateOnSelect() {
        var btn = this;
        editor.on('NodeChange', function (e) {
            var node = editor.selection.getNode();
            var isTelLink = node.href !== undefined && node.href.indexOf('tel:+') !== -1
            btn.active(isTelLink);
            if(isTelLink){
                link = node.href;
                link = link.replace("tel:+34", "");
                linkTitle = node.title;
                linkText = node.text;
            }
        });
    }
});