javascript - Tinymce custom plugin - Stack Overflow

admin管理员组

文章数量:1296897

A client asked me to make a plugin to insert phone links, I know this can be done through the link plugin but he wants one specifically designed to do this. I already have the plugin with the popup window where you can insert the data you need, here is the code, what I want is to add the same functionality that has the link plugin so when the user clicks over the linked text the content can be edited inside the window manager of my plugin.

This is the code i have so far:

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

A client asked me to make a plugin to insert phone links, I know this can be done through the link plugin but he wants one specifically designed to do this. I already have the plugin with the popup window where you can insert the data you need, here is the code, what I want is to add the same functionality that has the link plugin so when the user clicks over the linked text the content can be edited inside the window manager of my plugin.

This is the code i have so far:

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

• javascript
• jquery
• tinymce
• tinymce-4
• tinymce-plugins

Share Follow edited Jun 8, 2017 at 9:32 krlos77 asked Jun 7, 2017 at 19:36 krlos77krlos77 33155 silver badges1414 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

I finally solved it, if anyone is interested this is how i did it:

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

Maybe this will help https://www.tinymce./docs-3x/api/dom/class_tinymce.dom.Selection.html/

Add some class, for example, .phonelink for your element. Then with editor.selection.getNode(); you can get the contents of selected element, and if it has desired class, paste its contents into your popup form. Same changes in the submit function.

For better UI experience, you can add an onclick tooltip to your button

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

Hope it'll help you.

For React u can simply use this:

init={{
  height: 500,
  promotion: false,
  menubar: true,
  plugins: 'lists advlist link image code paste',
  paste_as_text: true,
  branding: false,
  codesample_languages: [
    { text: "HTML/XML", value: "markup" },
    { text: "JavaScript", value: "javascript" },
    { text: "CSS", value: "css" },
    { text: "PHP", value: "php" },
    { text: "Ruby", value: "ruby" },
    { text: "Python", value: "python" },
    { text: "Java", value: "java" },
    { text: "C", value: "c" },
    { text: "C#", value: "csharp" },
    { text: "C++", value: "cpp" },
  ],

  toolbar: "undo redo |bullist numlist alignleft aligncenter alignright alignjustify outdent indent| link image code currentdate",
  setup: function (editor) {
    editor.ui.registry.addButton('currentdate', {
      icon: 'lock',
      tooltip: "Premium Content",
      onAction: function () {
        onClickPhoneButton()
      }
    });
    function onClickPhoneButton() {
      var html = editor.selection.getContent({format : 'html'});
      editor.insertContent('<div id="' + "PreviewWall" + '">' + "myData" + html + '</div>');
    }
  }
}}

本文标签： javascriptTinymce custom pluginStack Overflow