Search code examples
javascripthtmlsummernote

summernote add letter-spacing to toolbar


I want to add functionality to the ToolBar in Summernote. I would like to put the ability to control letter-spacing in the form of a spinner or editText but I don't know where to add it. I can't understand it even though I try other plugins.

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


Solution

  • add below 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 (function (t) Add below code at bottom

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

    on toolvar and popover respectively

    ['letter', ['letter']] and letters: ["8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19" , "20", "21", "22", "23", "24", "32", "48", "72", "112", "127", "254", "500"] added Solved it.