summernote 赋值以及取值-详细内容

文章内容

2017/2/25 9:38:50,作者: 黄兵

summernote 赋值以及取值

这个大神，写的很详细，但是，赋值这里错了。

//取值

var sHTML = $('.summernote').code();

//同一页面多个summernote时，取第二个的值

var sHTML = $('.summernote').eq(1).code();

我查了官网，现在是这样的了

如果是这样提示：

获取文本值的时候显示 Uncaught TypeError: $(...).code is not a function
解决方案：

新版本现在是这样取值了 $('#summernote').summernote('code');
赋值是这样$('#summernote').summernote('code', ‘所要赋的值’);

//赋值

var markupStr = 'hello world';
$('#editor').summernote('code', markupStr);

引入核心文件，Summernote需要几个JS库的支持，所以得先引入其它库

<!-- include libries(jQuery, bootstrap, fontawesome) -->

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">

<!-- include summernote css/js-->

<link href="summernote.css" />

<script src="summernote.min.js"></script>

写入html，只需加入一个DIV元素，写上ID

1	`<div` `id="summernote">Hello Summernote</div>`

写入JS初始化插件

1

2

3

$(document).ready(function() {

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

    });

API

初始化Summernote

1	`$('.summernote').summernote();`

使用参数初始化

设定高度与焦点

1

2

3

4

5

6

7

$('.summernote').summernote({

  height: 300,                 // set editor height

  minHeight: null,             // set minimum height of editor

  maxHeight: null,             // set maximum height of editor

  focus: true,                 // set focus to editable area after initializing summernote});

设定高度后，如果内容高度超过设定高度将出现滚动条，如果没有设定高度则一直往下挣开。设定focus为true时，打开页面后焦点定位到编辑器中。

自定义工具栏

$('.summernote').summernote({

  toolbar: [

    //[groupname, [button list]]

    ['style', ['bold', 'italic', 'underline', 'clear']],

    ['font', ['strikethrough']],

    ['fontsize', ['fontsize']],

    ['color', ['color']],

    ['para', ['ul', 'ol', 'paragraph']],

    ['height', ['height']],

  ]

});

预设参数

类型	按钮id	方法
Insert	picture	Insert a picture
	link	Insert a hyperlink
	video	Insert a video
	table	Insert a table
	hr	Insert a horizontal rule
Style	style	Format selected block
	fontname	Set font family
	fontsize	Set font size
	color	Set foreground and background color
	bold	Toggle weight
	italic	Toggle italic
	underline	Toggle underline
	strikethrough	Toggle strikethrough
	clear	Clearing all styles
Layout	ul	Make an un-ordered list
	ol	Make an ordered list
	paragraph	Set text alignment
	height	Set height of text
Misc	fullscreen	Toggle fullscreen editing mode
	codeview	Toggle wysiwyg and html editing mode
	undo	Undo
	redo	Redo
	help	Show help dialog

极简模式Air-mode

$('.summernote').summernote({

  airPopover: [

    ['color', ['color']],

    ['font', ['bold', 'underline', 'clear']],

    ['para', ['ul', 'paragraph']],

    ['table', ['table']],

    ['insert', ['link', 'picture']]

  ]

});

释放Summernote

1	`$('.summernote').destroy();`

事件

oninit

1

2

3

4

5

$('#summernote').summernote({

  oninit: function() {

    console.log('Summernote is launched');

  }

});

onenter

1

2

3

4

5

$('#summernote').summernote({

  onenter: function(e) {

    console.log('Enter/Return key pressed');

  }

});

onfocus

1

2

3

4

5

$('#summernote').summernote({

  onfocus: function(e) {

    console.log('Editable area is focused');

  }

});

onblur

1

2

3

4

5

$('#summernote').summernote({

  onblur: function(e) {

    console.log('Editable area loses focus');

  }

});

onkeyup

1

2

3

4

5

$('#summernote').summernote({

  onkeyup: function(e) {

    console.log('Key is released:', e.keyCode);

  }

});

onkeydown

1

2

3

4

5

$('#summernote').summernote({

  onkeydown: function(e) {

    console.log('Key is pressed:', e.keyCode);

  }

});

onpaste

1

2

3

4

5

$('#summernote').summernote({

  onpaste: function(e) {

    console.log('Called event paste');

  }

});

onImageUpload

可以重写图片上传句柄

1

2

3

4

5

$('#summernote').summernote({

  onImageUpload: function(files, editor, $editable) {

    console.log('image upload:', files, editor, $editable);

  }

});

onChange

IE9-10: DOMCharacterDataModified, DOMSubtreeModified, DOMNodeInserted

Chrome, FF: input

1

2

3

4

5

$('#summernote').summernote({

  onChange: function(contents, $editable) {

    console.log('onChange:', contents, $editable);

  }

});

支持18国语言，使用时引入你需要的语言文件，lang值设为你需要的语言

<!-- include summernote-ko-KR -->

<script src="lang/summernote-ko-KR.js"></script>

$(document).ready(function() {

  $('#summernote').summernote({

    lang: 'ko-KR' // default: 'en-US'

  });

});