DukeAnn
做一个优雅的程序员

富文本编辑器summernote基本使用

summernote1

安装

需要HTML5 doctype

引导使用特定的HTML元素和CSS属性需要HTML5 doctype。包括 <!DOCTYPE html>一开始你所有的项目。

<!DOCTYPE html><htmllang="en">
...
</html>

包括js / css

Summernote使用开源库(jQuery,引导font-awesome)。下面的代码包含在您的HTML <HTML>标签

<!-- include libraries(jQuery, bootstrap, fontawesome) -->
<linkhref="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"rel="stylesheet">
<linkhref="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css"rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<linkhref="summernote.css"rel="stylesheet">
<script src="summernote.min.js"></script>

不要忘记改变你下载的文件的路径如果summernote在不同的文件夹。

插入

添加 div body,这个目标元素随后将呈现summernote编辑工具。

<divid="summernote">Hello Summernote</div>

运行summernote

运行下面的脚本文件已经准备好了!

$(document).ready(function(){$('#summernote').summernote();});

基本API

初始化Summernote

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

初始化Summernote选项

高度和焦点

如果你设置集中选项,光标将初始化summernote后可编辑区域。

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

如果你设置高度,你可以看到下面resizebar。

summernote2

如果你不设置高度,根据内容可编辑区域的高度将会改变。

QQ截图20151218101838

销毁

销毁Summernote。

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

获取和设置代码

先的HTML内容summernote在匹配的元素集合。

varmarkupStr=$('#summernote').summernote('code');

如果初始化多个编辑器,你可以得到第二summernote jQuery的HTML内容情商.

varmarkupStr=$('.summernote').eq(1).summernote('code');

一连串的HTML设置每一个匹配元素的内容。

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

api的更多细节:深潜水api

破坏和代码

v0.7.0之后,直接jquery方法, destroy code被删除,以避免冲突与其他jquery库。你可以用summernote api调用这个方法。

官方文档

http://summernote.org/getting-started/#installation

完整代码

<!DOCTYPE html> 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <!--include libries(jQuery, bootstrap, fontawesome) -->
<!-- include libraries(jQuery, bootstrap, fontawesome) -->
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<!-- include summernote css/js-->
<link href="//cdn.bootcss.com/summernote/0.7.0/summernote.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/summernote/0.7.0/summernote.min.js"></script>
</head>
<body>
<div class="container">
 <h4>Lately library
 <span class="label label-info">Bootstrap v3.3.5</span>
 <span class="label label-success">font-awesome v4.3.0</span>
 <span class="label label-danger">CodeMirror v3.20.0</span>
 </h4>
 <div id="summernote">Hello summernote</div>
<script type="text/javascript" >
$(document).ready(function() {
 $('#summernote').summernote({
 height:300,
 focus:true,
 maxHeight:null,
 minHeight:null,
 });
 
});
 
</script>
</div>
</body>
</html>
DukeAnn的笔记本:DukeAnn的博客 » 富文本编辑器summernote基本使用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址