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

希望对你有帮助。

Answer 3

对于 React 你可以简单地使用这个

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

          }
        }}