Using this keyboard with summernote editor

[sanjit11]

Is is possible to use this editor with summernote editor . if yes , how can i use it ?

[Mottie]

Hi @sanjit11!

This keyboard works with contenteditable elements, so there shouldn't be too many issues with integrating it. I threw together this demo. Please let me know if you encounter any issues (other than the keyboard repositioning - I think fixing it at the bottom of the page might be better (see this example css)

$(function() {
  $("#summernote").on("summernote.init", initKeyboard).summernote();

  function initKeyboard() {
    $(".note-editable")
      .keyboard({
        layout: "custom",
        customLayout: {
          normal: [
            "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
            "{tab} q w e r t y u i o p [ ] \\",
            "a s d f g h j k l ; ' {enter}",
            "{shift} z x c v b n m , . / {shift}",
            "{space} {left} {right}"
          ],
          shift: [
            "~ ! @ # $ % ^ & * ( ) _ + {bksp}",
            "{tab} Q W E R T Y U I O P { } |",
            'A S D F G H J K L : " {enter}',
            "{shift} Z X C V B N M < > ? {shift}",
            "{space} {left} {right}"
          ]
        },
        css: {
          // input & preview
          input: "form-control input-sm",
          // keyboard container
          container: "center-block dropdown-menu", // jumbotron
          // default state
          buttonDefault: "btn btn-default",
          // hovered button
          buttonHover: "btn-primary",
          // Action keys (e.g. Accept, Cancel, Tab, etc);
          // this replaces "actionClass" option
          buttonAction: "active",
          // used when disabling the decimal button {dec}
          // when a decimal exists in the input area
          buttonDisabled: "disabled"
        }
      })
      // activate the typing extension
      .addTyping({
        showTyping: true,
        delay: 50
      });
  }
});