Summernote 将字母间距添加到工具栏

Posted 2023-03-22

【中文标题】Summernote 将字母间距添加到工具栏

【英文标题】：summernote add letter-spacing to toolbar

【发布时间】：2020-01-31 11:55:50

【问题描述】：

我想在 Summernote 的工具栏中添加功能。我想以微调器或editText的形式控制字母间距，但我不知道在哪里添加它。试了其他插件也看不懂。

// toolbar
          toolbar: [
              ['style', ['style']],
              ['font', ['bold', 'underline', 'clear']],
              ['fontname', ['fontname']],
              ['color', ['color']],
			  ['fontSize', ['fontSize']],
			  ['letterSpace', ['letterSpace']],
              ['para', ['ul', 'ol', 'paragraph']],
              ['table', ['table']],
              ['insert', ['link', 'picture', 'video']],
              ['view', ['fullscreen', 'codeview', 'help']]
          ]

      this.fontName = this.wrapCommand(function (value) 
              return _this.fontStyling('font-family', "\'" + value + "\'");
          );
          this.fontSize = this.wrapCommand(function (value) 
              return _this.fontStyling('font-size', value + 'px');
          );
		  this.letterSpace = this.wrapCommand(function (value) 
              return _this.fontStyling('letter-spacing', value + 'px');
          );

【参考方案1】：

在button.fontSize下面添加

this.context.memo("button.letter", function() 
                    return n.ui.buttonGroup([n.button(
                        className: "dropdown-toggle",
                        contents: n.ui.dropdownButtonContents('<span class="note-current-letter"/>', n.options),
                        tooltip: "font letter",
                        data: 
                            toggle: "dropdown"
                        
                    ), n.ui.dropdownCheck(
                        className: "dropdown-letter",
                        checkClassName: n.options.icons.menuCheck,
                        items: n.options.letters,
                        title: "font letter",
                        click: n.context.createInvokeHandlerAndUpdateState("editor.letter")
                    )]).render()

this.fontSize = this.wrapCommand (函数 (t) 在底部添加以下代码

this.letter = this.wrapCommand(function(t) 
                    u.fontStyling("letter-spacing", t + "px")
                );

分别在 toolvar 和 popover 上

['字母', ['字母']] 和 字母：[“8”、“9”、“10”、“11”、“12”、“13”、“14”、“15”、“16”、“17”、“18”、“19” 、“20”、“21”、“22”、“23”、“24”、“32”、“48”、“72”、“112”、“127”、“254”、“500”]解决了。​​