Summernote个性化定制使用帮助(二)

图片插入：

insertImage

Insert an image.

// @param {String} url
// @param {String|Function} filename - optional
$('#summernote').summernote('insertImage', url, filename);

You can modify image with passing callback as second argument.

$('#summernote').summernote('insertImage', url, function ($image) {
  $image.css('width', $image.width() / 3);
  $image.attr('data-filename', 'retriever');
});

insertNode

Insert an element or textnode.

var node = document.createElement('div');
// @param {Node} node
$('#summernote').summernote('insertNode', node);

insertText

Insert text.

// @param {String} text
$('#summernote').summernote('insertText', 'Hello, world');

pasteHTML

Paste HTML string.

// @param {String} HTML string
var HTMLstring = '<div><p>Hello, world</p><p>Summernote can insert HTML string</p></div>';
$('#summernote').summernote('pasteHTML', HTMLstring);

Callbacks

Summernote support initialize callbacks and jquery’s custom event style callbacks.

Position of callbacks in options is changed after v0.7.0

After v0.7.0, every callbacks should be wrapped by callbacks object.

Callback only works with camel case string after v0.6.5

Lowercase string has been used for basic event name(ex: oninit, onenter, onfocus, onblur, onkeyup, onkeydown, onpaste). In contrast, callbacks name for advanced feature has been used with camel case string. This is inconsistent and confusing to use. So we rename all lowercase callback to camel case string.

onBeforeCommand

WIP: Need to work on an explanation

onChange

• IE9-10: DOMCharacterDataModified, DOMSubtreeModified, DOMNodeInserted
• Chrome, FF: input

// onChange callback
$('#summernote').summernote({
  callbacks: {
    onChange: function(contents, $editable) {
      console.log('onChange:', contents, $editable);
    }
  }
});

// summernote.change
$('#summernote').on('summernote.change', function(we, contents, $editable) {
  console.log('summernote\'s content is changed.');
});

onChangeCodeview

WIP: Need to work on an explanation

onDialogShown

WIP: Need to work on an explanation

onEnter

// onEnter callback
$('#summernote').summernote({
  callbacks: {
    onEnter: function() {
      console.log('Enter/Return key pressed');
    }
  }
});

// summernote.enter
$('#summernote').on('summernote.enter', function() {
  console.log('Enter/Return key pressed');
});

onFocus, onBlur, onBlurCodeview

// onFocus callback
$('#summernote').summernote({
  callbacks: {
    onFocus: function() {
      console.log('Editable area is focused');
    }
  }
});

// summernote.focus
$('#summernote').on('summernote.focus', function() {
  console.log('Editable area is focused');
});

// onBlur callback
$('#summernote').summernote({
  callbacks: {
    onBlur: function() {
      console.log('Editable area loses focus');
    }
  }
});

// summernote.blur
$('#summernote').on('summernote.blur', function() {
  console.log('Editable area loses focus');
});

// onBlurCodeview callback
$('#summernote').summernote({
  callbacks: {
    onBlurCodeview: function() {
      console.log('Codeview area loses focus');
    }
  }
});

// summernote.blur.codeview
$('#summernote').on('summernote.blur.codeview', function() {
  console.log('Codeview area loses focus');
});

onImageLinkInsert

WIP: Need to work on an explanation

onImageUpload

Override image upload handler(default: base64 dataURL on IMG tag). You can upload image to server or AWS S3: more…

// onImageUpload callback
$('#summernote').summernote({
  callbacks: {
    onImageUpload: function(files) {
      // upload image to server and create imgNode...
      $summernote.summernote('insertNode', imgNode);
    }
  }
});

// summernote.image.upload
$('#summernote').on('summernote.image.upload', function(we, files) {
  // upload image to server and create imgNode...
  $summernote.summernote('insertNode', imgNode);
});

onImageUploadError

WIP: Need to work on an explanation

onInit

// onInit callback
$('#summernote').summernote({
  callbacks: {
    onInit: function() {
      console.log('Summernote is launched');
    }
  }
});

// summernote.init
$('#summernote').on('summernote.init', function() {
  console.log('Summernote is launched');
});

onKeyup, onKeydown

// onKeyup callback
$('#summernote').summernote({
  callbacks: {
    onKeyup: function(e) {
      console.log('Key is released:', e.keyCode);
    }
  }
});

// summernote.keyup
$('#summernote').on('summernote.keyup', function(we, e) {
  console.log('Key is released:', e.keyCode);
});

// onKeydown callback
$('#summernote').summernote({
  callbacks: {
    onKeydown: function(e) {
      console.log('Key is downed:', e.keyCode);
    }
  }
});

// summernote.keydown
$('#summernote').on('summernote.keydown', function(we, e) {
  console.log('Key is downed:', e.keyCode);
});

onMouseDown,onMouseUp

onPaste

// onPaste callback
$('#summernote').summernote({
  callbacks: {
    onPaste: function(e) {
      console.log('Called event paste');
    }
  }
});

// summernote.paste
$('#summernote').on('summernote.paste', function(e) {
  console.log('Called event paste');
});

onScroll

WIP: Need to work on an explanation

Custom button

Summernote also supports custom buttons. If you want to create your own button, you can simply define and use with options.

Define button

You can create a button object with $.summernote.ui. This buttons objects have the below properties.

• contents: contents to be displayed on the button
• tooltip: tooltip text when mouse over
• click: callback function to be called when mouse is clicked

Below codes is about simple button for inserting text ‘hello’.

var HelloButton = function (context) {
  var ui = $.summernote.ui;

  // create button
  var button = ui.button({
    contents: '<i class="fa fa-child"/> Hello',
    tooltip: 'hello',
    click: function () {
      // invoke insertText method with 'hello' on editor module.
      context.invoke('editor.insertText', 'hello');
    }
  });

  return button.render();   // return button as jquery object
}

You can see render() which returns jquery object as button.

Using button with options

Let’s learn how to use the button on toolbar.

First, you can define buttons with option named buttons which is a set of key-value. You can define custom button on toolbar options.

$('.summernote').summernote({
  toolbar: [
    ['mybutton', ['hello']]
  ],

  buttons: {
    hello: HelloButton
  }
});

You can also use custom button on popover in the same way.