Tinymce定制插件

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

这是我的代码至今：

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

来源

2017-06-07 krlos77

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

添加一些类，例如，.phonelink您的元素。然后用editor.selection.getNode();可以得到所选元素的内容，如果它具有所需的类别，则将其内容粘贴到弹出窗体中。提交功能中的相同更改。

为了更好的UI体验，您可以添加一个onclick提示到您的按钮

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

希望它会帮助你。

来源

2017-06-08 11:20:07

我终于解决了这个问题，如果有人有兴趣，这是我怎么做的：

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

来源

2017-06-08 20:30:41 krlos77

Tinymce定制插件

回答

相关问题