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;
            }
        });
    }
});

Answer 2

也许这会对https://www.tinymce.com/docs-3x/api/dom/class_tinymce.dom.Selection.html/有帮助

添加一些类，例如，为元素添加.phonelink。然后使用editor.selection.getNode();可以获取所选元素的内容，如果它有所需的类，则将其内容粘贴到弹出表单中。提交函数中的相同更改。

为了获得更好的UI体验，您可以向按钮添加onclick工具提示

editor.addContextToolbar(
  '.phonelink',
  'phonelink'
);

希望能对你有所帮助。