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定製插件

回答

相關問題