说来奇怪，在编辑器中居然没有找到上划线的配置项，文档和源码中都没有找到相关的信息。估计是tinymce开发者认为上划线的使用频率太过低所以不打算吧这个功能加进去吧。
幸好有功能相似的underline 可以作为参考，添加overline 功能其实很简单。全局搜索一下underline ，经过一番排查会发现涉及到underline 功能控件的主要是这3个文件：icons.js, tinymce.js,tinymce/themes/silver/theme.js。

icons.js

D9K7%NB8~R`VF@TVJ6F78NG.png

很明显这个文件是专门存放按钮的svg图标的，svg 图标可以百度一个或者到阿里图标库上下载一个喜欢的。

tinymce.js

underline 的主要逻辑实现都在这里，所以这里只要找到有underline 出现的地方然后照着抄一份就行了

// -------------1
walk$1(dom, expandedRng, function (nodes) {
          each(nodes, function (node) {
            process(node);
            var textDecorations = [
              'underline',
              'line-through',
              'overline'      // 这里新增一个下划线
            ];
            each(textDecorations, function (decoration) {
              if (isElement$1(node) && ed.dom.getStyle(node, 'text-decoration') === decoration && node.parentNode && getTextDecoration(dom, node.parentNode) === decoration) {
                removeFormat(ed, {
                  deep: false,
                  exact: true,
                  inline: 'span',
                  styles: { textDecoration: decoration }
                }, null, node);
              }
            });
          });
        });
//------------------------------2

underline: [
          {
            inline: 'span',
            styles: { textDecoration: 'underline' },
            exact: true
          },
          {
            inline: 'u',
            remove: 'all',
            preserve_attributes: [
              'class',
              'style'
            ]
          }
        ],
// 新增一个overline
overline: [
          {
            inline: 'span',
            styles: { textDecoration: 'overline' },
            exact: true
          },
          {
            inline: 'u',
            remove: 'all',
            preserve_attributes: [
              'class',
              'style'
            ]
          }
        ],
//-----------------3
var setup$6 = function (editor) {
      editor.addShortcut('meta+b', '', 'Bold');
      editor.addShortcut('meta+i', '', 'Italic');
      editor.addShortcut('meta+u', '', 'Underline');
      editor.addShortcut('meta+o', '', 'Overline');  // 自定义添加的上划线
      for (var i = 1; i <= 6; i++) {
        editor.addShortcut('access+' + i, '', [
          'FormatBlock',
          false,
          'h' + i
        ]);
      }
      editor.addShortcut('access+7', '', [
        'FormatBlock',
        false,
        'p'
      ]);
      editor.addShortcut('access+8', '', [
        'FormatBlock',
        false,
        'div'
      ]);
      editor.addShortcut('access+9', '', [
        'FormatBlock',
        false,
        'address'
      ]);
    };
//---------------4
  'Bold,Italic,Underline,Overline,Strikethrough,Superscript,Subscript': function (command) {   // 添加了个overline 测试
            self.toggleFormat(command);
          },

//---------------------5
 self.addCommands({
          'JustifyLeft': alignStates('alignleft'),
          'JustifyCenter': alignStates('aligncenter'),
          'JustifyRight': alignStates('alignright'),
          'JustifyFull': alignStates('alignjustify'),
          'Bold,Italic,Underline,Overline,Strikethrough,Superscript,Subscript': function (command) {  // 添加了个overline 测试
            return self.isFormatMatch(command);
          },
          'mceBlockQuote': function () {
            return self.isFormatMatch('blockquote');
          },
          'Outdent': function () {
            return canOutdent(editor);
          },
          'InsertUnorderedList,InsertOrderedList': function (command) {
            var list = editor.dom.getParent(editor.selection.getNode(), 'ul,ol');
            return list && (command === 'insertunorderedlist' && list.tagName === 'UL' || command === 'insertorderedlist' && list.tagName === 'OL');
          }
        }, 'state');

需要增加overline 就上面几个地方

theme.js

在这个文件中添加overline 的相关配置才能在编辑器上显示出overline 的按钮。

//-----1
    overline: [
          {
            inline: 'span',
            styles: { textDecoration: 'overline' },
            exact: true
          },
          {
            inline: 'u',
            remove: 'all',
            preserve_attributes: [
              'class',
              'style'
            ]
          }
        ],
        underline: [
          {
            inline: 'span',
            styles: { textDecoration: 'underline' },
            exact: true
          },
          {
            inline: 'u',
            remove: 'all',
            preserve_attributes: [
              'class',
              'style'
            ]
          }
        ],

//-----------2
'Bold,Italic,Underline,Overline,Strikethrough,Superscript,Subscript': function (command) {   // 添加了个overline 测试
            self.toggleFormat(command);
          },

//----------3
  self.addCommands({
          'JustifyLeft': alignStates('alignleft'),
          'JustifyCenter': alignStates('aligncenter'),
          'JustifyRight': alignStates('alignright'),
          'JustifyFull': alignStates('alignjustify'),
          'Bold,Italic,Underline,Overline,Strikethrough,Superscript,Subscript': function (command) {  // 添加了个overline 测试
            return self.isFormatMatch(command);
          },
          'mceBlockQuote': function () {
            return self.isFormatMatch('blockquote');
          },
          'Outdent': function () {
            return canOutdent(editor);
          },
          'InsertUnorderedList,InsertOrderedList': function (command) {
            var list = editor.dom.getParent(editor.selection.getNode(), 'ul,ol');
            return list && (command === 'insertunorderedlist' && list.tagName === 'UL' || command === 'insertorderedlist' && list.tagName === 'OL');
          }
        }, 'state');

最后不要忘记吧overline 添加到plugins 和toolbar 属性上就可以了。

dd.png

123.png