TinyMCE纯文本粘贴插件源代码下载及配置说明

学习到这里是因为自己写了一个TinyMCE纯文本粘贴插件，用于给编辑器做纯文本粘贴开启关闭的功能切换，希望点击按钮后一直被选中表示当前为纯文本粘贴状态，再次点击取消。

TinyMCE纯文本粘贴插件优化实现了：

1、随时开启关闭纯文本粘贴功能；

2、按钮点击后有选中效果带有背景颜色；

3、有弹窗提示当前切换的状态且3秒后关闭；

为了实现这个点击时可以选中激活的状态，真是费了不少劲，有问题还真是以官方的英文文档有为参考最有效率，网上一大堆代码都测试无效。以下代码拿到手也可以放到自己的项目里，重命名为plugin.js放到plugins目录即可，在项目里引用change_text_paste插件就可以增加一个TinyMCE纯文本粘贴的功能插件：

tinymce.PluginManager.add('change_text_paste', function(editor) {
   editor.ui.registry.addToggleButton('change_text_paste', {
        icon: 'paste-text',
        tooltip:"切换粘贴模式",
        onAction: function (api) {
            if (!api.isActive()){
                var text_status='开启';
                var text_type='success';
                //console.log('当前状态：开启纯文本');
            }else {
                var text_status='关闭';
                var text_type='info';
                //console.log('当前状态：未开启纯文本');
            }
            tinymce.activeEditor.execCommand('mceTogglePlainTextPaste');//执行纯文本粘贴的命令
            api.setActive(!api.isActive());   // 按钮点击后保持高亮状态
            tinymce.activeEditor.notificationManager.open({//success 成功info 普通信息warning 警告信息error 错误信息
                text: '纯文本粘贴模式：'+text_status,
                type: text_type,
                timeout: 3000,
                closeButton: true,
            });
        }
    });
    
    return {
        getMetadata: function () {
            return  {
                name: "切换纯文本粘贴模式",//插件名称
                url: "https://www.mdaima.com", //作者网址
            };
        }
    };
});

以下为官方的手册说明，供大家学习：

Toggle button

A toggle button triggers an action when clicked but also has a concept of state. This means it can be toggled on and off. A toggle button gives the user visual feedback for its state through CSS styling. An example of this behavior is the Bold button that is highlighted when the cursor is in a word with bold formatting.

意思是：

切换按钮在单击时触发动作，但也有状态的概念。这意味着它可以被打开和关闭。切换按钮通过CSS样式为用户提供其状态的视觉反馈。这种行为的一个例子是当光标位于具有粗体格式的单词中时突出显示的粗体按钮。

     

官方示例代码：

tinymce.init({
  selector: 'textarea#custom-toolbar-toggle-button',
  toolbar: 'customStrikethrough customToggleStrikethrough',
  setup: function (editor) {
  
    editor.ui.registry.addToggleButton('customStrikethrough', {
      text: 'Strikethrough',
      onAction: function (api) {
        editor.execCommand('mceToggleFormat', false, 'strikethrough');
        api.setActive(!api.isActive());
      }
    });
    
    editor.ui.registry.addToggleButton('customToggleStrikethrough', {
      icon: 'strike-through',
      onAction: function (_) {
        editor.execCommand('mceToggleFormat', false, 'strikethrough');
      },
      onSetup: function (api) {
        editor.formatter.formatChanged('strikethrough', function (state) {
          api.setActive(state);
        });
      }
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'});