关于富文本编辑器summernote的基本使用（三）

最新推荐文章于 2024-09-13 22:00:13 发布

crazy_bai

最新推荐文章于 2024-09-13 22:00:13 发布

阅读量2.9k

点赞数

分类专栏： summernote 文章标签： summernote 前端

summernote 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

关于富文本编辑器summernote的基本使用（三）

基础API（editor模块）

使用summernote初始化编辑器

$('#summernote').summernote();

然后可以使用summernote调用编辑器提供的API。下面是一个插入文本的示例代码。

$('#summernote').summernote('editor.insertText', 'hello world'));

它调用了editor模块的‘insertText’函数，第一个参数是代表模块及其方法的字符串，其余的是需要传入方法的参数。
第一个参数没有模块名的情况下，会默认为editor。

$('#summernote').summernote('insertText', 'hello world');

editor模块中支持以下方法

createRange

为用户当前选中的内容创建一个范围对象。

var range = $('#summernote').summernote('createRange');

saveRange, restoreRange

保存当前用户选中的内容

$('#summernote').summernote('saveRange');

重新保存选中的区域

$('#summernote').summernote('saveRange');
// move cursor and select another
$('#summernote').summernote('restoreRange');

undo, redo

撤销和恢复最后一个命令

$('#summernote').summernote('undo');
$('#summernote').summernote('redo');

focus

为编辑器设置焦点

$('#summernote').summernote('focus');

isEmpty

返回编辑器中内容是否为空
编辑区域获取焦点时会自动生成

，即使并没有实际内容。所以summernote提供了这个方法来判断内容是否真的为空。

if ($('#summernote').summernote('isEmpty')) {
  alert('contents is empty');
}

reset（重置）

清除内容和存储记录

$('#summernote').summernote('reset');

disable, enable

disable使编辑器处于不可用状态。

$('#summernote').summernote('disable');

调用enable可以使编辑器从不可以转换到可用状态。

$('#summernote').summernote('enable');

字体样式API

bold, italic, underline, strikethrough

设置编辑器所有内容的字体样式。

$('#summernote').summernote('bold');//加粗
$('#summernote').summernote('italic');//斜体
$('#summernote').summernote('underline');//下划线
$('#summernote').summernote('strikethrough');//删除线

superscript, subscript（上角标，下角标）

$('#summernote').summernote('superscript');
$('#summernote').summernote('subscript');

removeFormat（清除样式）

$('#summernote').summernote('removeFormat');

backColor, foreColor（背景色，前景色）

// @param {String} color
$('#summernote').summernote('backColor', 'red');

// @param {String} color
$('#summernote').summernote('foreColor', 'blue');

fontName（字体）

// @param {String} fontName
$('#summernote').summernote('fontName', 'Arial');

fontSize（字体大小）

// @param {Number} font size - unit is px
$('#summernote').summernote('fontSize', 20);

Paragraph API

justify left, right and more

设置段落居中样式

$('#summernote').summernote('justifyLeft');
$('#summernote').summernote('justifyRight');
$('#summernote').summernote('justifyCenter');
$('#summernote').summernote('justifyFull');

insertParagraph（插入段落）

$('#summernote').summernote('insertParagraph');

insertOrderedList（插入列表）

$('#summernote').summernote('insertOrderedList');

$('#summernote').summernote('insertUnorderedList');

indent and outdent（缩进和凸排）

$('#summernote').summernote('indent');
$('#summernote').summernote('outdent');

formatPara

将编辑器内容格式化为段落

$('#summernote').summernote('formatPara');

formatH1-H6

$('#summernote').summernote('formatH2');
$('#summernote').summernote('formatH6');

lineHeight（设置行高）

// @param {Number} line height - unit is px
$('#summernote').summernote('lineHeight', 20);

Insertion API

insertImage（插入图片）

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

你也可以把第二个参数设置为回调函数来对上传的图片进行修改

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

insertNode

插入元素和文本节点

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

insertText（插入文本）

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

createLink, unlink（创建、取消链接）

// @param {String} text - link text
// @param {String} url - link url
// @param {Boolean} newWindow - whether link's target is new window or not
$('#summernote').summernote('createLink', {
  text: 'This is the Summernote's Official Site',
  url: 'http://summernote.org',
  newWindow: true
});

$('#summernote').summernote('unlink');

Callbacks

summernote支持初始化回调函数和jquery自定义事件的回调函数在V0.7.0之后的版本中callback选项配置的位置变化了。
在V0.7.0之后的版本中callback应该被callbacks对象包裹。
在V0.6.5之后的版本中事件的回调函数键值必须使用驼峰命名法。
在V0.6.5之前的版本中基本的事件命名（比如：oninit,onenter,onfocus,onblur,onkeyup,onkeydown,onpaste）都是使用小写字符串，但是在Callbacks中的对高级特性的事件回调函数命名使用驼峰命名法，这样就造成了命名不一致，更加混乱。所以我们把所有的小写的callback改成了驼峰命名法。

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

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

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

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

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

onImageUpload

重写图片上传方法

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

onChange

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

Custom button（自定义按钮）

summernote也支持自定义按钮。如果你想要创建你自己的按钮，可以定义新按钮并在options中配置它。

定义按钮

使用$.summernote.ui创建button对象，按钮具有以下属性：

contents:在按钮中显示的内容
tooltip:鼠标悬浮时的提示文字
click:按钮被点击时的回调函数
下面是一个插入“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 
}

将按钮作为jquery对象返回renderr（）

Using button with options（在配置项中使用按钮）

在工具栏中使用button。首先，定义一个键为buttons的button对象，然后在工具栏中定义定制的按钮

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

  buttons: {
    hello: HelloButton
  }
});

同样也可以在POPover中使用自定义按钮

crazy_bai

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录